トッププログラミング【初心者・未経験向け】覚えておきたいプロパティ-配置display編-

プログラミング

2024年12月28日 05:08

【初心者・未経験向け】覚えておきたいプロパティ-配置display編-

Webページを作るとき、要素の配置はとても大切です。今回は初心者でもわかりやすいように、HTML要素の配置に使うdisplayプロパティについて説明します。基本的な使い方を理解すれば、デザインが一気に楽になります！

display編

今回はボックス編から使用していたHTMLに親要素を追加したコードを使用します。下記をコピーしてbody内を変更してください！

<body>
　<div class="wapper">
　　<div class="red--box"></div>
　　<div class="green--box"></div>
　</div>
</body>

displayとは？

displayプロパティは、要素の表示方法を決定します。例えば、block、inline、inline-block 、flexなどがあり、ページ内での要素の配置や振る舞いを大きく変えることができます。

block

blockは、幅・高さを指定でき、要素の前後に改行が入り縦に並べらことができます。

.red--box, .green--box {
    display: block;
}

red--boxとgreen-boxが縦に並べました。

blockはwidthやheightで同時に幅や高さを指定することができます。

displayはこのように使い分けができるので試してみてくださいね。

《 displayプロパティの例》

block 幅、高さを指定できる。要素の前後に改行が入り縦に並ぶ。

inline 幅、高さは指定できず要素の大きさによって決まる。要素の前後に改行が入らず、横に並ぶ。

inline-block 幅、高さを指定できる。要素の前後に改行が入らず、横に並ぶ。

flex 親要素に指定することで子要素が横に並ぶ。

覚えておきたいプロパティの記事一覧

▶【初心者・未経験向け】覚えておきたいプロパティ-文字のデザイン編-

▶【初心者・未経験向け】覚えておきたいプロパティ-ボックス編-

▶ 【初心者・未経験向け】覚えておきたいプロパティ-余白編-

この記事を書いた人

平社員ハラちゃん

元々営業職でエンジニアの知識がゼロのところからプログラマーを目指して勉強中です。

平社員ハラちゃん

元々営業職でエンジニアの知識がゼロのところからプログラマーを目指して勉強中です。

「記事名」に関する資料ダウンロードフォーム

おすすめの記事

キャリア【書類選考合格のための履歴書ガイド】3. 自己PRと資格～履歴書完成編～（サンプル付き）

2025年5月3日 09:48

キャリア【書類選考合格のための履歴書ガイド】職種別・職歴の書き方③ - 営業職編（サンプル例付き） -

2025年3月31日 05:47

キャリア【書類選考合格のための履歴書ガイド】職種別・職歴の書き方② - コールセンター編（サンプル例付き） -

2025年2月22日 13:10

キャリア【書類選考合格のための履歴書ガイド】職種別・職歴の書き方① - 事務職編（サンプル例付き） - 　

2025年1月16日 12:03

キャリア【書類選考合格のための履歴書ガイド】2. 職歴作成

2024年12月28日 05:08

キャリア【書類選考合格のための履歴書ガイド】 1.履歴書作成の基礎

2024年7月13日 07:48

プログラミングHTML とは？未経験者・初心者にもわかりやすく説明

2024年7月13日 08:57

プログラミング【初心者こそ使うべき】ChatGPTで簡単プログラミング｜活用事例5選

2024年6月9日 01:13

記事一覧に戻る

【初心者・未経験向け】覚えておきたいプロパティ-配置display編-

display編

displayとは？