Skip to main content
Search type Search syntax
タグ [タグ]
完全一致 "ここの単語"
作成者 user:1234
user:me (あなたの)
スコア score:3 (3+)
score:0 (なし)
回答 answers:3 (3+)
answers:0 (なし)
isaccepted:yes
hasaccepted:no
inquestion:1234
閲覧数 views:250
コード code:"if (foo != bar)"
セクション title:リンゴ
body:"リンゴ オレンジ"
URL url:"*.example.com"
セーブ in:saves
状態 closed:yes
duplicate:no
migrated:no
wiki:no
種類 is:question
is:answer
除外 -[タグ]
-リンゴ
高度な検索の詳細については、ヘルプ ページをご覧ください
でタグ付けされた検索結果
検索オプション not deleted user 12297

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

0
1 回答
2,486 閲覧数

CSSでwidthに設定した値がchromeのデベロッパーツールをみると小数点のつく微妙にずれた数字になっている。

CSSでwidthに設定した値がchromeのデベロッパーツールをみると小数点のつく微妙にずれた数字になっています。 width:740としているのに、デベロッパーツール上では、739.589のような半端な数値になってしまっています。 また、padding;20と設定すると、19.5となっていたりします。 padding:30と設定すると30となるのですが。 何故なのでしょうか? …
aqua's user avatar
  • 1,049
3
承認済み

CSSでwidthに設定した値がchromeのデベロッパーツールをみると小数点のつく微妙にずれた数字になっている。

chromeの表示が100%表示になっていなかったのが原因のようです! 縮小して‌​いくと一定のところで端数になります。
aqua's user avatar
  • 1,049
0
承認済み

flex itemの中の文字をitemの幅に合わせて折り返すにはどうしたら良いでしょうか?

親要素を display:grid とするとできました! ありがとうございました!
aqua's user avatar
  • 1,049
0
1 回答
184 閲覧数

Flexboxで、「.left { flex: 1 100px; } 」 は、「.left { flex: 0 0 100px; 」?

.left{ flex: 0 100px; } .right{ flex: 0 100px; } .center { flex: 1; } を .left { flex: 100px; background: tomato; } .right { flex: 100px; background: pink; } .center { flex: 1; backgro …
aqua's user avatar
  • 1,049
0
1 回答
1,667 閲覧数

img要素にdisplay:table-cellをしても効かない。(縦に配置されてしまう)

DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container container_1 … div class="container container_2"> <img src="green.jpg" alt=""> <img src="cosmos.jpg" alt=""> <img src="flower.jpg" alt=""> </div> </body> </html> [CSS
aqua's user avatar
  • 1,049
0
1 回答
844 閲覧数

flex itemの中の文字をitemの幅に合わせて折り返すにはどうしたら良いでしょうか?

flex itemの中の文字をitemの幅に合わせて折り返すにはどうしたら良いでしょうか? word-wrap: break-word; だとうまくいきません。 .container { display: flex; flex-wrap: wrap; } .item { background-color: skyblue; height: 150px …
aqua's user avatar
  • 1,049
0
2 回答
244 閲覧数

Flexboxで、flexプロパティとwidthでの%指定の違いは?

flex-shrinkはどのような時に有用でしょうか? 普通にwidthでitemの幅を%で設定した方が明瞭な気がします。 例えばitemを横並びで1行にしたいときは、width:10%+80%+10%にするいう具合にです。 flex-shrinkやflex-growの場合だと、配置されるアイテムが何%になるのかいちいち計算しなければならないですよね?
aqua's user avatar
  • 1,049
1

Flexboxでコンテンツの幅に合わせて縦並びにしたい。

align-items:center で出来ました!
aqua's user avatar
  • 1,049
0
1 回答
106 閲覧数

仮想テーブルレイアウトで上下センター揃えができない。

「仮想テーブルレイアウト」で上下センター揃えができないのですが、 以下のCSSでどこががおかしいのでしょうか? 希望のイメージ(上下左右#innerの中央揃え) 子要素のliに display: table-cell; を設定し、 親要素のulに display: table; を設定しています。 [index.html] <! … DOCTYPE html> <head> <link rel="stylesheet" href="style.css"> <meta name="" content="" charset="utf-8"> </head> <body> <div id="inner"> <ul> <li><a href="">あああああ</a></li> <li><a href="">いいいいい</ …
aqua's user avatar
  • 1,049
3
1 回答
726 閲覧数

divだとfloat解除されるのに、spanだとされないのはなぜですか?

--> [css] img { width: 500px; margin: 20px; float: left; } #study_001{ clear: left; } #margin{ padding: 10px 50px; margin: 10px 0px 10px 20px; background: #f98; } #border{ border-left …
aqua's user avatar
  • 1,049
1
1 回答
3万 閲覧数

HTMLで画像と文字が重なってしまう。

[HTML] <img src="images/001_blue.png" alt=""> <div id="study_001"> <span id="margin">margin</span><span id="border">border</span><span id="padding">padding</span> </div> <ul> <li>HTMLとCSS</li> < … --...--> [CSS] img { width: 500px; margin: 0 20px; float: left; } #study_001{ clear: left; } #margin{ padding: 10px 50px; margin: 10px 0px 10px 20px; background: #f98; } #border{ …
aqua's user avatar
  • 1,049
2
2 回答
6,273 閲覧数

liの高さが中身のimgの高さより大きくなる。

alt=""></li> <li><img src="image.png" alt=""></li> <li><img src="image.png" alt=""></li> <li><img src="image.png" alt=""></li> <li><img src="image.png" alt=""></li> </ul> [css … ] @charset "UTF-8"; /* CSS Document */ *{ margin:0; padding:0; } ul,li{ list-style: none; } li{ /*height: 160px;*/ } #wrap{ width: 960px; margin: 0 auto; background …
aqua's user avatar
  • 1,049
0
1 回答
3万 閲覧数

Flexboxで、1行に並ぶボックスの数を指定したい。

DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="box box_1"> … div> <div class="box box_2"> 2 </div> <div class="box box_3"> 3 </div> <div class="box box_4"> 4 </div> </div> </body> </html> [css
aqua's user avatar
  • 1,049
-3
1 回答
2,935 閲覧数

z-index: -1;とした要素の子要素の:hoverが反応しなくなる。

DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TEST</title> <link rel="stylesheet" href="styles.css"> </head> <header> <img src="left.jpg" alt=""> <img src="right.jpg" alt=""> <a …
aqua's user avatar
  • 1,049
1
2 回答
418 閲覧数

Flexboxでコンテンツの幅に合わせて縦並びにしたい。

DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Practice</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container … "> <p class="item">item</p> <p class="item">item</p> <p class="item">item</p> </div> </body> </html> [css] @charset "UTF-8"; *{ margin: 0; padding: 0; …
aqua's user avatar
  • 1,049

15 30 50 件 / ページ