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を使ったことがあると
-
Windows10 PC起動時によく使うアプリを自動起動する設定!スタートアップフォルダに登録
自宅でWindows7を使用している筆者だけど、会社でついにWindows10を使用すること
-
営業(販促・PR)ツールで使うべき、参考にすべき最強のモーション(動画、ビデオ)インフォグラフィックス20選
以下を読む前にこちらをどうぞ! ※すみませんが、自動再生中(笑) The Economy of C
-
バーナム効果 | Web Marketing用語
よく占いで利用される手法ですが、誰にでも当てはまるような曖昧な内容の表現でも、「あなたは◯◯
-
PNGファイルをかなり軽量化してくれるTinyPNGを使うべし!!
今までずーっと「PNGGauntlet」を使っていたんだけど、思ったよりあまり軽くならず。。 やは
-
確証バイアス | Web Marketing用語
対象を自分の先入観に基づいて判断し、新たに入ってくる情報も、無意識のうちに自分の先入観を正し
-
CSS3でマウスオーバーで押した風なボタンを作る方法
少しでも表示速度を速くすることを念頭においていることで、ほとんど?のボタンなどのパーツはでき
-
テキストエディタ「EmEditor」指定する文字列を強調表示する方法
仕事でEmEditorを使っているのだが、便利な機能だから備忘録として記載。 指定する文字列を
-
WordPress Jetpack 余計なCSSやJSの読み込みを 削除して表示速度を早くする方法
Wordpressプラグインでサイトの表示速度を遅くすると有名なJetpackプラグイン。
-
アンカリング効果 | Web Marketing用語
人は一番最初に見た数字やデータをよく記憶しており、何かしらの意思決定を行う際、最初に見たデー