CSSで文章の頭文字を大きくする（ドロップキャップ）方法
公開日：
:
知識と経験
時として、文字しかないページに装飾したい一つの手段の覚書。
以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。
簡単にできるんで状況に応じて試してみてはいかがでしょうか。
必要なCSS
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}
表示サンプル
大
黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了！
関連記事
-
-
初頭効果 | Web Marketing用語
一番最初に受けた印象はなかなか変わらず、また一番記憶に残ります。これを「初頭効果」といいます
-
-
ウィンザー効果 | Web Marketing
一次ソースから得た情報よりも、第3者を介して伝えられた情報の方が影響力が大きくなる傾向にある
-
-
スノッブ効果（≒希少性の法則） | Web Marketing用語
※個人的にWebマーケティングの用語を備忘録として掲載しています。 引用元：Fer
-
-
同調現象 | Web Marketing用語
周囲の人間と同じ行動をしていると安心し、逆に自分1人だけが違う行動をしていると不安を覚えるこ
-
-
text-indent:-9999px;でテキスト飛ばしをしなくてもテキストを非表示、背景画像を表示する方法
必要に応じてテキストを非表示にしたいときはたまにだけど「text-indent:-9999p
-
-
Windows10 PC起動時によく使うアプリを自動起動する設定！スタートアップフォルダに登録
自宅でWindows7を使用している筆者だけど、会社でついにWindows10を使用すること
-
-
営業（販促・PR）ツールで使うべき、参考にすべき最強のモーション（動画、ビデオ）インフォグラフィックス20選
以下を読む前にこちらをどうぞ！ ※すみませんが、自動再生中（笑） The Economy of C
-
-
必ず使うはずのHTML特殊文字を一覧で確認できる「みんなの知識 ちょっと便利帳」
HTMLの各ブラウザ対応をちゃんと考えているなら必ず使うはずの特殊文字！ Dreamweave
-
-
現状維持の法則 | Web Marketing用語
「選択肢が広がりすぎた場合、普段と変わらない選択をしてしまう法則を「現状維持の法則」といいま
-
-
CSS3でマウスオーバーで押した風なボタンを作る方法
少しでも表示速度を速くすることを念頭においていることで、ほとんど？のボタンなどのパーツはでき
