CSSで文章の頭文字を大きくする（ドロップキャップ）方法
公開日：
:
知識と経験
時として、文字しかないページに装飾したい一つの手段の覚書。
以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。
簡単にできるんで状況に応じて試してみてはいかがでしょうか。
必要なCSS
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}
表示サンプル
大
黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了！
関連記事
-
-
気分一致効果 | Web Marketing用語
その時の気分によって、取り入れる情報の種類が変わることを「気分一致効果」といいます。みなさん
-
-
松竹梅の法則 | Web Marketing用語
人は複数の選択肢を与えられた時、一番無難な答えを選ぶ傾向があります。これを「松竹梅の法則」と
-
-
テキストエディタ「EmEditor」指定する文字列を強調表示する方法
仕事でEmEditorを使っているのだが、便利な機能だから備忘録として記載。 指定する文字列を
-
-
Wordpres TinyMCE TemplatesプラグインのHTML自動整形を停止する方法
Wordpresテンプレートの TinyMCE Templates プラグインをそのままテン
-
-
【保存版】UI/UXは本よりスライドで勉強せよ！勉強会用厳選スライドで実力アップ！
UI/UXの勉強しようと本屋さんに下見しに行き、いろいろ立ち読みしたところ、確か
-
-
Youtube の 埋め込み動画 がプルダウンなどの上に表示されてしまう方法
ボディ内でYoutubeの埋め込み動画（iframe）を使用するときの対策です。
-
-
【お役立ちアプリ】iOSのsafariで簡単にPDF化して自分用に保存する方法
iPhoneのSafariを使っていて、残しておきたかったページを気がついたら違うサイトを開くと
-
-
バーナム効果 | Web Marketing用語
よく占いで利用される手法ですが、誰にでも当てはまるような曖昧な内容の表現でも、「あなたは◯◯
-
-
社会的証明の原理 | Web Marketing用語
他人の行動に自身の行動もつられてしまう性質を「社会的証明の原理」といいます。 Facebo
-
-
初頭効果 | Web Marketing用語
一番最初に受けた印象はなかなか変わらず、また一番記憶に残ります。これを「初頭効果」といいます
