いつも通りデザイン系のサイトを見てると、
"Fresh Examples of Web Design and Interfaces" という記事を見つけました。
綺麗だけど、コーディングが難しそうなデザイン。コーダーにとってドSなデザインです。
そしてtwitterでこんなことをつぶやいてみました。
そしたら、"ぜひ"いう声があったので、ノリでやってみました。
先ほどのサイトからデザインを選ぶことになったのですが、著作権的に問題があったので、先ほどのサイトからインスパイヤーしたデザインを自分で作ることにしました。
コーディングの方法は様々あります。
自分の中で以下のようなルールを設けました。
まず画像が必要そうな場所を、自分で設定したルールに合わせて、頭の中でコーディングします。
脳内コーディングで画像スライスの設計を立ててしまいす。
画像が必要そうな場所をポイントとして、脳内コーディングする。
"更新や拡張性を考慮"した画像の切り出し方になっています。
私がいつも使用しているHTMLとCSSを準備しました。
HTMLのバージョンはXHTML1.0 Strict。
私の場合は最初に全ての文章を流し込んで、ID,classを振り分けながらマークアップし、一度HTMLを完成させてから、CSSを組みますが、今回は分りやすいように段階的に進めます。
全体をピンクの帯が走り、その一部に草のモチーフがかかっていて、非常に複雑になっています。
また更新を考えた場合に、文字の量によりピンクの部分の高さを自由に変更できる必要があります。
本来HTMLを修正するだけで、ピンクの高さが自動で変わるようにコーディングをすべきですが、JS縛りがあるため最低限のCSSを修正で更新が可能なスタイルにします。
HTML
<body>
<div>
<div>
<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のdivで#lineの中を囲み、影とピンクの部分の草のモチーフを可変で入るように設定しました。
黒の背景とピンクの背景で草のモチーフの画像が合っているのは、#headerの背景画像をbottomに指定、#lineInrの背景画像することにより、ピンク部分のコンテンツ高さが増えても草のモチーフがずれない様にしているためです。
ただしこの場合、ブラウザの幅が998px以下になると背景画像の位置が違ってくるので、修正が必要になります。対応させようと思うとさらに複雑になるので、今回は遊びですし対応はしません。
ここまで組めました。
ナビゲーションのシャドウ部分は下になるほど薄くなっていますが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>
<div>
<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;
}
後編はコンテンツの中のコーディング、他のブラウザで検証していきます。