【🔰初心者向け】CSS入門：displayの使い方を総まとめ！inlineやblockの違いは？

CSSのdisplayプロパティは、要素の表示方法を制御するために使われる重要なプロパティです。inlineやblockなど、さまざまな値が存在し、それぞれが要素のレイアウトに大きな影響を与えます。この記事では、displayプロパティの使い方と、inlineやblockの違いについて初心者向けに解説します。

目次 open close

1. displayプロパティとは？
2. blockとは？
3. inlineとは？
4. inline-blockとは？
5. display: noneとは？
6. まとめ

1. displayプロパティとは？

displayプロパティは、HTML要素がページ上でどのように表示されるかを決定します。これにより、要素が他の要素とどのように配置されるかをコントロールすることができます。

主要な`display`の値

block: 要素をブロックレベル要素として表示します。幅は親要素に合わせて広がり、上下に余白が追加されます。
inline: 要素をインライン要素として表示します。幅は内容に応じて決まり、他のインライン要素と横並びになります。
inline-block: インライン要素のように横並びになりますが、ブロック要素のように幅や高さを指定できます。
none: 要素を非表示にします。ページ上には存在しないものとして扱われます。

2. blockとは？

blockは、要素をブロックレベル要素として表示します。ブロックレベル要素は、親要素の幅いっぱいに広がり、通常は改行を伴います。代表的なブロックレベル要素には、<div>や<p>があります。

使用例

div {
    display: block;
    width: 100%;
    background-color: #f0f0f0;
}

この例では、<div>要素がブロックレベル要素として表示され、親要素の幅いっぱいに広がります。

3. inlineとは？

inlineは、要素をインライン要素として表示します。インライン要素は、他のインライン要素と横並びになり、幅は内容の長さに依存します。代表的なインライン要素には、<span>や<a>があります。

使用例

span {
    display: inline;
    color: blue;
}

この例では、<span>要素がインライン要素として表示され、他のテキストと同じ行に配置されます。

4. inline-blockとは？

inline-blockは、インライン要素のように横並びになりますが、ブロック要素のように幅や高さを指定できるプロパティです。これにより、インライン要素の柔軟性とブロック要素の制御性を両立できます。

使用例

img {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 10px;
}

この例では、<img>要素がinline-blockとして表示され、画像のサイズと余白を調整できます。

5. display: noneとは？

display: noneは、要素を非表示にするプロパティです。非表示になった要素は、ページのレイアウトには影響を与えず、存在しないものとして扱われます。

使用例

div.hidden {
    display: none;
}

この例では、class="hidden"が付いた<div>要素がページ上で非表示になります。

6. まとめ

displayプロパティを使いこなすことで、ウェブページのレイアウトを柔軟にコントロールできます。block、inline、inline-block、noneなど、それぞれの違いを理解し、適切に使い分けることで、より効果的なデザインを実現しましょう。

Webサイトを作れるようになりたいけど、どこから始めていいかわからない…
そんなあなたにピッタリの1冊がこちら！

🎯 『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』

今回は、初心者から中級者まで幅広く支持されている本書の魅力を、実際のレビューを交えてご紹介します！

✅ この本1冊で学べること

『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』は、Web制作に必要な知識を体系的に学べる入門書です。

🔸 HTMLとCSSの基本がゼロからわかる！

・タグの意味や使い方
・スタイルシートの基本構文
・テキストや画像のレイアウト方法など

🔸 最新トレンドに対応！

・レスポンシブデザイン
・FlexboxやCSSグリッド
・現場で使える実践テクニック

🔸 手を動かして覚える構成

サンプルコードのダウンロードも可能！
実際にコードを打ち込んで、体感しながら学習できます。

📚 対象読者はこんな人！

Web制作を始めたいけど何から手を付ければいいか分からない方
HTML・CSSを基礎からじっくり学びたい方
デザイン性の高いWebサイトを作りたい方
実務で役立つ最新技術まで身につけたい方

🗣 実際のレビューも高評価！

「昔ちょっと触ったことがあるけど、ちゃんと学び直したい人にもおすすめ」
「入門書としては完成度が高く、実用性も十分」
「手を動かしながら学べるから理解が深まる」

読みやすく、実践的な構成で、**「読むだけじゃなく、作って学ぶ」**が叶う1冊です。

✨ この本のここがスゴイ！

入門書なのに内容が薄くない！ → JavaScriptの基本や便利なプラグイン紹介まで
デザイン面のセンスも抜群！ → 見やすく、レイアウトの勉強にもなる
「読む → 実践 → 定着」の流れが自然にできる構成

🤖 Webデザイン学習をこれから始めるならこの1冊！

Web制作のスキルは、今や副業・転職・フリーランスへの第一歩としても大注目！
『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』は、確実なスタートを切るための最強バイブルです。

📝 まとめ

項目	内容
タイトル	1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
対象	初心者〜中級者向け
特徴	HTML・CSSの基礎〜最新技術まで網羅
評価	実践的・デザイン性も高い・再学習にも最適

これからWebデザインを始めたいあなたに、心からおすすめできる1冊です。