スタイルシートの技

新聞記事のように先頭の1文字だけインパクトを与えた文字にする

英字新聞や英語論文のジャーナルなどでは段落の最初の1文字が大きくなっていたりするのを見た事はあるでしょうか？ それをスタイルシートで実現させる方法です。 もっともHTMLでは、font要素があるから、それを使えばいいじゃないのか？と思うかも知れませんが、 font要素は時期HTML/XHTMLでは廃止方向にある非推奨要素であるのと、 その最初の１文字を大きくして、回り込ませたい時には？って聞かれたらやはりスタイルシートしかない と思います。というので実装方法を実際に見てみましょう！

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <title>Fiber Optics</title>
   <style type="text/css">
      p.impact:first-letter
      {
         font-weight: bold;
         font-size: 200%;
      }
   </style>
</head>
<body>
   <h1>Fiber Optics</h1>
   <p class="impact">In recent years, dense wavelength division
   multiplexing (DWDM) systems have been intensively developed to
   meet the rapid increase of date traffic.</p>
</body>
</html>
Fiber Optics
In recent years, dense wavelength division multiplexing (DWDM) systems have been intensively developed tomeet the rapid increase of date traffic.

「:」って何でしょうか？リンクの下線を消したりする時に、 「a:hover」というのが出てきたのを覚えていますでしょうか？？？「疑似クラス」と呼ばれるものです。 「疑似」の「クラス」だと思っていてください。これは覚えるしかないので覚えてしまった方が早いと思います。

また、すべての段落「p」要素にかかるのがイヤでしたらクラスを作成して、「p.fl:first-letter」としても効果的でしょう。 良く雑誌とかで最初の文字を強調したい時に使うと視覚的に差を付ける事ができます。font要素でその部分だけ変えても 良いですが、段落ひとつひとつに指定しなければならないのでそれは面倒な方はオススメです。

先程は指定した要素、またはクラス内の最初の１文字を大きくした訳ですが、 雑誌で見かけるのは回り込みとか技術は工夫されていると思います。説明をぐだぐだ言うより、 見た方が早いので、ちょっと見てみましょう。 こちらは、HTMLで頑張ってやると多分かなり苦しいのではないでしょうか？

p.impact:first-letter
{
   float: left;
   font-weight: bold;
   font-size: 200%;
}
Fiber Optics
In recent years, dense wavelength division multiplexing (DWDM) systems have been intensively developed tomeet the rapid increase of date traffic.

さて、「float」とは段組みや画像の回り込みをさせるために必要なものでした。 思い出せない方はもう一度、項目を見直してみてください。 HTMLで頑張ろうとすると、テーブルとか？使う事になりそうですが、スタイルシートなら意味合いも兼ね備えながら このように実装する事ができます。後はみなさんのアイデア次第でしょうか。

top