HOME > > > cssで1文字目だけを大きくしたマガジンスタイルのドロップキャップを表現する方法

cssで1文字目だけを大きくしたマガジンスタイルのドロップキャップを表現する方法

ドロップキャップ

ドロップキャップとは

ドロップキャップとは最初の文字を大きくするアレです。雑誌などではよく見たことがあると思います。
Webは読み文の見た目ってあまり気にしていない様な気がします。
line-heightやweight等は変更して読みやすくしても、見た目のカッコ良さにはちょっと。
そんな中、雑誌の様なレイアウトが出来たら綺麗ですよね。

ソースを書いてみよう

サンプルはこちら

HTML

HTMLは通常通りの書き方でOKです。

<p class="txt">こんな感じでマガジンスタイルのレイアウトが出来ます。<br>
参考にして頂けたらと思います。</p>

CSS

CSSは下記の様に記載します。
キーは「first-letter」。ドロップキャップになる1文字に適応されます。
ドロップキャップで表現する1文字に対して「float:left」を指定します。

.txt{
overflow: hidden;
zoom:1;
}

.txt:first-letter{
float: left;
line-height: 1;
font-size: 310%;
padding-right: 5px;
}

最後に

最近はやっているらしいマガジンスタイル。
ドロップキャップ以外にもcssでデザイン対応できそうですね。

記事参考

Web Designing

参考にさせて頂きました。ありがとうございました。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket