まず、htmlを習い初めはデザインを見て、タグを置いていくところから始まると思いますが、少し慣れてきたらcssも意識して書き進めてみましょう。

例えば、このようなデザインがあった時、

image

最初はhtmlから書き始めると思うのでこうなりがち。

  <body>
      <header>
          <!-- 内容 -->
      </header>
      <div>          
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
      </div>
  </body>

もちろん間違いではありません。

ですが、ここからデザインを当てようとすると、div1つ1つにclassを書かないと行けません。
手間ですよね。

そういう時は、まず1つだけ作成します。
そして、1つが完成したらコピペします。

まずはこの状態を作る。
image

  <body>
      <header>
          <!-- 内容 -->
      </header>
      <div class="wrapper">          
          <div class="box">1</div>
      </div>
  </body>

その後初めてコピペをする

  <body>
      <header>
          <!-- 内容 -->
      </header>
      <div class="wrapper">
          <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">3</div>
          <div class="box">4</div>
          <div class="box">5</div>
          <div class="box">6</div>
      </div>
  </body>

このような手順を踏むことで手間が減るのと同時に、無駄にコードを書いたり消したりして、訳がわからなくなるのを防ぐことができます。

初めうちは、ダグの消し忘れとかで悩むことも多いと思うので。

今回は要素が1~6なで単純でしたが、これがこのようなデザインだとちょっと大変に感じますよね。

image

実際に仕事をしていると、JavaScriptとかも入ってくるので、もっとややこしくなりますが、この考え方はよく使う(ほぼ無意識)ので、是非意識して取り組んでください!