雑誌風デザイン！オシャレなテキスト表現

今回は、雑誌風なデザイン、先頭文字を拡大して回り込ませるCSS3を使用したテキスト表現について、実際にサンプルコードを用いて、詳しく記載していこうと思います。

テキストの長い文章がメインの記事の場合、どうしても単調になりがちですが、CSS3を使用して雑誌風のオシャレなデザインが出来るようにサンプルを記載してみます。初心者の方でも比較的簡単にまねができ、見栄えも一気に変わることと思います。

という事で、それでは今回はッ、

・ベースになる段落をシンプルにマークアップ！
・段落の1文字目に:first-letterを適用する
・オシャレなデザインに！多彩な装飾

上記について記載していこうと思います…。

ベースになる段落をシンプルにマークアップ！

以前、text-shadowのご説明をした記事に少しだけ記載した1文字目の装飾。テキスト主体の段落がいくつかあるblog記事などを例に説明してみます。

特に1文字目に対するマークアップは意識せず、p要素でシンプルに段落としてマークアップしてゆきます。

私は、窓の外を眺めます。眼下は雲海。海というより粗い雪原が続いている感じです。雲の雪原はところどころ断層があり、新雪が降ったように滑らかなところもあります。雲の継ぎ目は緩やかな谷のようになっています。

飛行機は翼を左に振り、右上空が見えました。雲と空の境の淡い青から、上空の深い青に景色が変わります。宇宙の暗黒がかいま見えるような、吸い込まれそうに深い青です。と、「グー」という音に現実に引き戻されました。男のいびきです。

中谷酒造「若社長の中国日記：VOL.131 躍動する中部経済」引用

シンプルなマークアップ

サンプルHTML<div id=”column”>
<p>私は、窓の外を眺めます。眼下は雲海。海というより粗い雪原が続いている感じです。雲の雪原はところどころ断層があり、新雪が降ったように滑らかなところもあります。雲の継ぎ目は緩やかな谷のようになっています。</p>
<p>飛行機は翼を左に振り、右上空が見えました。雲と空の境の淡い青から、上空の深い青に景色が変わります。宇宙の暗黒がかいま見えるような、吸い込まれそうに深い青です。と、「グー」という音に現実に引き戻されました。男のいびきです。</p>
・・省略・・
<!–/column–></div>

基本となるCSS

基本となるCSSの準備をします。
拡大する文字と、本文の文字サイズ・行間のバランスを調整するため、あらかじめブログ記事向けな、適切な値を設定します。

今回は基本文字サイズを14px、行間を1.6としてみます。

基本となるCSS@charset “UTF-8”;
body,h1,h2,h3,p,ul,li {
　　margin: 0;
　　padding: 0;
}
body {
　　font-size: 14px;
　　line-height: 1.6;
}

段落の1文字目に:first-letterを適用する

first-letter疑似要素で1文字目を選択します。「#column p:first-letter」とすることで、指定ID内のp要素すべてに適用することができます。

first-letter疑似要素で1文字目選択#column p:first-letter {}

特定の段落だけに適用したい場合はnth-child疑似クラスを併用します。例えば、「p:nth-child(odd):first-letter」と記述すると、奇数のp要素に対して適用することができます。

記述はnth-child、first-letterの順番にしないと適用されませんので注意が必要です。

1文字目のレイアウト

first-letter疑似要素で選択した1文字目のレイアウトやサイズ調整を行ってみます。
まず、font-size:3em;を指定し、1文字目を通常の段落の文字サイズより3倍の大きさに拡大します。

次にfloat:left;を指定し、1文字目を段落の左に回り込ませます。さらにmargin-right:10px;とpadding:10px;を指定し、文字まわりのバランスを整えます。

文字サイズの単位にはemを使うと「○文字分の大きさ」といった具合に、文字サイズのバランスをイメージしやすくなります。

1文字目のレイアウト・サイズ#column p:first-letter {
　　font-size: 3em;
　　float: left;
　　padding: 10px;
　　margin-right: 10px;
}

文字の回り込みバランス

文字の回り込みバランスを適切にするため、line-height: 1;を指定します。
line-heightの指定がないと、ブラウザによっては1文字目の回り込みが適切に表現されない場合があります。必ずline-heightを指定することをおすすめします。

line-heightの指定#column p:first-letter {
　　font-size: 3em;
　　float: left;
　　padding: 10px;
　　margin-right: 10px;
　　line-height: 1;
}

オシャレなデザインに！多彩な装飾

CSS3のプロパティを使い多彩な装飾を施してみます。この例では、font-weight: nomal;、background: #4c5482;、color: #fff;とし、文字の太さ、背景色、文字色を調整します。

文字の太さ、背景色、文字色の調整#column p:first-letter {
　　font-size: 3em;
　　float: left;
　　padding: 10px;
　　margin-right: 10px;
　　line-height: 1;
　　font-weight: nomal;
　　background: #4c5482;
　　color: #fff;
}

次に、CSS3による装飾です。文字に影、さらに背景も工夫してみます。
文字に影を指定しる方法はtext-shadowプロパティを使用します。今回は右下に落ちるような角度のある影ではなく、文字まわり全体に影が付くようにします。背景との区切りや、さりげなく目立たせるような指定として効果的です。

背景には、border-radiusを指定し、ブロック要素に角丸の効果を与えることにします。今回はborder-radius: 10px;としています。文字サイズに合わせて数値を大きくすることで、角丸長方形から円状に表現することも可能です。

CSS3の指定#column p:first-letter {
　　font-size: 3em;
　　float: left;
　　padding: 10px;
　　margin-right: 10px;
　　line-height: 1;
　　font-weight: nomal;
　　background: #4c5482;
　　color: #fff;
　　text-shadow: 0 0 5px #000;
　　border-radius: 10px;
}

私は、窓の外を眺めます。眼下は雲海。海というより粗い雪原が続いている感じです。雲の雪原はところどころ断層があり、新雪が降ったように滑らかなところもあります。雲の継ぎ目は緩やかな谷のようになっています。飛行機は翼を左に振り、右上空が見えました。雲と空の境の淡い青から、上空の深い青に景色が変わります。宇宙の暗黒がかいま見えるような、吸い込まれそうに深い青です。と、「グー」という音に現実に引き戻されました。男のいびきです。

という事で、今回は雑誌風デザイン！オシャレなテキスト表現につきまして、サンプルコードを交え記載してみました。

回り込みのレイアウトを使用することで、単調なテキスト表現に雑誌のようなおしゃりな視覚効果を与えることができます。また、HTML側のマークアップは極力シンプルなので、テキストや段落の追加時にも柔軟な対応が可能ですので、ページ制作初心者の方で、テキストデザインに行き詰まりを感じた際、試してみることをおすすめいたします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。