CSSで文章の頭文字を大きくする（ドロップキャップ）方法
公開日：
:
知識と経験
時として、文字しかないページに装飾したい一つの手段の覚書。
以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。
簡単にできるんで状況に応じて試してみてはいかがでしょうか。
必要なCSS
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}
表示サンプル
大
黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了！
関連記事
-
-
AKB48がCMやっている東京のドメインが誕生！.tokyoを取得するしかないね！
AKB48がCMをやっているお名前ドットコムの「.tokyo」ドメインを早く取ろう！ 東京のド
-
-
PNGファイルをかなり軽量化してくれるTinyPNGを使うべし！！
今までずーっと「PNGGauntlet」を使っていたんだけど、思ったよりあまり軽くならず。。 やは
-
-
Youtubeの埋め込み動画を自動再生に設定する方法
動画の埋め込みコードのアドレスの最後に「?autoplay=1」を追加する src="//ww
-
-
現状維持の法則 | Web Marketing用語
「選択肢が広がりすぎた場合、普段と変わらない選択をしてしまう法則を「現状維持の法則」といいま
-
-
覚えたらブラウジングが別格に早くなるChromeブラウザのショートカットのまとめ
以前にもChromeのショートカットについて記事を更新したけど、今回はもっと多くのショートカットを使
-
-
保有効果 | Web Marketing用語
人は手に入れたモノに対し、入手する前よりも価値を感じる傾向にあります。これを「保有効果」とい
-
-
これで安心♪Session Buddy でクラッシュしても表示タブのサイトを復元【Chrome拡張機能】
パソコンやGoogle Chromeが突然クラッシュしてしまう経験が最近多くて困っていて、C
-
-
親近効果 | Web Marketing用語
初頭効果とは逆に、一番最後に見聞きしたものが一番印象に残りやすいことを「親近効果」といびます
-
-
アンカリング効果 | Web Marketing用語
人は一番最初に見た数字やデータをよく記憶しており、何かしらの意思決定を行う際、最初に見たデー
-
-
超簡単！Instagramの写真をRSSでWebサイトやブログに埋め込んで自動更新する方法
Instagramの投稿写真を自分のWebサイトやブログで掲載する方法があります。 一
