CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのdisplay:blockを使って要素をブロック表示する方法

CSSのdisplayプロパティにblockを指定すると、要素は必ず新しい行から始まり、親要素の利用可能な幅全体を占めるようになります。これにより、その要素はブロックレベル要素として表示されます。

ブロック表示の特徴は以下のとおりです。

  • 要素の前後で改行され、常に新しい行から始まる
  • widthやheight、margin、paddingなどのスタイルを自由に指定できる
  • 特に指定しなければ、横幅は親要素いっぱいに広がる

代表的なブロックレベル要素には、<div>、<p>、<h1>〜<h6>などがあります。

サンプルコード1：block と inline-block の違い

それでは、CSSでdisplay: blockを実装する例を見てみましょう。inline-blockとの違いもあわせて確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: orange;
    color: white;
}
p.demo1 {
    display: block;
}
p.demo2 {
    display: inline-block;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo1">10AM</p> on 19th December, 2019.
</div>
<hr />
<div>
Match will end at <p class="demo2">5PM</p> on 19th December, 2019.
</div>
</body>
</html>

実行結果

CSSのdisplay:blockを使って要素をブロック表示する方法

display: blockを指定した「10AM」の部分は前後で改行されて独立した行になり、背景色（オレンジ）が行全体に広がっているのがわかります。一方、inline-blockを指定した「5PM」は文中に組み込まれ、内容の幅だけが背景色で塗られています。

サンプルコード2：文章中でのブロック表示

続いて、もうひとつの例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: orange;
    color: white;
}
p.demo {
    display: block;
}
</style>
</head>
<body>
<h1>Student Result</h1>
<div>
The result of MCA student will be declared on <p class="demo">20th December 2019</p>Check the website on the same day at 8PM.
</div>
</body>
</html>

実行結果

CSSのdisplay:blockを使って要素をブロック表示する方法

このように、display: blockを適用した要素は、文章の途中に記述しても強制的に独立した行として表示され、その前後のテキストは上下に分断されます。日付や見出しのように、目立たせたい部分を独立したブロックとして配置したい場合に便利です。

まとめ

  • display: blockを指定すると、要素は新しい行から始まり、幅いっぱいに広がる
  • インライン要素（<span>や<a>など）にも適用でき、ブロックレベル要素として振る舞わせられる
  • レイアウトの基本となる重要なプロパティなので、inlineやinline-blockとの違いを理解しておくとよい
  1. CSSを使って画像スプライト（Image Sprite）からアイコンを表示する方法

    画像スプライト（Image Sprite）とは 画像スプライトとは、複数の小さな画像を1枚の大きな画像ファイルにまとめたものです。最大のメリットは、HTTPリクエストの回数を減らせることにあります。ブラウザがサーバーへ送るリクエスト数が減るほど、サイトの読み込み時間が短縮され、ページの表示速度が向上します。 CSSでスプライト画像からアイコンを表示する仕組み CSSでは、background-positionプロパティを調整することで、1枚のスプライト画像の中から目的のアイコン部分だけを切り出して表示できます。基本的な流れは以下の通りです。 backgroundプロパティでスプライト画像

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