「自分でホームページを作りたい！」と、思っている方々向けの連載記事の第2回。
今回は、「ブロック要素のレイアウト」をお届けします。
「h1」「div」「p」「ul」などをはじめとした「ブロック要素」を左寄せ・中央寄せ・右寄せさせたい時はどうするのか？ブロック要素のサイズを変えたい時はどうするのか？
やっていきましょう。
広告
ブロック要素の配置は基本「左寄せ」
ブロック要素は特に何も指定していなければ、左寄せになります。
第1回の記事でも紹介しましたが、ブロック要素は親の幅いっぱいに広がる性質がある為、ちょっと分かりにくいのですが、幅を縮めてあげると、よく分かります。
ブロック要素のサイズ変更はスタイルシート（css）で。
ブロック要素のサイズを変えたい時はスタイルシート（css）で「width」を指示すると、そのサイズになってくれます。
上の例では、ブロック要素に対してスタイルシート（css）で「width」を指示する事でサイズが変わり、結果、左寄せである事も分かりました。
ブロック要素の中央寄せ
スタイルシート（css）により下記の指示をする事でブロック要素が中央寄せになります。
- 「width」により、幅を変える
- 「margin-left」「margin-right」に「auto」を指定する
ブロック要素の右寄せ
スタイルシート（css）により下記の指示をする事でブロック要素が右寄せになります。
- 「width」により、幅を変える
- 「margin-left」に「auto」を指定する
幅の狭いブロック要素同士はどう並ぶ？
では、幅の狭いブロック要素を連続で配置すると、どうなるのでしょうか？
例えば、幅が30%のブロックが3つ続いてあったらどうでしょう？
こんな感じで並びそうですよね…
実際は↓の通りです。
↑の通り、いくら幅が狭くても、連続したブロック要素同士は縦に並びます！
え…
じゃあ、要素を横に並べたい時ってどうするの？
っていう疑問が出てきますが、これは次回やりたいと思います。
ここまでご覧いただき、ありがとうございました。
