マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
新人デザイナーの虎澤です。

前回の記事を書いてからおよそ3ヶ月が経とうとしています。
春を題材に書かせていただきましたが、早いものでもう6月…梅雨の季節となってしまいました。
私は来月には三十路を迎えてしまいます。
20代のうちにやり残したことを…とかよく言いますけど、特にこれといってないんですよね。
もっと飲みに出かけたい！！と、四六時中こればかりです。
……切実です……。

閑話休題。
前回のお題の続きに参りたいと思います。

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

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

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

コーダーさんによって要素に調整をかける順番などは違ってくると思いますが、
今回は私が実際に作業をしていく際の手順に沿ってご説明させていただきます。
非常にざっくりとですが、手順を下記のようにまとめてみました。

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

それでは、ひとつひとつ順を追って説明していきましょう。

①メイン要素となる<div class=”inner_box”>の調整
■サンプルコード（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{
　visibility: hidden;
}
#container .inner_box{
　width: 305px;
　margin: 0 auto;
　background: url(../img/spring_box_bottom.gif) no-repeat left bottom;
　position: relative;
}
#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;
}

■サンプルページ
※メイン要素以外の画像に関してですが、この段階では邪魔なので、visibility: hidden;を指定して非表示にしています。

さて、サンプルCSSコード内の太字部分が、今回調整を加えた部分の中で重要なポイントとなります。
前回の記事では、テキストが入るBOX、つまり<div class=”inner_box”>には画像を設定すると説明させていただきました。

■サンプルイメージ

こんな感じに上下に分けます。

これがHTMLコード上では
画像6＝<div class=”inner_top”>
画像7＝<div class=”inner_box”>
と考えることができます。

要素の位置を調整するために使うCSSは色々ありますが、
私がよく使用するのは、
親要素へのposition: relative;
子要素へのposition: absolute;
です。

position: absolute;は絶対位置の指定ができますが、
これが指定されている親要素にposition: relative;が指定されていると、なんとその親要素の位置を基準として数値を絶対指定できるんですねー。

実はこれすごく便利なんです。
例えば、親要素内の右下はじっこに要素を配置したいときは、
position: absolute;
right: 0;
bottom: 0;
とすれば簡単にできちゃいます。

<div class=”inner_box”>に対してposition: relative;を指定し、
<div class=”inner_top”>に対してposition: absolute;と細かい位置を指定します。
これにより、うまく要素の位置を調整することができました。

ちょっと話が逸れますが、前回の記事の文末にて書いた通り、BOXを上下二つに分ける理由についても併せて解説いたします。

普通だと、「別に上下で画像分ける必要なくない？」って思われるのではないでしょうか。
そうです。別に分ける必要はないのです。
では、なぜわざわざそんな面倒くさいことをするのかというと…。

今、<div class=”inner_box”>にあるテキスト。
これ、必ずしもこの文字数だったり、このテキストスタイルだったりするわけではありません。
テキストじゃなく別の画像が入ったりするかもしれません。
仮に、文字数がもっと増えたとしたらどうなるでしょうか？

画像を上下に分けない状態にして、実際にやってみます。

■サンプルページ
文字がBOXからはみ出てしまいました。 （見やすくするために文字は黒に変えています。）

じゃあ、予め文字数に合わせた画像を作っておけばいいんじゃない？
と思うかもしれませんが、先に述べたように、いつメンテナンスがあるかわかりません。
文字数が変わったり、中身が変わるたびに画像を用意していたのでは非常に効率が悪いですよね。

そこで登場するのが、この上下に分けた画像なのです。

画像6＝<div class=”inner_top”>＝フタ
画像7＝<div class=”inner_box”>＝容器
容器にはどんなながーいものが入ってきてもいいように、ながーい画像を作っておき、
切り分けておいたフタ用の画像でフタをする、というイメージです。

■サンプルページ
綺麗に収まりました！

さて、メイン要素の調整が完了したところで、次の②<div class=”img img1″>などの、メイン要素に重なる要素の調整に入ります！
…と言いたいところですが、まだまだ長くなりそうですのでこれはまた次回に。

今回も長々とお付合いいただきありがとうございました。
また約3ヶ月後となってしまいそうですが…もしよろしければ、次回をお楽しみに。笑
以上、虎澤がお送り致しました＾＾