CSSで文章の頭文字を大きくする（ドロップキャップ）方法
公開日：
:
知識と経験
時として、文字しかないページに装飾したい一つの手段の覚書。
以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。
簡単にできるんで状況に応じて試してみてはいかがでしょうか。
必要なCSS
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}
表示サンプル
大
黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了！
関連記事
-
-
Excelでリンクのついていない大量のURLにリンクをつける方法 ‐HYPERLINK関数‐
パソコンを使う仕事やパソコンでお金の管理をしている人ならほとんどの人がExcelを使ったことがあると
-
-
【ちょこっと豆知識】ブラウザショートカット編
対象のブラウザ IE9、Chrome、Firefox ※全てのブラウザで確認していないから対応して
-
-
サイトチェックツールのWebsite Explorer(ウェブエクスプローラー)が復活していた！
サイトチェックツールとして数年前までずっと使い続けてきていた「Website Explorer（
-
-
HTMLの表を簡単に作成ができるTable Tag Generator
HTMLの表を簡単に作成ができるTable Tag Generator Web制作の仕事を
-
-
Windows10 PC起動時によく使うアプリを自動起動する設定！スタートアップフォルダに登録
自宅でWindows7を使用している筆者だけど、会社でついにWindows10を使用すること
-
-
text-indent:-9999px;でテキスト飛ばしをしなくてもテキストを非表示、背景画像を表示する方法
必要に応じてテキストを非表示にしたいときはたまにだけど「text-indent:-9999p
-
-
使い方によってはかなり便利、使わな損する便利管理ツール「ルフトツールズ(lufttools)」
使い方によってはかなり便利、使わな損する便利ツール「ルフトツールズ（lufttools）」
-
-
Googleアカウント、Gmailの言語設定について
仕事でGoogle Mapで言語設定を変更することになったから覚書として残します。 他
-
-
確証バイアス | Web Marketing用語
対象を自分の先入観に基づいて判断し、新たに入ってくる情報も、無意識のうちに自分の先入観を正し
-
-
スノッブ効果（≒希少性の法則） | Web Marketing用語
※個人的にWebマーケティングの用語を備忘録として掲載しています。 引用元：Fer
