Skip to main content

[css] タグが付いた質問

CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。

絞り込み
並べ替え
タグ付けされた
18
4 回答
4,757 閲覧数

要素に適用されている実際のフォントを知るには?

CSS の font-familyプロパティ について、こちらに font-familyプロパティは、フォントの種類を指定する際に使用します。 フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 ...
jirolabo's user avatar
  • 2,234
6
3 回答
2万 閲覧数

input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?

チェックボックスと連動して変化する表示を CSS だけで実装できないかと、以下のようなコードを書きました。これは Chrome 46 では期待通りに動き、チェック状態がテキストで表示されます。 input:before { content: 'not checked'; position: absolute; top: 30px; } input:checked:...
unarist's user avatar
  • 1.5万
2
1 回答
2,325 閲覧数

cssで枠の中の画像をアスペクト比を保ちつつ拡大して全て表示する方法

divで囲まれたimg要素があります。 <div class="wrapper"> <img class="image" src="xxxx" /> </div> imgのアスペクト比を保ちつつdivの中いっぱいに拡大表示したいです。 画像はすべて表示されるようにしたいです。(divをはみ出さない) 縦か横に隙間が出来る場合は、...
hikaruna's user avatar
  • 659
0
1 回答
110 閲覧数

addEventListnerをページ更新後に追加される要素にも適応したい。

Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。 分からない事 同じクラス名の要素に別々の変更を加えるには 作成したい機能 inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。 要素について .dlcardWrapがあってその子要素として.dlcardがあります。...
wataru's user avatar
  • 1,133
6
1 回答
432 閲覧数

ベンダープレフィックスを自動的に付与する方法

