HTML/CSS PROGRAM

スタイルシート(CSS)を使ってレイアウトを組んでみよう~header、aside、article、footerの使い方

header、article、footerを使って、画面を三分割する

まず、headerタグ、articleタグ、footerタグを使って、画面を三分割してみましょう。
特に問題なく、三分割できると思います。

htmlcss1-1

header、aside、article、footerを使って、画面を四分割する

次にasideタグを追加して、画面を四分割してみます。

htmlcss1-2

asideとarticleを横並びにするために、スタイルシートのasideタグとartcleタグにfloatプロパティを使用します。
そして、footerタグにclearプロパティを使ってfloatを解除します
floatプロパティを使用しないと、articleがasideの下に表示され、clearプロパティを使用しないと、footerがasideとarticleの中にもぐってしまいます。
floatプロパティとclearプロパティは、色々と試してみて、どのように表示されるかを確認することをお勧めします。

articleの中にボックスを追加する

更に、articleの中にボックスを入れてみましょう。

articleタグの中にdivタグを使って、boxというクラスを呼び出します。
boxクラスはarticleに対して、縦横80%のサイズにしています。
また、「margin: 2% auto;」とすることによって、boxの位置を上下のマージンを2%、左右を中央にしています。

articleの中にボックスを2つ追加する

今度は、以下の図のように、articleの中にボックスを2つ入れてみましょう。

articleの中にボックスを2つ並べるために、articleの中にdivタグを使って、containerというクラスを用意します。
containerクラスは、2つのボックスを収容する領域です。
ボックスを入れる前のイメージは、下図の白い部分になります。
containerの中にbox1とbox2を横並びで入れるために、それぞれfloatプロパティを使っています。

articleの中にボックスを4つ追加する

最後に、articleの中にボックスを4つ入れてみましょう。

htmlcss1-5

-HTML/CSS, PROGRAM
-, ,