【CSS】インラインブロック表示の基本｜inline-blockの使い方
CSSのdisplay: inline-block;を使って、インライン要素として表示されるが、ブロック要素の特性も持つ要素を作成する方法を解説します。
🔹 部分コード
<div class="d-inline-block">
これはインラインブロック表示の要素です。
</div>
<style>
.d-inline-block {
display: inline-block;
}
</style>
💻 完全動作コード（※このコピペのみでHTMLで動作するコード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインブロック表示</title>
<style>
.d-inline-block {
display: inline-block;
}
</style>
</head>
<body>
<div class="d-inline-block">
これはインラインブロック表示の要素です。
</div>
</body>
</html>
🧩 応用と活用方法
display: inline-block;は、インライン要素として表示されるものの、ブロック要素の特性も持ち合わせているため、非常に便利です。例えば、インラインで並べたいボックス要素やボタンなどに使用できます。
ブロック要素の特性として、widthやheightの設定ができ、インライン要素として隣接する要素と並べることができます。これにより、レイアウトの柔軟性が高まります。
このプロパティは、特にナビゲーションメニューやインラインリストなどでよく使われます。
🎯 インラインブロックテクニックの補足解説
display: inline-block;は、インライン要素として動作し、ブロック要素の特性も持つため、非常に強力なレイアウトツールです。例えば、アイコンとテキストを並べて表示する場合や、カスタムボタンの作成に役立ちます。
注意点として、インラインブロック要素は「横並び」に配置されますが、marginやpaddingを設定することによって、要素同士のスペースやレイアウトを細かく調整することが可能です。
また、text-align: center;と組み合わせることで、親要素内での中央揃えも簡単に行えます。
コピーしました！