記事の前に
webの勉強で、今はHTML,CSSを学習中。
そのときは再現できても、
学んだことをすぐ忘れがちなので、頭の中を整理し、まとめるため作成。
あと、コメントアウトでの注釈多めです。
自分のためだが、他の人にも、もしも役に立ったら。
display: inline-block; を使う理由
-
display:flexでは対応しづらい古いIEなどで横並びさせたい時に使う。
そうでないときはdisplay:flexが便利 -
floatだと、浮いたりするし、コードが複雑になるため、floatはほぼ使用しない。(経験的にfloatは、かなりかなり複雑、、、)
3floatは、画像の横に文章を回り込ませるときに使用のみ使用を考える。
参考
float:leftやfloat:rightを使う時に注意する点とその対策について教えてください。
1横並び基本 中央寄せ
index.html
<div id="nav">
<p>inline-blockで横並びにしたもの</p>
<ul>
<li >HOME</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
style.css
@charset "utf-8";
p{text-align: center;}
/*文章を左右中央に揃えたいときは、
1その文章が含まれる要素、
2もしくはその親要素に対してtext-align:centerを指定 */
#nav ul {
list-style-type: none;
text-align:center;
/*
機能1 ブロックを中央に
機能2 テキストを真ん中に*/
}
/* id="nav"の中のulの中のliに対してCSSを適用*/
@charset "utf-8";
p{text-align: center;}
/*文章を左右中央に揃えたいときは、
1その文章が含まれる要素、
2もしくはその親要素に対してtext-align:centerを指定 */
#nav ul {
list-style-type: none;
text-align:center;
/*
機能1 ブロックを中央に
機能2 テキストを真ん中に*/
}
/* id="nav"の中のulの中のliに対してCSSを適用*/
#nav ul li {
display: inline-block;/*横並びになる、解除すると横並びでなくなる。*/
}
#nav ul li {
width: 80px;
padding: 10px 0;
margin: 10px 0;
vertical-align: middle;/*縦の表示位置も指定できる*/
background: blue;
color: #fff;
font-size: 14px;
}
結果
コード参考
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
2隙間をなくし、各ブロックをぴったりくっつける方法
1のコードに追加部分のみ記載
style.css
#nav ul {
font-size: 0;/* inline-block指定時に隙間をなくす*/
}
#nav ul li {
vertical-align: bottom;/* 高さを揃える*/
}
#nav ul li {
font-size: 14px;/* font-size0指定したため、 指定必要*/
}
上記のコードのそれぞれの意味については、display: inline-block; と float:
で以下のように説明されています。
display: inline-block; ←子要素に対して
vertical-align: top; または vertical-align: bottom; ←子要素に対して
font-size: 0; ←親要素に対して
※ 2によって高さまたはボトムを揃える。
※ 3によってinline-block指定時に生じる隙間をなくす。子要素にfont-size指定するのを忘れないように。
参考url
display: inline-block; と float:
header横並び
index.html
<div class="header">
<h1>
サイトタイトル
</h1>
<div class="nav">
<ul>
<li><a href="#">リスト1</a></li>
<li><a href="#">リスト2</a></li>
<li><a href="#">リスト3</a></li>
</ul>
</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
.header{
width: 960px;
background-color: yellow;
}
h1{
text-align: left;
/* ブロック要素左寄せ */
display: inline-block;
vertical-align: bottom;
}
.nav{
text-align: left;
display: inline-block;
vertical-align: bottom;
}
/* .nav ul{
font-size: 0;
} */
/* 隙間を消したい時に使う */
.nav ul li{
display: inline-block;
vertical-align: bottom;
}
.nav ul li a{
display: block;
margin: 15px 30px 15px 0;
font-size: 14px;
font-weight: bold;
}
結果
