スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

No.15 DIVタグとスタイルで自作見出しをつくろう

 DIVタグ用途が広いために理解しにくいタグの一つですね。しかし便利なのがDIVタグです。テキストボックスのようにも使えるし、画像とテキストをレイアウトするときにも使えます。しかし、ここでちょっと息抜き。DIVタグを使って自作の見出しに挑戦してみましょう。
 これも、DIVタグと、DIV開始タグに書いたスタイルという単純な構成です。スタイルが複雑になっても、スタイルは別のブロックと考えてください。そうするとソースの見通しが良くなります。

DIVタグを使った見出しです。囲いの真ん中です。


 上の見出しのスタイルは、まず例によって、縦に列挙します。

width:600px; //見出しの囲いの幅を600ピクセルに
height:30px; //見出しの囲いの高さを30ピクセルに
text-align:center; // 文字の表示は中央揃い
font-size:20px; //フォントの大きさは20ピクセル
line-height: 30px; //改行幅を見出し枠の高さと同じにして、文字を上下の真ん中に
border:solid 1px #000000; //枠は1ピクセルの黒色(#000000)の直線で
background-color:#aaaacc; //背景色は、薄い青紫(#aaaacc)
color:#ffffff;//文字の色は白(#ffffff)

 このスタイルをいろいろと変更して、自分なりの見出しをつくることができます。

<div style="width:600px; height:30px; text-align:center; font-size:20px; line-height: 30px; border:solid 1px #000000; background-color:#aaaacc; color:#ffffff;">DIVタグを使った見出しです。囲いの真ん中です。</div>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。