ブロック要素は、ウェブページの中で大きなブロックのようなものです。
ブロック要素は、ウェブページの中で異なるセクションやコンテンツを区切るために使われます。
CSS ブロック要素の基本
CSS ブロック要素は、ウェブページの構造を形成し、コンテンツの配置やデザインを制御するための要素です。
ブロック要素は、新しい行から始まり、幅全体を占有し、隣接する要素との間に自動的に改行を挿入するのが特徴です。
ブロック要素とは？
ウェブページの中で大きなブロックのようなものです。
イメージとしては、ページを構成するビルや建物のようなものです。
ブロック要素は、ウェブページの中で他のセクションやコンテンツを区切るために使われます。
代表的なブロック要素には<div>、<p>、<h1>から<h6>、<ul>、<ol>、<li>などがあります。
これらの要素はコンテンツをまとめたり、レイアウトを構築したりするために幅広く使用されます。
インライン要素との違い
ブロック要素とインライン要素の主な違いは、要素が表示される方法です。
ブロック要素は新しい行から始まり、幅全体を占有します。これに対して、インライン要素はテキスト内で横に並び、コンテンツの前後に改行を挿入しません。
ブロック要素の特性
ブロック要素は、ウェブページの構造を形成し、レイアウトを構築する際に重要な特性を持っています。
レイアウト構築
ブロック要素を使用してページ内のセクションを構築し、配置を制御できます。
セクション間には自動的に改行が挿入され、コンテンツを独立して表示できます。
コンテナ要素
ブロック要素はコンテナとして機能し、他の要素を包み込むことができます。
これにより、特定のセクションやコンテンツをグループ化することが可能です。
テキストブロック要素
一部のブロック要素はテキストを含むため、テキストブロック要素と呼ばれます。
テキストブロック要素は<p>（段落）や<h1>（見出し）、<ul>（リスト）などがあります。
ブロック要素のスタイリング
幅と高さの調整
ブロック要素は通常、幅と高さを調整することができます。
これにより、コンテンツの表示領域をカスタマイズできます。
たとえば、<div>要素で囲ったコンテンツの幅を設定することができ、<img>要素には画像の幅と高さを指定できます。
マージンとパディング
ブロック要素にはマージンとパディングと呼ばれる空白スペースを追加できます。
マージンは要素の外側の空間を調整し、パディングは要素の内側の空間を調整します。
これらのプロパティを使用することで、コンテンツの配置やスタイリングを微調整できます。
余白を使うことで、情報がみやすくなって、より伝わりやすくなります。
余白については、以下の書籍も参考にしています。
こちらはDTPデザインがメインですが、余白の重要性がよくわかり、勉強になります。
バックグラウンド設定
ブロック要素には背景を設定するためのCSSプロパティがあります。
これにより、セクションやコンテナに背景色、背景画像、背景の位置などを指定できます。
背景を設定することで、、視覚的なインパクトや印象づけを行うことができます。
ブロック要素のタグ例
ブロック要素のタグの例としては、主に以下のタグがあります。
| <div> | コンテンツのグループ化 |
| <p> | 段落 |
| <h1>〜<h6> | 見出し |
| <ul> | リスト |
| <ol> | 番号付きリスト |
| <list> | リスト項目 |
| <table> | 表 |
| <form> | フォーム |
<div>（Division）
<div>要素はコンテンツをグループ化し、スタイリングを適用するために、とてもよく使われるブロック要素です。
特定のセクションやコンテンツを囲むために使用され、幅と高さを調整できます。
<div class="container">...</div><p>（Paragraph）
<p>要素は段落を表現します。
通常、本文内でテキストの段落を区切るために使用されます。
<p></p> のあとは改行されます。
<p>これは段落のテキストです。</p><h1>から<h6>（Headings）
見出し要素は大見出し<h1>から順に細かくつけることができます。
<h1>が最も高い重要度で、<h6>が最も低い重要度です。
順序が逆になったりするのはSEO観点からみてあまり好ましくありません。
また、<h1>に関しては、ページ内に１つだけ使用します。
<h1>最も重要な見出し</h1>
<h2>h1の項目の見出し</h2>
<h3>h2の項目の見出し</h3>
<h3>h2の項目の見出し</h3>
<h2>h1の項目の見出し</h2>
・
・
・<ul>（Unordered List）
<ul>要素は順不同リスト（箇条書き）を作成します。
デフォルトでは箇条書きのような「・（ナカグロ )」が項目の前に出てきますが、変更することもできます。
<ul>
<li>項目1</li>
<li>項目2</li>
</ul><ol>（Ordered List）
<ol>要素は順序付きリスト（番号付きリスト）を作成します。
デフォルトでは番号が表示されます。
<ol>
<li>第1項目</li>
<li>第2項目</li>
</ol><li>（List Item）
<li>要素はリスト内の各項目を表現します。
<ul>や<ol>内で使用され、リスト項目を作成します。
<table>（Table）
<table>要素は表を作成します。
表の構造を定義し、データを行と列で配置します。
<tr>（行）や<td>（セル）などの要素と組み合わせて使用されます。
<table>
<tr>
<th>セル1</th>
<td>セル2</td>
</tr>
</table><form>（Form）
<form>要素はフォームを表現し、ユーザーの入力を受け付けるために使用されます。
フォーム要素には入力フィールドやボタンが含まれます。
<form>
<input type="text" placeholder="名前">
<input type="email" placeholder="メールアドレス">
<button>送信</button>
</form>独学に限界を感じている方は
スクールにお金を払うことに抵抗があって、独学でWEB制作にチャレンジしている方は、無料から始められるスクールで基礎を学んでみませんか？
