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を使ったことがあると
-
-
Youtubeの埋め込み動画を自動再生に設定する方法
動画の埋め込みコードのアドレスの最後に「?autoplay=1」を追加する src="//ww
-
-
【秘伝】写真を粗くしない状態でPDFファイルは劇的に軽量化することができる方法
どうも、MURAKAWAです。 どのビジネスでもPDFファイルを扱うことはあるかと思い
-
-
WordPress Jetpack 余計なCSSやJSの読み込みを 削除して表示速度を早くする方法
Wordpressプラグインでサイトの表示速度を遅くすると有名なJetpackプラグイン。
-
-
HTMLの表を簡単に作成ができるTable Tag Generator
HTMLの表を簡単に作成ができるTable Tag Generator Web制作の仕事を
-
-
確証バイアス | Web Marketing用語
対象を自分の先入観に基づいて判断し、新たに入ってくる情報も、無意識のうちに自分の先入観を正し
-
-
中身が違うaタグをDreamweaverで一括でリンク設定を削除する方法
aタグの中が違うんだけど、一括でリンク設定を削除したい時があります。 いくらDream
-
-
【保存版】UI/UXは本よりスライドで勉強せよ！勉強会用厳選スライドで実力アップ！
UI/UXの勉強しようと本屋さんに下見しに行き、いろいろ立ち読みしたところ、確か
-
-
気分一致効果 | Web Marketing用語
その時の気分によって、取り入れる情報の種類が変わることを「気分一致効果」といいます。みなさん
-
-
同調現象 | Web Marketing用語
周囲の人間と同じ行動をしていると安心し、逆に自分1人だけが違う行動をしていると不安を覚えるこ
