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

コードになるとどうなりますか?
はい!こんな感じです。

まずは二つのパーツに分けます。今回内房のコトのホームページのスクリンショットから
<header class=“header”></header>
<section class=“mainPic”></section>
が分けられます。
Headerはサイト頭の意味で、サイトマークとサイドバーが入っています。そしてmainPicはメインの写真の意味で、この場合ではバナーのことを指していますね。
大きな二つのボックスに分けた後に、小さいボックスに分けますね。
このスクリンショットならこんな感じになります。HEADERの中にあるものをdivとul(リスト)で分けます。こうすれば、分かりやすいし、デザインやスタイルを設定するときも簡単です。
そして、mainPicの中には文字しかないので、ここは文字そのまま入力します。
ボックス分けを習慣にしましょう!なぜかというと、自分が修正するときにも見やすいし、他のエンジニアが編集するときもゆっくり探すじゃなくて、すぐにでも問題の部分を編集できます。
それでは本日の講義は以上です!ご質問やご意見がございましたら、コメント欄によろしくお願いしますね!