KOJIKA17

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

タイトル通り、"コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)" の後編です。
今回はクロスブラウザ(IE、FireFox、Webkit系とか)に対応させるために、ちょっとだけテクニック的な事も使っていきます。

最後に完成したページをzipで公開しています。
ダウンロードして煮るなり、焼くなりしてくれると良いよ!

おさらい

前回、下記のデザインを組んでいくことにしました。

そして前回はここまでコーディングが終わりました。

今回はコンテンツとクロスブラウザに対応させます。

コンテンツのメイン画像部分を何とかする。

これを何とかしていきます。
ポイントは"シャドウ"と"文字部分の不透明"。

HTML

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

<p id="imgCap"><strong>Beautiful Woman</strong><br />
Photographer: Michal Marcol</p>
</div><!-- #mainImg -->

CSS

Preview

シャドウはimgに直接background指定しています。
そうすることにより、HTMLの記述量やCSSのバグや修正の対応を行いやすいためです。

そして不透明部分ですが "position" と "透過PNG" を使用してします。
positionで画像の上に、文字を載せています。
そしてあらかじめ作成しておいた透過PNGの「不透明の白の画像」を背景指定しています。
ただしIE6では透過PNGがきちんと表示されません。
そこで「* html」でIE6用のハックを行い、IEの独自機能filterのAlphaImageLoaderを使用し、透過PNGが表示されるように指定しています。

黒い角丸部分を何とかする。

黒い背景部分は全て角が丸くなっており、画像の右下の隅までもが角が丸くなっています。
人の写真と角丸部分を一緒にスライスして組んでしまうのは簡単ですが、更新になった場合に一々画像を作り直さなければなりません。
そこで人の画像を差し替える時にリサイズのみで変更でき、文字の量の増減にも対応できるようにします。

まずは角丸を作ります。

HTML

<div id="content">

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

<p id="imgCap"><strong>Beautiful Woman</strong><br />
Photographer: Michal Marcol</p>
</div><!-- #mainImg -->

<div class="article">
<h2>What's Sadistic Layout</h2>

<div class="round">
<div class="lv1">
<div class="lv2">

<p>dummy text.<br />
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>

<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. <a href="#">"What's happened to me? "</a> he thought. It wasn't a dream.</p>

<p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. </p>

</div><!-- .lv2 -->
</div><!-- .lv1 -->
</div><!-- .round -->

</div><!-- .article -->

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

CSS

.article {
  margin:20px 0 40px;
}
.article h2 {
  position:relative;
  z-index:2;
  padding:4px 10px;
  margin:0 20px 20px;
  background:url(../img/bg-pk.jpg);
  font-size:120%;
  font-weight:400;
  color:#fff;
}

.round {
  width:689px;
  margin:0 0 0 20px;
  background:url(../img/round-m.png) 0 0 repeat-y;
  color:#fff;
}
.round .lv1 {
  background:url(../img/round-t.png) 100% 0 no-repeat;
}
.round .lv2 {
  background:url(../img/round-b.png) 0 100% no-repeat;
  padding:0 0 5px;
}
.round a {
  color:#9dcedf;
}

Preview

角丸ができました。
そして画像を組み込み、スクリプト体の画像を流し込みます。

HTML

CSS

Preview

画像部分には人物の写真とマスク画像の2つをHTMLに流し込んでいます。
HTML上、不要な画像が入るのであまりよろしくありませんが、更新する上で簡単になります。

ドロップキャップ(スクリプト体)の部分はCSS Spriteというテクニックを使用しています。
今回はa~dまでの文字を用意させて頂きました。
HTMLの<span class="dropCap d">の"d"の部分をa,b,cなどに変更すると、そのスクリプト体が表示されるようにしています。

そして画像は透過PNGを使おうとしましたが、IE6で表示できずAlphaImageLoaderはCSS Spriteに向かないのでgifで作成しました。
ただしそのままgifで書き出すと、アンチエイリアスがかからずにギザギザが目立ってしまいます。
そこでPhotoshopでのWeb用に書き出しの際に「マット」を指定してやりました。

背景色に近いマットを指定してやると、アンチエイリアスのかかっている様な綺麗な透過画像にすることができます。

レイアウトの一番下のシャドウを作る。

今回は影が徐々に薄くなっていきますが、この辺りは角丸などと同様な組み方です。
ただし文字量が違うのに対し、「Read More」の表記の位置は揃っています。
このレイアウトを再現させるために影を2つ並べて、そのまま上部、中部、下部とスライスしました。

HTML

CSS

Preview

Read Moreの表記部分はpositionで指定しました。
そのせいかclearfixの動作がおかしかったので、hrにclear:bothを指定して対応しました。

フッターを組む

解説なしでサクっと組みます。

HTML

<div id="footer">
<address>Copyright © 2010 - kojika17.com - All rights reserved</address>
</div>

CSS

/* footer */
#footer {
  clear:both;
  padding:20px 0;
}
#footer address {
  width:960px;
  margin:0 auto;
  padding:8px;
  background:#000;
  font-size:75%;
  color:#b4b4b4;
  text-align:center;
}

複数のブラウザに対応させます。

対応させるブラウザ

  • Internet Explorer6, 7, 8
  • Fire Fox
  • Safari
  • Google Chrome
  • Opera

IE以外の全てのブラウザは問題ありませんでした。
HTMLにcontent="IE=emulateIE7"を記載しているので、IE6とIE8の2つの表示を確認するだけで基本的に大丈夫です。


左がIE6, 右がIE8。
IEで確認するとそれぞれ他のブラウザと挙動が違うことが確認できます。

修正必要な箇所

  • IE6でピンクの帯が見えてしまっている。
  • IE6で黒背景角丸の右上の位置がズレてる。
  • IE6で黒背景角丸の先頭の文章がなくなっている。
  • IE6, 8で一番下のシャドウ部分が表示されない。

上記の問題箇所が見つかったため、HTMLやCSSを修正しました。
修正した内容を簡単に記載します。

  • position:relativeとz-indexを指定し、白い背景が出るようにしました。
  • p.firstChildのmargin-topを0に指定。
  • CSS Spriteを行っている箇所に、display:blockを指定。
  • 影部分を分離。高さはmin-heightで指定し、「Read More」の高さを固定。

修正後の表示です。

最終的な画像の切り出しが変わっていたり、細かい内容を省いてるところもありますが、参考になったらと思います。
次はこのレイアウトでHTML5, CSS3で組んでみるかもね!

使用したソフト
  • Photoshop
  • Opera(主要確認ブラウザ)
  • FireFox(キャプチャ・確認)
  • Safari(確認)
  • Google Chrome(確認)
  • Microsoft Expression web 3 SuperPreview(確認)