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

突然ですが、私の好きな問答をひとつご紹介いたします。

「雪が溶けたら、何になりますか？」

↑問いはこれです。
答えは何だと思いますか？

普通は「水でしょ」って思いますよね。
ところが、ある人はこう答えました。

「雪が溶けたら、春になりますね」

素敵ですよね。
こんな返しができるような素敵な人間になりたいものです。（笑）

そんなわけで、やってきましたね、春。
あれだけ寒かったのが嘘のように、温かさを肌で感じられる日も多くなりました。
桜が咲くのが待ち遠しい今日この頃。
青空の下でのんびりお花見したいなぁなんて思います。

さて、閑話休題。
今回のお題に参りたいと思います。

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

前回の記事に引き続き、デザイン＋コーディングにまつわるお話をさせていただこうかと思います。
今回はちょっとややこしく、長くなりそうなので2、3回に分けて記事を書かせていただきます。
よろしければ是非最後までお付き合いください。

さて、今回は以下のような画像をご用意いたしました。

□サンプルイメージ１

とりあえず一枚の画像になっていますが、これ、厄介なことに中のテキストが画像ではないんですね。

となると、このデザインをコーディングするときはどうなるのでしょうか。
私の場合、まずどの要素が画像になるのかを大雑把に決めます。
このデザインの場合、画像となるものは以下のように分けます。

□サンプルイメージ２

ざっと分けても5つ。うーん、多いですね。

ところが、実はこれだけではありません。
テキストが入るbox、これも画像にします。

□サンプルイメージ３

しかも１枚の画像ではありません。
上と下の２つに分けます。

本来、角丸でなければdivタグなどに背景色をつければ簡単にできます。
角丸自体もCSSでできますが、一部対応していないブラウザもあるので汎用的ではありません。
多くの場合、コーダーとしては角丸boxは画像でつくることが多いのが現状です。

では、なぜ上下の2つにわけるのか？
これは後ほど詳しくご説明いたします。

さて、大まかに画像となる部分をわけたところで、もう一度内容を見直します。
画像１と画像２はセットで一つの画像でいけるかなとか、画像５は背景として敷けばいいかなとか、内容を詰めていきます。
例えば、以下のような感じ。

・画像１と２→img1.png
・画像３→img2.png
・画像４→button.png
・画像５→spring_bg.gif

この時、各画像の名前や、透過が必要か、そうでないかも決め、拡張子も決めます。
決めたら、それぞれの画像を元データから切り出します。

□img1.png

□img2.png

□button.png

□spring_bg.gif

□spring_box_top.gif

□spring_box_bottom.gif

これでデザインを再現するのに必要な画像が一通り揃いました。

さて、次はいよいよコーディングです。
とりあえず、骨組みと必要最低限のCSSは以下の通り。

□サンプルコード

<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>

#container{
	width: 392px;
	height: 340px;
	margin: 50px auto 0;
	background: url(../img/spring_bg.gif) no-repeat left top;
}
#container .inner_box{
	background: url(../img/spring_box_bottom.gif) no-repeat left bottom;
}
#container .inner_box .inner_top{
	background: url(../img/spring_box_top.gif) no-repeat left top;
}
#container .inner_box .inner_cont .text{
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}
#container .inner_box .inner_cont .button{
	text-align: right;
}

□サンプルページ

今回はサンプルページもご用意してみました。わかりやすくなりましたでしょうか。

これ、私がこのデザインをコーディングした場合ですので、コーダーさんによっては画像の入れる位置などが違ったりするかもしれません。
ほんの一例としてご覧いただければと思います。

さて、サンプルページをご覧いただければお分かりになると思いますが、
必要な要素は揃ってますが、てんでバラバラですよね。
さぁ、これからが大変。
CSSの出番です。

このまま続けてご説明したいところですが、まだまだ長くなりそうですので、続きはまた次回に。
boxを上下2つに分けた理由も次回に説明させていただきたいと思います。

今回も長々とお付き合いいただきありがとうございました。
よろしければ、次回をお楽しみに。
以上、虎澤がお送りいたしました＾＾