コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)

Published: 2011-01-02

いつも通りデザイン系のサイトを見てると、
"Fresh Examples of Web Design and Interfaces" という記事を見つけました。
綺麗だけど、コーディングが難しそうなデザイン。コーダーにとってドSなデザインです。

そしてtwitterでこんなことをつぶやいてみました。

さっきのドSなデザインの中から、1つ選んでコーディングの段階をブログに載せたら、面白いかな？w

そしたら、"ぜひ"いう声があったので、ノリでやってみました。

実際にやってみるにあたり。

先ほどのサイトからデザインを選ぶことになったのですが、著作権的に問題があったので、先ほどのサイトからインスパイヤーしたデザインを自分で作ることにしました。

こんなんにした。

コーディングする前に

コーディングの方法は様々あります。
自分の中で以下のようなルールを設けました。

ブラウザの対応はIE6-8, 最新モダンブラウザ
HTML, CSSのみ。JSに頼らない
全ての文字はテキスト
更新や拡張性を考慮(基本的に可変できる)

スライス!の前の脳内コーディング

まず画像が必要そうな場所を、自分で設定したルールに合わせて、頭の中でコーディングします。
脳内コーディングで画像スライスの設計を立ててしまいす。

画像が必要そうな場所をポイントとして、脳内コーディングする。

ザラついた背景
草のモチーフが透かし
影の部分全て
アイコン
不透明な部分
ドロップキャップ
角丸

スライス

"更新や拡張性を考慮"した画像の切り出し方になっています。

HTMLとCSSを準備と説明

私がいつも使用しているHTMLとCSSを準備しました。
HTMLのバージョンはXHTML1.0 Strict。

CSSは以下のようにCSSリセットをきかせてます。

私の場合は最初に全ての文章を流し込んで、ID,classを振り分けながらマークアップし、一度HTMLを完成させてから、CSSを組みますが、今回は分りやすいように段階的に進めます。

全体、上部を作る。

全体をピンクの帯が走り、その一部に草のモチーフがかかっていて、非常に複雑になっています。
また更新を考えた場合に、文字の量によりピンクの部分の高さを自由に変更できる必要があります。
本来HTMLを修正するだけで、ピンクの高さが自動で変わるようにコーディングをすべきですが、JS縛りがあるため最低限のCSSを修正で更新が可能なスタイルにします。

HTML

<body>
<div id="header">
<div id="hgroup">
<h1><a href="" title="Home">Sadistic-Layout</a></h1>
<p>Web Design for HTML & CSS</p>
</div><!-- #hgroup -->

<div id="line">
<p>コーディングしにくそうな<br />
デザインをあえて作り、<br />
それに挑戦するという企画です。</p>
<a href="">More</a>
</div><!-- #line -->
</div><!-- #header -->

</body>

CSS

html,body {
       margin:0;
        padding:0;
        font-size:14px;
        font-family:Georgia, 'Times New Roman', serif;
}

/* headerとか */
body {
  background:url(../img/bg-bk.jpg);
}

#header {
  background:url(../img/leaf-bk.jpg) 50% 100% no-repeat;
  padding:60px 0 0;
}

#hgroup {
  width:960px;
  margin:0 auto;
}
#hgroup h1 a {
  font-size:285%;
  font-weight:400;
  color:#fff;
  letter-spacing:0;
  text-decoration:none;
}
#hgroup p {
  color:#9d9d9d;
  letter-spacing:.1em;
  margin:5px 0 50px;
}

#line {
  background:url(../img/bg-pk.jpg);
  border-bottom:1px solid #ffa2b6;
}

ここまで書いた時点でこのようになりました。

ピンクの帯も完成させます。

HTML

CSS

HTMLのdivで#lineの中を囲み、影とピンクの部分の草のモチーフを可変で入るように設定しました。
黒の背景とピンクの背景で草のモチーフの画像が合っているのは、#headerの背景画像をbottomに指定、#lineInrの背景画像することにより、ピンク部分のコンテンツ高さが増えても草のモチーフがずれない様にしているためです。

ただしこの場合、ブラウザの幅が998px以下になると背景画像の位置が違ってくるので、修正が必要になります。対応させようと思うとさらに複雑になるので、今回は遊びですし対応はしません。

ナビとコンテンツの部分を作ります。

ここはよくある組み方に近いので、一気に作ります。ただし私の場合はHTMLの構造をヘッダー、コンテンツ、ナビげーション、フッターの順番で作ることが多いのですが、今回のデザインに関しては今後、調整が面倒臭くなるので、ヘッダー、ナビゲーション、コンテンツ、フッターの順にします。またナビゲーションはulを使用するとdivの数が増えるので、dlでマークアップしてみました。

HTML

CSS

ここまで組めました。
ナビゲーションのシャドウ部分は下になるほど薄くなっていますがdivを入れ子にして実装しています。
さらに"More"という表記は上部のピンクの所と同様ですので、クラスでまとめました。

ピンクの帯(#line)の上部とにコンテンツ(#content)の上部を合わせる必要があります。
positionを使用する方法も考えましたが、草のモチーフの関連性やIEでややこしくなりそうですので、マイナスマージンで飛ばすことにしました。JavaScriptが使用できればピンク帯の高さを算出し、マイナスマージンで飛ばす距離を当て込むことができますが、ルール上JavaScriptは使用できませんので、ピンクの帯の高さを指定し、その分マイナスマージンで飛ばすことにします。
テキストが多く入る場合は手動で高さを変更する必要がありますが、考えた結果、この方法がこの方法が一番更新しやすい手段かと思います。

CSS

#line #lineInr {
  width:220px;
  height:105px;
  padding:20px 10px 0;
  background:url(../img/leaf-hpk.jpg) 0 100% no-repeat;
  font-family:Arial,helvetica,"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  letter-spacing:.05em;
  line-height:1.4em;
  color:#fff;
}

