Display Blockとは？
Webデザインにおいて、CSSで要素の表示方法を指定する際に使われる「display」プロパティには、複数の値があります。
その中でも「display: block」は、よく使われる値の1つです。
この記事では、Display Blockの基本的な使い方を初心者向けに解説します。
Display Blockの特徴
Display Blockは、要素をブロックレベルで表示するためのプロパティです。
ブロックレベル要素は、縦に積み重なる形で配置され、横幅いっぱいのサイズを持ちます。
また、改行されるため、上下の要素との間に空白ができます。
Display Blockの使い方
Display Blockは、要素の表示方法を指定するCSSのプロパティとして使われます。
例えば、以下のように記述することで、指定した要素がブロックレベルで表示されるようになります。
div {
display: block;
}Display Blockは、通常はブロックレベル要素で使用されますが、インライン要素に対しても使用することができます。
例えば、以下のように記述することで、指定した要素がブロックレベルで表示されるようになります。
span {
display: block;
}Display Blockの実用例
Display Blockは、主に以下のような場面で使われます。
見出しの下に線を引く
h1 {
border-bottom: 1px solid #000;
display: inline-block;
}画像を中央揃えにする
img {
display: block;
margin: 0 auto;
}ボタンを横並びにする
button {
display: inline-block;
}Display Blockは、Webデザインにおいて、要素の表示方法を指定するためのプロパティの1つです。
このプロパティは、要素をブロックレベルで表示するために使用され、ブロックレベル要素は、縦に積み重なる形で配置され、横幅いっぱいのサイズを持ちます。
また、改行されるため、上下の要素との間に空白ができます。
例えば、以下のようにCSSを記述することで、要素をDisplay Blockで表示することができます。
div {
display: block;
}Display Blockは、通常はブロックレベル要素で使用されますが、インライン要素に対しても使用することができます。
インライン要素にDisplay Blockを指定することで、要素をブロックレベルで表示することができます。
例えば、以下のようにCSSを記述することで、インライン要素をDisplay Blockで表示することができます。
span {
display: block;
}Display Blockは、主に以下のような場面で使われます。
見出しの下に線を引く
見出しの下に線を引く場合、通常はborder-bottomを使いますが、Display Blockを併用することで、線を見出しに合わせて表示することができます。
h1 {
border-bottom: 1px solid #000;
display: inline-block;
}画像を中央揃えにする
Display Blockを使うことで、画像を中央揃えにすることができます。
img {
display: block;
margin: 0 auto;
}まとめ
以上のように、Display Blockは、Webデザインにおいて、要素の表示方法を指定するプロパティとして、幅広く使われています。
初心者でも簡単に理解できるように、基本的な使い方と実用例について解説しました。
Webデザインを学ぶ際には、Display Blockを活用して、魅力的なWebページを作成してみてください。
