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