CSS - インラインブロック：初学者向けの包括ガイド

こんにちは、Web開発者志望の方々！今日は、CSSのインラインブロックの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私はこの概念をステップバイステップでガイドし、多くの例を用いて明確にする予定です。あなたのお気に入りの飲み物を手に取り、リラックスして、このエキサイティングな旅に出発しましょう！

インラインブロックとは？

具体的な内容に入る前に、インラインブロックとは何かを理解しましょう。本棚に本を並べることを想像してみてください。いくつかの本は直立（インライン要素）させ、いくつかは横に（ブロック要素）並べたいと思います。しかし、本を直立させながらも特定のスペースを占めたい場合どうでしょうか？それがインラインブロックの出番です！

display: inline-blockというCSSプロパティは、インライン要素とブロック要素の特徴を兼ね備えています。インライン要素のように並んで配置される一方で、ブロック要素のように幅と高さのプロパティを尊重します。

簡単な例を見てみましょう：

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

この例では、クラスinline-block-elementを持つ3つのdiv要素を作成しています。これらは横並び（インライン）で表示されますが、幅と高さを設定することもできます（ブロック）。

CSS インラインブロック - 異なる行動

インラインブロックは、コンテンツによって異なる行動を示すという素晴らしい特徴があります。例で見てみましょう：

<style>
.container {
font-size: 0; /* インラインブロック要素間のスペースを除去 */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
font-size: 16px; /* コンテンツのフォントサイズをリセット */
vertical-align: top; /* ボックスを上に並べる */
}
.box1 { background-color: #e74c3c; }
.box2 { background-color: #2ecc71; height: 150px; }
.box3 { background-color: #f39c12; }
</style>

<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>

この例では、異なる高さを持つ3つのボックスを作成しています。vertical-align: topにより、すべてのボックスが上に並んでいます。このプロパティを遊んで、並び方の影響を見てみてください！

CSS インラインブロック - ナビゲーションリンク

インラインブロックの一般的な使用例として、ナビゲーションメニューの作成があります。簡単なナビゲーションバーを作成してみましょう：

<style>
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin-right: 5px;
background-color: #2c3e50;
}
nav a:hover {
background-color: #1abc9c;
}
</style>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

これにより、クリック可能なリンクを持つスリムなナビゲーションバーが作成されます。inline-blockプロパティを使用することで、パディングとマージンを設定することができます。

CSS インラインブロック - ボタングループ

インラインブロックはボタングループを作成するのに最適です。以下に方法を示します：

<style>
.btn-group {
font-size: 0; /* ボタン間のスペースを除去 */
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
.btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn:last-child {
border-radius: 0 5px 5px 0;
}
</style>

<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>

これにより、ボタンが継ぎ目なく連結されたボタングループが作成されます。

CSS インラインブロック - 画像とテキスト

インラインブロックは画像とテキストを並べるのに非常に便利です。以下に方法を示します：

<style>
.image-text {
margin-bottom: 20px;
}
.image-text img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.image-text p {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px); /* 画像の幅に基づいて調整 */
}
</style>

<div class="image-text">
<img src="https://via.placeholder.com/100" alt="Placeholder">
<p>これは画像の隣に表示されるテキストです。インラインブロックプロパティを使用することで、画像とテキストを垂直に並べることができます。</p>
</div>

これにより、画像とテキストがきれいに並んだレイアウトが作成されます。

CSS インラインブロック - プログレスバー

最後に、インラインブロックを使用してプログレスバーを作成してみましょう：

<style>
.progress-container {
width: 300px;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.progress-bar {
display: inline-block;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>

<div class="progress-container">
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>

これにより、簡単なプログレスバーとパーセンテージインジケータが作成されます。

結論

そして、みなさん、ここまでいましたね！私たちは多様なinline-blockプロパティとそのさまざまな応用を探求しました。ナビゲーションメニューからプログレスバーまで、このプロパティはウェブページ上の要素を配置する柔軟な方法を提供します。

CSSをマスターする鍵は練習です。したがって、これらの例を遊びながら、自分だけのユニークなデザインを作成してみてください。ハッピーコーディング！

Credits: Image by storyset