CSSで文章の頭文字を大きくする（ドロップキャップ）方法
公開日：
:
知識と経験
時として、文字しかないページに装飾したい一つの手段の覚書。
以下のCSSを入れればドロップキャップと呼ばれる文章内の頭文字を大きくすることができます。
簡単にできるんで状況に応じて試してみてはいかがでしょうか。
必要なCSS
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}
表示サンプル
大
黒山のたぬきさんがおしりを隠していたのに出てしまったことで人間につかみだされて火あぶりにされてしまうところをちょうど通りかかった一寸法師が助けようとおもったが、小さすぎてがっかりしてその場を通り過ぎてしまい、次に通りかかったのはルパン三世だったが、ふじこちゃんがいたから釘付けになってたぬきなんてどうでもよくなってしまった。落ちのない話はこれにて終了！
関連記事
-
-
超簡単！Instagramの写真をRSSでWebサイトやブログに埋め込んで自動更新する方法
Instagramの投稿写真を自分のWebサイトやブログで掲載する方法があります。 一
-
-
マッチングリスク意識 | Web Marketing用語
商品やサービスを購入する前、ユーザーは「効果が出なかったら…」と不安を持ちます。これを「マッ
-
-
営業（販促・PR）ツールで使うべき、参考にすべき最強のモーション（動画、ビデオ）インフォグラフィックス20選
以下を読む前にこちらをどうぞ！ ※すみませんが、自動再生中（笑） The Economy of C
-
-
これで安心♪Session Buddy でクラッシュしても表示タブのサイトを復元【Chrome拡張機能】
パソコンやGoogle Chromeが突然クラッシュしてしまう経験が最近多くて困っていて、C
-
-
カクテルパーティ効果 | Web Marketing用語
カクテルパーティーなどで、様々な雑音や会話が入り交じる中で、不意に自分の名前を呼ばれたり、興
-
-
MicrosoftがIEのサポートを2016年1月から各OSで動作する最新版にのみに限定
8月7日にMicrosoftがInternet Explorerのサポートを最新版のみサポートをする
-
-
必ず使うはずのHTML特殊文字を一覧で確認できる「みんなの知識 ちょっと便利帳」
HTMLの各ブラウザ対応をちゃんと考えているなら必ず使うはずの特殊文字！ Dreamweave
-
-
【ちょこっと豆知識】ブラウザショートカット編
対象のブラウザ IE9、Chrome、Firefox ※全てのブラウザで確認していないから対応して
-
-
AKB48がCMやっている東京のドメインが誕生！.tokyoを取得するしかないね！
AKB48がCMをやっているお名前ドットコムの「.tokyo」ドメインを早く取ろう！ 東京のド
-
-
社会的証明の原理 | Web Marketing用語
他人の行動に自身の行動もつられてしまう性質を「社会的証明の原理」といいます。 Facebo
