07design.blog

RSS
Home » codetips, topics

CSSで実現するグリッドに捕われない雑誌風デザイン

2010年 6月 2日 水曜日

CSSで実現するグリッドに捕われない雑誌風デザイン
仕事の現場で、たまに紙媒体のデザイナーに関わる機会があると、発想の違いに驚くことが多々あります。
私はもともとwebからデザインを始めたので、ラフデザインの段階ですでに構造的な配置の仕方を心がけているのですが、
そのせいで視覚的効果にダイナミックさが足りない、グリッドに捕われたデザインになっていることに気づきました。
絶対的配置で自由にレイアウトできる紙媒体とは違い、webにはもともとの制約・環境による差異・コーディングによる配置の難しさなどがあり、どうしても視覚効果によるアピールは紙に劣ってしまうのかな、と思います。

そんな中でもCSSを使って雑誌風の装飾を実現することができます。
その中から今回は3点ほど、テクニックをご紹介します。

デザインラフを作る


↑デザインラフ。これをもとにコーディングしていきます。

コーディング


↑htmlのみコーディングした状態

<div class="block">
<div class"box">
<img src="photo.png" alt="極・エスプレッソ" class="mainImg" />
<div class="entry">
<div class="entry_box">
<span class="vol">VOL<span class="number">01</span></span>
<span class="date">31.MAY.2010</span>
</div>
</div>
<h2><img src="h2.png" alt="じっくりと仕上げた、極上の一杯。" /></h2>
<p>美味しいコーヒー屋さんのコーヒーはいくらでもあるが、こんなにこだわった美味しい「缶コーヒー」がいまだかつてあっただろうか。2010年6月1日、(株)○×飲料から発売される缶コーヒー飲料、「極・エスプレッソ」は缶コーヒーの常識を超えた、まったく新しい缶コーヒーだ。朝、自動販売機で120円で買える缶コーヒー。こんなにも贅沢な味わいがこんなに手軽に楽しめて、良いのだろうか・・・。
</p>
</div>
</div>


↑スタンダードにCSSコーディングした状態

.block{
background:url(bg1.jpg) no-repeat;
width:600px;
height:309px;
margin-top:30px;
padding-top:30px;
}
.box{
border:1px solid #000;
width:525px;
margin:auto;
background:#fff;
padding:10px;
}
p{
color:#595858;
font-size:77%;
}
/*mainImg*/
.mainImg{
float:right;
}

ボックスから画像をはみ出させる

/* mainImg */
.mainImg{
float:right;
margin:-35px -40px 0 10px;
position:relative;
}

ネガティブマージンを使って画像をボックスからはみ出させます。
IEでは親要素のborderより外側が非表示になるため、position:relative;を指定します。

日付の見出しを装飾する

/* entry date */
.entry_box{
width:80px;
float:left;
color:#6f0d3b;
font-family:Arial, Helvetica, sans-serif;
}
.entry_box span.vol{
display:block;
width:80px;
font-weight:bold;
font-size:20px;
border-bottom:1px solid #6f0d3b;
}
.entry_box span.number{
font-size:35px;
}
.entry_box span.date{
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
h2{position:relative; margin:-2px 0 -10px 80px;}

ブログなどでもよく見る日付の装飾ですが、ここを作りこむことによってデザインが洗練されると思います。
また画像ではなく敢えてCSSで装飾することによって、汎用的に使うことができます。
極力htmlの文書構造を崩さないように、htmlはできるだけ簡素にしました。
サンプルのように、見出しなどをfloatさせない場合はenrtyにclearfixを使用してください。

文字を両揃えにする

p{
text-align:justify;
text-justify: distribute-all-liens;
}

紙媒体では当たり前に行われていることですが、文字を両揃えにするだけでかなりパッと見が綺麗になります。
webではあまりなじみのない「文字組」ですが、CSSで実現できるので作りこんだデザインを行う際は参考にしてください。
text-justifyというプロパティはIE独自の規格です。また、OperaやSafariでは日本語テキストには適用されないようです。

完成

demo / download

Comments

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.