#content {
  float:left;
  width:720px;
  margin:-126px 0 0; /* #headerのborder+#lineInrのpading+height */
  background:#fff;
}

大まかなレイアウトが完成しました。
前編はここまでです。
途中経過のソースは以下の通りです。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<title>難しそうなレイアウトを組んでみた。</title>
<link href="css/sadistic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="hgroup">
<h1><a href="#" title="Home">Sadistic-Layout</a></h1>
<p>Web Design for HTML & CSS</p>
</div><!-- #hgroup -->

<div id="line">
<div class="lv1">
<div class="lv2">
<div id="lineInr">
<p>コーディングしにくそうな<br />
デザインをあえて作り、<br />
それに挑戦するという企画です。</p>
<a href="#" class="sideLink">More</a>
</div><!-- #lineInr -->
</div><!-- .lv2 -->
</div><!-- .lv1 -->
</div><!-- #line -->
</div><!-- #header -->

<div id="am0648">
<div id="nav">
<div id="navInr">
<dl class="navSec">
<dt>navigation</dt>
<dd class="firstChild"><a href="#">Home</a></dd>
<dd><a href="#">Information</a></dd>
<dd><a href="#">(X)HTML</a></dd>
<dd><a href="#">CSS</a></dd>
<dd><a href="#">About</a></dd>
</dl>

<dl class="navSec">
<dt>Links</dt>
<dd class="firstChild"><a href="#">W3C</a></dd>
<dd><a href="#">Fire Fox</a></dd>
<dd><a href="#">Opera</a></dd>
<dd><a href="#">WordPress</a></dd>
<dd><a href="#">MovableType</a></dd>
</dl>
<div class="am0720">
<a href="#" class="sideLink">More</a>
</div>
</div><!-- #navInr -->
</div><!-- #nav -->

<div id="content">
<img src="img/woman.jpg" width="680" height="262" alt="" />

</div><!-- #content -->

</div><!-- #am0648 -->
</body>
</html>

CSS

@charset "UTF-8";

/* ReCSS */
html,body {
  margin:0;
  padding:0;
  font-size:14px;
  font-family:Georgia, 'Times New Roman', serif;
}

h1,h2,h3,h4,h5,h6,li,dl,dt,dd,address {
  margin:0;
  padding:0;
  font-size:100%;
  font-style:normal;
}
img {
  border:none;
}
a {
  outline:none;
}
ol,ul {
  margin:0;
  padding:0 0 1em 1.8em;
}
li,dl,dt,dd {
  margin:0;
  padding:0;
}
p {
  margin:0 0 1em;
  padding:0;
}

.clearfix:after {
  content:".";
  height:0;
  display:block;
  visibility:hidden;
  clear:both;
}
.clearfix {
  display:inline-block;
  *height:1%;
  min-height:1%;
  zoom:1;
}

/* headerとか */
body {
  background:url(../img/bg-bk.jpg);
}

#header {
  background:url(../img/leaf-bk.jpg) 50% 100% no-repeat;
  padding:60px 0 0;
  border-bottom:1px solid #ffa2b6;
}

#hgroup {
  width:960px;
  margin:0 auto;
}
#hgroup h1 a {
  font-size:285%;
  font-weight:400;
  color:#fff;
  letter-spacing:0;
  text-decoration:none;
}
#hgroup p {
  color:#9d9d9d;
  letter-spacing:.1em;
  margin:5px 0 50px;
}

#line {
  background:url(../img/bg-pk.jpg);
}

#line .lv1 {
  width:998px;
  margin:0 auto;
  background:url(../img/shd-l-pk.jpg) 0 0 repeat-y;
}
#line .lv2 {
  padding:0 19px;
  background:url(../img/shd-r-pk.jpg) 100% 0 repeat-y;
}
#line #lineInr {
  width:220px;
  height:105px;
  padding:20px 10px 0;
  background:url(../img/leaf-hpk.jpg) 0 100% no-repeat;
  font-family:Arial,helvetica,"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  letter-spacing:.05em;
  line-height:1.4em;
  color:#fff;
}
.sideLink {
  padding:2px 0 2px 15px;
  background:url(../img/icon-white.gif) 0 50% no-repeat;
  font-size:85%;
  color:#fff;
}



/* nav & content */
#am0648 {
  width:998px;
  margin:0 auto;
}
#nav {
  float:left;
  width:259px;
  background:url(../img/shd-l-bk.jpg) 0 0 repeat-y;
}
#navInr {
  padding:0 0 0 19px;
  background:url(../img/shd-b-bk.jpg) 0 100% no-repeat;
}
.navSec {
  margin:0 0 40px;
}
.navSec dt {
  padding:5px 10px;
  margin:0 0 6px;
  background:url(../img/bk-nav.jpg) 0 0 repeat-y;
  font-weight:700;
  text-transform:capitalize;
}
.navSec dd {
  padding:12px 0;
  margin:0 16px 0 10px;
  border-top:1px solid #555;
  font-size:85%;
}
.navSec dd.firstChild {
  border-top:none;
}
.navSec dd a {
  color:#e3d8bb;
}
.am0720 {
  padding:10px 0 30px;
  margin:0 16px 0 10px;
  border-top:1px solid #555;
}


#content {
  float:left;
  width:720px;
  margin:-126px 0 0;
  background:#fff;
}

後編はコンテンツの中のコーディング、他のブラウザで検証していきます。

後編の記事を書きました！