CSSを使用して段落の初期キャップを作成する方法を学びます。あなたの最初の帽子のためにグラフィカルなイメージを使用するための単純なイメージ置換技術さえあります。
初期キャップの基本スタイル
ドキュメントには、初期キャップの3つの基本スタイルがあります。
- 盛り上がった - 最も一般的です。最初の文字が現在のテキストと同じ行にあります。
- 落ちた - かなり一般的です。最初の文字が大きく、最初のテキスト行の下に落ちます。次のテキストがその上に浮動します。
- 隣接 - 最初の文字は残りのテキストの横の1列にあります。これは、Webデザインよりも印刷物で一般的です。
イニシャルキャップまたはドロップキャップは非常によく知られています。彼らはテキストの長いと退屈なスパンを別の方法でドレスアップするための素晴らしい方法です。そして、CSSのプロパティでは：最初の文字、あなたは簡単に最初の文字を魅力的にする方法を定義することができます。
単純な初期キャップを作成する
シンプルに作成された初期キャップを作成するために必要なのは、段落の最初の文字を最初の擬似要素でサイズを大きくすることだけです。
p：最初の文字{font-size：3em; }
しかし、多くのブラウザでは、最初の文字がその行のテキストの残りの部分よりも大きいことが分かります。したがって、最初の文字は行の残りの部分ではなく、同じ意味になります。幸いにも、これは最初の行の擬似要素とline-heightプロパティで簡単に修正できます：
p：最初の文字{font-size：3em; }
p：最初の行{line-height：1em; }
テキストに適したサイズが見つかるまで、ドキュメント内の行の高さで再生します。
あなたの最初のキャップで遊ぶ
最初のキャップを作成する方法を理解したら、それを目立たせるために派手な服でドレスアップすることができます。色、背景色、枠線、またはあなたの好奇心を傷つけるもので遊ぶ。かなりシンプルなスタイルは、最初の文字のフォントと背景色の色を反転することです：
p：最初の文字{
font-size：300％;
背景色：＃000;
色：#fff;
}
p：最初の行{行の高さ：100％; }
別のトリックは、最初の行を中央に置くことです。あなたのレイアウトがフレキシブルであれば、テキスト行の中央部分が異なる可能性があるので、これはCSSでは扱いにくいことがあります。しかし、値を使って遊んでいる人もいれば、最初の文字を途中に表示させるのに十分なほどインデントすることができます。パラグラフのテキストインデントのパーセンテージで正しく再生されるまで再生してください：
p：最初の文字{
font-size：300％;
背景色：＃000;
色：#fff;
}
p：最初の行{行の高さ：100％; }
隣接した初期キャップはCSSで難しい
異なるブラウザではフォントが異なって表示されるため、CSSで隣接する初期キャップを作成することは困難です。 CSSで隣接するキャップを作成する背後にある考え方は、最初の行のtext-indentプロパティを使用して（左に）負の値を押し出すことです。また、その段落の左余白をある程度変更する必要があります。段落がよく見えるようになるまで、これらの数字で遊ぶ。
p {
テキストインデント：-2.5em;
margin-left：3em;
}
p：最初の文字{font-size：3em; }
本当に素晴らしい初期キャップを手に入れよう
魅力的な初期キャップを作成する最も良い方法は、フォントをより装飾的なフォントファミリに変更することです。一連のフォントとそれに続く汎用フォントを使用すると、アクセシビリティと使いやすさの問題に陥ることなく、お客様の最初の上限が適切に表示されるようになります。
p：最初の文字{
font-size：3em;
font-family： "Edwardian Script ITC"、 "Brush Script MT"、筆記体。
}
p：最初の行{行の高さ：100％; }
そして、いつものように、これらの提案をまとめて、段落に広告スタイルの初期キャップを作成することができます。
グラフィカル初期キャップの使用
それでもやはり、最初の帽子のページがどのように見えるのか嫌いなら、あなたは探している正確な効果を得るためにグラフィックスに頼ることができます。しかし、グラフィックスに直接移行する前に、この方法の欠点を認識しておく必要があります。
- 画像のない顧客には最初の上限が表示されず、画像が置き換えられている隠し文字が表示されないことがあります。これにより、段落をアクセス不能にするか、読みにくくすることができます。
- 画像は常にページのダウンロード時間に加算されます。初期キャップが大量にある場合は、多くの人が気付かないほどのダウンロード時間を大幅に増やすことができます。
- 一部のブラウザでは、隠された最初の文字と段落テキストを奇妙に見せるイメージの両方が表示されます。
- このオプションを自動化するのは非常に難しいです。正確なグラフィックを使用するために最初の文字が何であるかを正確に把握しておく必要があります。したがって、段落が編集されるたびに、新しい図形を作成する必要があります。
まず、最初の文字のグラフィックを作成する必要があります。私たちはPhotoshopを使って "Edwardian Script ITC"というフォントでLを作成しました。私たちはそれを300フィートの大きさにしました。その後、画像を手紙のまわりの最小限まで切り取って、画像の幅と高さに注目しました。
次に、段落のためのクラス "capL"を作成しました。ここでは、使用するイメージ、行頭（行の高さ）などを定義します。
段落のテキストインデントとパディングトップを設定するには、イメージの幅と高さを使用する必要があります。我々のL画像では、95pxインデントと72pxパディングが必要でした。
p.capL {
line-height：1em;
背景画像：url（capL.gif）;
バックグラウンドリピート：no-repeat;
テキストインデント：95px;
パディングトップ：72px;
}
しかしそれだけではありません。それをそこに置いておくと、最初の文字は段落に重複して表示され、最初にグラフィックが表示され、次にテキストに表示されます。そこで、最初の要素の周りに「initial」というクラスを追加し、ブラウザにその文字を表示しないように指示しました：
span.initial {display：none; }
グラフィックが正しく表示されます。段落のテキストインデントで再生すると、テキストを文字の上にぴったりと合わせることができますが、表示することができます。
