スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。見出しの表現いろいろ見出しの表現いろいろ見出しの表現には、様々なものがあります。それぞれ例をあげて見てみましょう。(見出し部分全てが画像で出来ているものは除きます。色々な見出しの書き方を、スタイルシートで説明します。良く見かけるテーブルを利用した見出しも載せておきます。使用したものと、意味を載せます。今回フォントサイズを指定していなのは、全て<h4>〜</h4>で行っており、サイズ指定はしておりません。見出し(その1)背景色と罫線で調整します。背景色より暗めな色を罫線に使用する事で、影が出来ている様な錯覚が生まれます。■見出し(その2)背景色と罫線で調整します。背景色より暗めな色を罫線に使用する事で、影が出来ている様な錯覚が生まれます。『■、▼、●、>』の文字色を白にしてワンポイントにしてあります。▲PR見出し(その3)背景色と罫線で全体を整え、『PR』の文字を<span>〜</span>で囲み、それに対して全体としては、反対色の背景と文字色を設定しました。▲1見出し(その4)『1』の数字の背景色を『青』、罫線の左側と上側の色を明るく、右側と下側を暗くする(暗いので、見えにくいので太めにしてあります)。『1』の文字は<span>〜</span>で囲み、それに対して設定する。見出し(その5)<h4>〜</h4>の外側に罫線を引き、その中身である文字全体を<span>〜</span>で囲む。中身の<span>〜</span>にさらに罫線を二重線(double)で引く。この際太さを4pxにしたのは、インターネットエクスプローラで二重線(double)の外側の線と内側の線の幅を見た目上変える為に4pxにしてあります。インターネットエクスプローラーopera,mozillaこの違いは、ブラウザによって二重線の表示方法に違いがある為で、下記の様に1pxになると表示されなくなります。見出し(その6)<h4>〜</h4>の外側に罫線を引き、その中身である文字全体を<span>〜</span>で囲む。中身の<span>〜</span>の左側のみに太めの二重線(double)を引く。見出し(その7)<h4>〜</h4>の外側に罫線を引き、その中身である文字全体を<span>〜</span>で囲む。中身の<span>〜</span>の下側のみに太めの実線(solid)を引く。文字全体は、センターリングして中央に表示。見出し(その12)背景色と、下の罫線のパターン。影に見えるので案外使われてます。見出し(その13)背景色と、罫線のパターン。上を二重線にしてます。下の線は黒にして影の様な感じが出てます。)を先頭に配置し、下側の罫線のみを引く。この際、画像は背景画像として入れますので、『繰り返しはしない』で『配置は、左の中央』で表示します。見出し(そのb)見出し(そのb)画像を利用して、右上の部分を『斜めにカット』、『丸くカット』するパターンです。右上の部分がない全体の画像を使用するのではなく、右上に背景色を隠すように白色(ページの背景色と同様の色)画像(下図)を設置する事で、切れている様に見えます。この画像を使用します。(枠線は必要ありません。)また、グレーの部分は透明でも良いです。見出し(そのc)見出し(そのc)画像右下に設置して、飾り付けするパターンです。この画像を使用します。(枠線は必要ありません。)また、グレーや、緑の部分は透明でも良いです。見出し(そのd)全体を罫線で囲み、左側の罫線だけ太くし、グラデーションの画像を右側だけ設置する方法です。この様なグラデーションの画像を、右側の上から下の方向だけ繰返して設置します。見出し(そのe)全体を罫線で囲み、左側の罫線だけ太くし、グラデーションの画像を下側だけ設置する方法です。この様なグラデーションの画像を、下側の左から右の方向だけ繰返して設置します。見出し(そのf)全体を罫線で囲み、右側に画像を設置する。商品の一部拡大した部分などを、透明度を調整して画像を作成してあります。見出しなので、一部分が見える程度が良いと思われます。▲ブロックを入れるフォルダの上部の様(下記のテーブルではよく見かけます)に見える様にする為には、斜めの画像を入れる事で可能になります。見出し自体では、下線を引きますので、見出しの文字自体の幅と背景色を調整して、背景画像として斜めの画像を入れていきます。文字自体を調整する為には、文字を<span>〜</span>で囲い、その<span>の調整を行います。』を設置する事で、色を変化させます。この場合<span>はブロック要素でない為、幅や高さなどの調整が上手くできませんので、display:block;でブロック要素に変換します。<span>ではなく<div>を使用したいのですが、見出しの<h>〜</h>の中には、直接入れる事が文法上で来ませんので、<span>を入れてから変換してます。▲table見出し1テーブル(<table>)を使用したレイアウトは多く見かけます。』を設置する事で、色を変化させます。▲スポンサードリンク無料メール情報誌ワンランクUP講座ホームページのスタイルをワンランクアップ!基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。スタイルブック全体レイアウトを実際のサイト事例を使用し、詳細までを解説。スタイルシートの使い方のバリエーションを知る事ができる1冊。Windows版Webデザインに最適な新しいインタフェイスを備え、Webグラフィックをより簡単・効率的に制作することができます。本ページのW3Cでの記述検証結果は下記をクリックすると見れます。