CSSで文章の頭文字を大きくする（ドロップキャップ）方法
公開日：
:
知識と経験
時として、文字しかないページに装飾したい一つの手段の覚書。
以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。
簡単にできるんで状況に応じて試してみてはいかがでしょうか。
必要なCSS
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}
表示サンプル
大
黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了！
関連記事
-
-
Windows10 PC起動時によく使うアプリを自動起動する設定！スタートアップフォルダに登録
自宅でWindows7を使用している筆者だけど、会社でついにWindows10を使用すること
-
-
スノッブ効果（≒希少性の法則） | Web Marketing用語
※個人的にWebマーケティングの用語を備忘録として掲載しています。 引用元：Fer
-
-
WordPress Jetpack 余計なCSSやJSの読み込みを 削除して表示速度を早くする方法
Wordpressプラグインでサイトの表示速度を遅くすると有名なJetpackプラグイン。
-
-
親近効果 | Web Marketing用語
初頭効果とは逆に、一番最後に見聞きしたものが一番印象に残りやすいことを「親近効果」といびます
-
-
カクテルパーティ効果 | Web Marketing用語
カクテルパーティーなどで、様々な雑音や会話が入り交じる中で、不意に自分の名前を呼ばれたり、興
-
-
WordPressプラグイン「All 404 Redirect to Homepage」で404エラーページ特定のページへリダイレクト
どうも、MURAKAWAです。 Wordpressを使用している人が大変増えていま
-
-
【My study】Excelで文字数をカウントする方法（LEN関数）
仕事で文字数をExcelでカウントする必要があり勉強になったので覚書として。 ネットで検索する
-
-
HTMLの表を簡単に作成ができるTable Tag Generator
HTMLの表を簡単に作成ができるTable Tag Generator Web制作の仕事を
-
-
Wordpres TinyMCE TemplatesプラグインのHTML自動整形を停止する方法
Wordpresテンプレートの TinyMCE Templates プラグインをそのままテン
-
-
【保存版】UI/UXは本よりスライドで勉強せよ！勉強会用厳選スライドで実力アップ！
UI/UXの勉強しようと本屋さんに下見しに行き、いろいろ立ち読みしたところ、確か
