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