マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

8月も半ばを過ぎ、夏もいよいよ終わりを迎えますね。
みなさんは充実した夏を過ごすことができましたでしょうか？
夏と言って私が思い浮かぶのは高校野球でしょうか。
高校時代、野球部のマネージャーをしていたこともあり、毎年少しは興味を持って情報を追いかけてます。
当時は勉強に部活にかなり充実し青春していた、いい高校生活だったと思います。…たぶん。

さて、前回のお題の続きに参りたいと思います。

☆実はかなりめんどくさい！？要素の重なったデザインのコーディング part3☆

前回、前々回に引き続き、要素が重なったデザインをコーディングするにはどうしたらいいのか？
こちらについて、お話させていただきたいと思います。

今回の記事に至るまでの詳しい経緯は前回及び前々回の記事をご参照ください。

前回の記事で、要素が重なったデザインをコーディングするときの手順を下記のようにざっくりとご紹介致しました。

①メイン要素となる<div class=”inner_box”>の調整
②<div class=”img img1″>などの、メイン要素に重なる要素の調整
③全体的な細かい調整

今回は、②及び③の作業についてご説明致します。

まず、前回までに完成したサンプルページがこちら。
画像以外の要素は完成しました。
最終的にサンプルイメージのような見た目をコーディングで再現することになります。

さて、見やすくするためにあえて画像を非表示にしていたので、ここでvisibility: hidden;を消して画像を表示させてみます。

■サンプルページ

もとのデザインと見比べると、キャラクターの位置がバラバラで、しかもキャラクターの一部がボックスの下に隠れてしまっているのがお分かりになるかと思います。

早速ですが、これらの要素の位置を調整するときのコードは以下のようになります。

■サンプルコード（HTML）

<div id="container">
  <div class="img img1"><img src="img/img1.png" alt="画像１・２"></div>
    <div class="inner_box">
      <div class="inner_top"></div>
      <div class="inner_cont">
        <div class="text">
          <p>サンプル文。画像文字じゃなくテキストになります。</p>
          <p>font-family:メイリオ font-size:14px<br>
          サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
          </p>
        </div>
	<div class="button">
          <a href="#">
            <img src="img/button.png" alt="画像３">
          </a>
	</div>
      </div>
    </div>
  <div class="img img2"><img src="img/img2.png" alt="画像４"></div>
</div>

■サンプルコード（CSS）
#container{
　width: 392px;
　height: 340px;
　margin: 50px auto 0;
　background: url(../img/spring_bg.gif) no-repeat left top;
}
#container .img{
　position: relative;
　z-index: 10;
}
#container .img.img1 img{
margin: 0 0 0 auto;
}
#container .img.img2 img{
margin: -73px auto 0 -20px;
}
#container .inner_box{
　width: 305px;
　margin: -40px auto 0;
　background: url(../img/spring_box_bottom.gif) no-repeat left bottom;
　position: relative;
　z-index: 1;
}
#container .inner_box .inner_top{
　width: 305px;
　height: 10px;
　background: url(../img/spring_box_top.gif) no-repeat left top;
　position: absolute;
　top: -10px;
　left: 0;
}
#container .inner_box .inner_cont{
　margin: 0 auto;
}
#container .inner_box .inner_cont .text{
　padding: 14px 20px;
　font-size: 14px;
　line-height: 1.5;
　color: #fff;
}
#container .inner_box .inner_cont .button{
　padding: 0 10px 10px 0;
　text-align: right;
}

■サンプルページ

今回の作業で重要な部分は太字になっています。
ポイントをざっくりまとめると…
①z-indexで要素の重なる順番を指定
②ネガティブマージンでの位置調整
となります。

①z-indexで要素の重なる順番を指定
調整前のコードだと、キャラクターがボックスの後ろに隠れてしまっていましたが、
調整が必要な要素に「position: relative」と「z-index: xx」を書くことで、要素の重なる順番を指定することができます。
たとえば、「z-index: 1」と「z-index: 10」と指定してある要素があるとき、「z-index: 10」と指定されている要素の方が順番が上になります。
この数字の数が大きければ大きいほど優先的に上になるということですね。
ちなみに、この「z-index: xx」を使うときは、必ず「position: relative」もセットで書きます。そうでないと動きません。

②ネガティブマージンでの位置調整
調整前と調整後のページを見比べていただければお分かりになると思いますが、
メイン要素が上に移動していたり、下部のキャラクターが左に移動していたり、位置が変わっています。
この位置の調整は、基本的にpositionかネガティブマージンで行うことが多いです。
ネガティブマージンというのは、marginプロパティにマイナスの値を指定したもののことをいいます。
サンプルコード内だと「margin: -73px auto 0 -20px;」などが該当します。
このCSSは、要素を上端から上に73px、左端から左に20px移動するよという意味になりますね。
ネガティブマージンでない（正数）場合は上端から下に73px、左端から右に20px移動するということになります。
このネガティブマージンを使用することで、例えば親BOXから要素をはみださせるということも可能になるわけです。

これらのposition系とネガティブマージンを抑えておけば、複雑なデザインのコーディング反映がぐっと早くなります。
ただ、position: absolute;はやや難敵なので、熟考せずにこれを多用すると崩れたり、あとはIEへの対応を考えておかなければならないので、十分な注意が必要ですね。

さて、ここまでの調整が終われば、あとは数ピクセル単位の位置の調整を残すのみです。
既にご説明したネガティブマージンの値や、paddingなどを利用して最終調整をします。

結果出来上がったページがこちら。

デザインの再現ができているのではないでしょうか！
テキストに関しては、文字間など完璧に再現するのは難しいこともあるので、それを加味した位置の調整が必要かと思います。

いかがでしたでしょうか。
要素が重なったデザイン、デザインするときは簡単にできても、コーディングするときってかなりめんどくさいですよね。
いつだかの記事でも書きましたが、デザインもコーディングも担当することが多い私にとっては、
コーディングするときのことを考えてデザインができるようになるのが理想だと思っています。
デザインしてから、「あ、これコーディング超めんどくさい…」と思うことも多々あるので、うまくバランスのとれたデザイニングができるようにより一層励んでいきたいですね。

全3回、季節を跨いで長々とお付合いくださり、ありがとうございました。
よろしければ、また次回をお楽しみに♪
以上、虎澤がお送り致しました！