CSSで文章の頭文字を大きくする（ドロップキャップ）方法
公開日：
:
知識と経験
時として、文字しかないページに装飾したい一つの手段の覚書。
以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。
簡単にできるんで状況に応じて試してみてはいかがでしょうか。
必要なCSS
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}
表示サンプル
大
黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了！
関連記事
-
-
必ず使うはずのHTML特殊文字を一覧で確認できる「みんなの知識 ちょっと便利帳」
HTMLの各ブラウザ対応をちゃんと考えているなら必ず使うはずの特殊文字！ Dreamweave
-
-
【My study】Excelで文字数をカウントする方法（LEN関数）
仕事で文字数をExcelでカウントする必要があり勉強になったので覚書として。 ネットで検索する
-
-
PNGファイルをかなり軽量化してくれるTinyPNGを使うべし！！
今までずーっと「PNGGauntlet」を使っていたんだけど、思ったよりあまり軽くならず。。 やは
-
-
WordPress Jetpack 余計なCSSやJSの読み込みを 削除して表示速度を早くする方法
Wordpressプラグインでサイトの表示速度を遅くすると有名なJetpackプラグイン。
-
-
中身が違うaタグをDreamweaverで一括でリンク設定を削除する方法
aタグの中が違うんだけど、一括でリンク設定を削除したい時があります。 いくらDream
-
-
Excelでアルファベットを簡単に連続入力する方法
仕事をしているときにExcelで英語を簡単に連番表示をさせたいときがありますよね？ そんなときはエ
-
-
Wordpres TinyMCE TemplatesプラグインのHTML自動整形を停止する方法
Wordpresテンプレートの TinyMCE Templates プラグインをそのままテン
-
-
覚えたらブラウジングが別格に早くなるChromeブラウザのショートカットのまとめ
以前にもChromeのショートカットについて記事を更新したけど、今回はもっと多くのショートカットを使
-
-
使い方によってはかなり便利、使わな損する便利管理ツール「ルフトツールズ(lufttools)」
使い方によってはかなり便利、使わな損する便利ツール「ルフトツールズ（lufttools）」
-
-
マッチングリスク意識 | Web Marketing用語
商品やサービスを購入する前、ユーザーは「効果が出なかったら…」と不安を持ちます。これを「マッ
