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 |
除外 |
-[タグ] -リンゴ |
高度な検索の詳細については、ヘルプ ページをご覧ください。 |
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となるのですが。
何故なのでしょうか? …
3
票
承認済み
CSSでwidthに設定した値がchromeのデベロッパーツールをみると小数点のつく微妙にずれた数字になっている。
chromeの表示が100%表示になっていなかったのが原因のようです!
縮小していくと一定のところで端数になります。
0
票
承認済み
flex itemの中の文字をitemの幅に合わせて折り返すにはどうしたら良いでしょうか?
親要素を
display:grid
とするとできました!
ありがとうございました!
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 …
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 …
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 …
0
票
2
回答
244
閲覧数
Flexboxで、flexプロパティとwidthでの%指定の違いは?
flex-shrinkはどのような時に有用でしょうか?
普通にwidthでitemの幅を%で設定した方が明瞭な気がします。
例えばitemを横並びで1行にしたいときは、width:10%+80%+10%にするいう具合にです。
flex-shrinkやflex-growの場合だと、配置されるアイテムが何%になるのかいちいち計算しなければならないですよね?
1
票
Flexboxでコンテンツの幅に合わせて縦並びにしたい。
align-items:center
で出来ました!
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="">いいいいい</ …
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 …
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{ …
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 …
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 …
-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 …
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; …