Visual Studio 2013(+ Web Essentials)でSass(.scss)ファイルを編集しています。 .scssファイルに div.border { border-radius: 5px; } と書いたらレンダープレフィックスを自動的に付与して、cssに div.border { -o-border-radius: 5px; -moz-border-...
jirolabo's user avatar
  • 2,234
5
1 回答
777 閲覧数

特定の1行(HTML)に紐づいているJSを特定する方法はありますでしょうか?

特定の1行のHTMLソースに紐づいているJSを 一番効率よく割出す方法はありますでしょうか? 具体的には以下となるのですが、 https://www.sony.co.jp/united/userexperience/support/ja_jp/?uxscc=set 例えば上記サイトの Gナビ部:【CSR・環境・社会貢献】 のアコーディオン時のレイアウトが崩れています。 ...
HALU's user avatar
  • 53
4
3 回答
3,871 閲覧数

jQuery / JavaScriptで、ロード画面を表示させたい

作成したWebサイトのページに含まれるDOM要素が多く、ページの表示が遅い。 また、JavaScriptなどで再レイアウトされる要素が崩れるといった症状がでている。 すべての要素が読み込まれるまでページを表示させず、すべての要素が読み込まれた時点でページを表示させるにはどうすればよいか。
Yuki TANABE's user avatar
4
3 回答
3万 閲覧数

DIV要素にonloadの代用になるものはありますか?

div要素にonloadを付けたいのですが、残念ながら現在の時点ではdivにonloadは付けれません。 ですが、divにonloadなる物を付けたいのですが、何か代用できる方法などはございますでしょうか? 私がやりたいことは、「onload指定している箇所が読み込まれた後、他の要素を表示する」事です。 <style> .main_off { display: none; } ....
名も無いWEB屋's user avatar
3
1 回答
145 閲覧数

文章の一部を黒く塗りつぶしたい

こちらの文章で文字の一部だけ黒く塗りつぶしておきたいのですが、何か方法はありますでしょうか。 jqueryをつかった方法はありましたが、できればcssだけでやりたいと思っています。 <p>アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈(たいくつ)しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。&...
user37046's user avatar
  • 287
3
3 回答
549 閲覧数

縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。

★前提・実現したいこと 縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。 例えば、幅×高さで以下の二つを同じ200px200pxで表示する場合です。 ①2000×1333 ②160×160 ★発生している問題・エラーメッセージ 上記例の場合だと、幅はそろえることができるのですが、 高さが合いません… 【幅=高さ】 【幅≠高さ】 ...
s.k's user avatar
  • 169
3
1 回答
160 閲覧数

PolymerとBootstrapの併用について

お世話になってます。 現在Bootstrapを使用してWebサイトを開発しています。 しかし、Polymerを利用して部品化してみようと思い、Polymerを導入したのですが、BootstrapのclassがComponentに反映されなかったりと何かと不具合が生じています。 Componentのhtmlには polymer.htmlとbootstrap.min.cssをlinkしています。 ...
chonbo's user avatar
  • 536
3
3 回答
2,694 閲覧数

Javascriptで特定のカラーを全て他の色に置き換えるには?

以下のHTMLとCSSがあるとき、Javascriptで #FF0000 を #0000FF に変更するには すべての要素を繰り返し処理で回し、さらにcolorやborder-color、background-colorの 一つ一つの要素の中を覗いて書き換える方法しか思いつかないのですが、もうすこし 効率の良い方法はありますか? また、:after や :before ...
hojo's user avatar
  • 1,175
2
1 回答
400 閲覧数

cssnext から rem に自動で px を加える機能をなくしたい

cssnextを使っているのですが、IE8のサポートが切れたのでremに自動にpxを加える機能をなくしたいのですが、セットになっているので、これだけ外すことはできないのでしょうか? https://github.com/robwierzbowski/node-pixrem を見ても英語で完全にはわからず翻訳してもそれらしい記述が見つかりません。 どなたか、ご存じないでしょうか? ...
web's user avatar
  • 129
2
3 回答
2,027 閲覧数

データの無い行も含めて、常に50件表示したい

現在下記ソースのようにjqueryのcolumnsを使用して実装をしています。 データの無い行も含めて常に50行を表示したいのですが、方法が分かりません。 また、常に50行を表示したいので、表示行数設定は削除したいです。 ご教授をお願いします。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
aspara_prime's user avatar
  • 1,316
2
1 回答
2,396 閲覧数

FLOCSSでいうutilityについて

FLOCSSでいうutilityは便利なので、たくさん使いたくなってしまいますが、 制作時は良くても、クラス名がたくさんになってしまうと、 CSSがまとまっておらず管理がしにくいという説もあります。 どのような制限をつけて使っていますか? 好き放題使っても問題ないのでしょうか? 例 /* Bottom margin */ .u-mb-0{ margin-bottom: 0 !...
web's user avatar
  • 129
1
1 回答
220 閲覧数

サイトのナビゲーションの、選択されているテキストに色を付けたいです。

サイトのナビゲーションなどによくある、選択されているページの文字色を変えたいのですが、 どのようにすれば良いのでしょうか? 例えば以下の場合、会社案内をクリックしたら、会社案内ページが表示されているときは<li><a href="#">会社案内</a></li>のテキストをredにする。といった動きにしたいです。 <ul class="nav"...
poplot726's user avatar
  • 243
1
1 回答
99 閲覧数

HTML5とCSS3を使って写真を互い違いに配置した後、横にチャット風メッセージを挿入し、レスポンシブ(スマホ)対応にしたい

PC用デザインでは、一番上に写真が左、メッセージと人物アイコンが右に配置、二番目に写真が右で左がメッセージと人物アイコンが右、三番目に写真が左、メッセージと人物アイコンが右に配置されるようなデザインにしました。そのあと本画像のような上が写真でメッセージと人物アイコンが下になるようにスマホ対応画面にしたいと思っています。どうしたら画像のような画面を再現できるでしょうか? ...
WEB学び僧's user avatar
1
2 回答
8,293 閲覧数

HTMLのtextのonkeydownで半角数字のみ入力を指定したところテンキー入力が効かない。

お世話になります。 Windows、VisualStudio2015のASP.NET(VisualBasic)、.NET Framework4.6、 ローカルIIS、ブラウザはGoogleChrome、IE、で開発しています。 1つのページにtext(ASP.NETではTextBox、名称はtxtTest)を置き、 半角数字のみ入力できるように、function(名称はnumOnly())...
user20210's user avatar
1
1 回答
866 閲覧数

GitHub PagesでCSSが反映されない

VSCodeで書いたコードを使ってGitHubで自作HPを公開しようとしています。 コードはHTMLとCSSのみ。CSSが反映されずに困っています。 VSCodeのプレビューでは問題なく反映されているのですが、原因がわかりません。 試したこと 1. <link rel="stylesheet" href="css/home.css"> を <...
Emma's user avatar
  • 13
1
1 回答
977 閲覧数

HTMLでGridView部品のような表示・動作がしたい

FirefoxアドオンをChrome拡張に移植中なんですが、Visual StudioなどにあるGUI、GridViewのような表示をしたくて悩んでます。具体的にどんなものかと言うと以下の画像のようなものです。 selectタグだと複数列ができません。 条件としては、 複数列表示ができる 行単位での選択・検知ができる を満たすようなものです。
Lamron's user avatar
  • 485
1
1 回答
8万 閲覧数

position: absolute;した親要素の高さがなくなるのを解消する一般的な(clearfixのような)方法はありませんか?

.box {position: absolute;} とした要素の親要素の高さ(幅も?)がなくなるのを解消する 一般的な(clearfixのような)方法はありませんか? [html] <body> <div class="wrap"> <div class="box_left"> A </div> ...
aqua's user avatar
  • 1,049
0
0 回答
194 閲覧数

ブラウザ更新時の読み込みシームレス化を実現したいです

ブラウザ更新時の画像読み込みシームレス化(以下のブラウザページ)のページ全体版を実現したいと思っています。 https://teratail.com/questions/271650 上の過去の質問回答の構文では画像URLを指定していますが、画像URLではなくWEBページ全体を表示させる場合に更新時のラグ(ページが完全に表示されるまでの読み込み中の状態)...
user44293's user avatar
0
1 回答
75 閲覧数

display:block;同士横並びにしたい

以下のようなコードでtd1とtd2の両方にdisplay:blockを適用すると、td1の下にtd2が配置されてしまいます。 td1の右横にtd2を配置したいのですがどうしたらよいですか? 現状では、画像の黒色の配置になっていますが、td2を赤色のところに配置したいです。 <table> <tr> <td class = "td1">aaaa&...
denden's user avatar
  • 117
0
1 回答
137 閲覧数

background-image が指定された div で、自動的に height を指定する方法を知りたい

やりたいこと background-image, max-width が指定された div で、自動的に height を明示する方法を知りたい。 max-width を超える場合は、 max-width まで縮小したい。 できれば css だけで実現したい。 前提条件 画像のサイズは不定で、小さいこともあれば大きいこともある。 div の max-width は 400px を指定。 ...
vips's user avatar
  • 17
0
2 回答
251 閲覧数

Web開発のポートフォリオ作成手順と学習内容について

プログラミング初心者です。現在、HTML,CSS,Pythonを学習中で、同時にポートフォリオ作成を進めようと考えています。Webアプリを作成するときには、 フロントエンドでHTML,CSS,Javascript バックエンドでPython そして、SQLとAWSを学ぶ必要があると調べた結果わかりました。 しかし、ポートフォリオを作成するさいに、SQLやAWSの知識はどこで必要になるのでしょうか? ...
stark02's user avatar
0
1 回答
153 閲覧数

Bootstrapでhover時に他のアイコンに変えたい

hover時に1-circleから、1-circle-fillのアイコンに変えたいです。 下記のように記述したところ、画像のように黒色の四角形になってしまいます。 よろしくお願い致します。 .header-icon .bi-i-circle:hover { font-family: 'Bootstrap-icons'; content: '\F796'; background-...
pepe's user avatar
  • 39
0
1 回答
575 閲覧数

チェックボックスに適用したCSS(ブロックの折り畳みを開閉)が機能しません

すみません。ド素人で申し訳御座いません。個人的理由でみよう見まねで作ってみた人物の紹介の為のチェックボックスが効きません。何故かお解りでしょうか?宜しくお願い致します(m_m)。 動かない事例 動く事例 html(動かない事例の) <h4 class="teacher_h3">ハイレベルプロの先生のご紹介</h4> <div class="...
Kentaro's user avatar
  • 161
0
1 回答
381 閲覧数

Uncaught TypeError: overlay_navigation.velocity is not a functionのエラーについて

以下のようにサイトを作成中です。 サンプルのように三本バーをクリックするとアクションが行われるようにしたいと考えてます。 jsにある overlay_navigation.velocity('transition.slideLeftIn' の部分でエラーを起こします。 出ているエラーは以下になります。 script.js:16 Uncaught TypeError: ...
magu's user avatar
  • 27