プログラミング記事:第二回 わかりやすくHTMLのボックスを分けましょう!

Youkoso Nisoのプログラミング記事2!前回は見方について説明しましたが、今回は実際コードするときはどうなるかを説明していこうと思います。それではよろしくお願いします。

 

前回のあらすじ:上記のようにボックスとして認識してくださいということです。

コードになるとどうなりますか?

はい!こんな感じです。

まずは二つのパーツに分けます。今回内房のコトのホームページのスクリンショットから
<header class=“header”></header>
<section class=“mainPic”></section>

が分けられます。

Headerはサイト頭の意味で、サイトマークとサイドバーが入っています。そしてmainPicはメインの写真の意味で、この場合ではバナーのことを指していますね。

大きな二つのボックスに分けた後に、小さいボックスに分けますね。

このスクリンショットならこんな感じになります。HEADERの中にあるものをdivとul(リスト)で分けます。こうすれば、分かりやすいし、デザインやスタイルを設定するときも簡単です。
そして、mainPicの中には文字しかないので、ここは文字そのまま入力します。

ボックス分けを習慣にしましょう!なぜかというと、自分が修正するときにも見やすいし、他のエンジニアが編集するときもゆっくり探すじゃなくて、すぐにでも問題の部分を編集できます。

それでは本日の講義は以上です!ご質問やご意見がございましたら、コメント欄によろしくお願いしますね!