CSSｻﾝﾌﾟﾙ

全体を真ん中表示にする

全体を真ん中表示にするには width で横幅を指定し、左右のマージンに auto を指定します。そうすると左右のマージンが同じ値になるように自動調節され、結果として全体が真ん中に表示されます。今までは<center></center>というタグをHTMLに書き込んでいたかと思いますが、そういう書き方はしないで、CSSで真ん中に表示させます。

それが

width:780px;
margin-left:auto;
margin-right:auto;

という表記になります。

ここで >width:780px とだけ書いた場合は、自動的に全体は右に表示されます。

全体を線で囲う

全体を線で囲うというと、テーブルを使って囲ったりする場合が多かったのですが、テーブルを使うのではなく、全体の枠に線をつけてあげるというのがCSSでの装飾です。これは全体を囲うときだけでなく、文章を見やすくするためなどに使うのにも便利ですし、見出しタグの際の装飾にも使えます。

それが、

border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;

という表記になります。これは線を1px、#999というカラーで表示しますという意味です。

#999は好きな色にかえてください。線の太さをかえるなら1pxの数字を変えればいいのです。

solidというのは一本線です。他にもborderスタイルはいくつかあります。

solid（普通の線）

double（二重の線）

groove（谷型の線）

ridge（山型の線）

inset（凹型）

outset（凸型）

dotted（点線）　

dashed（大きい点線）　

none（線なし）デフォルト

solidの部分を他のスタイルに変えてみてもいいでしょう。

トップバナーを表示させる

<div id="banner">で囲った部分を装飾します。今回は<h1>タグで囲われた見出しに対して
banner のCSSによるレイアウトを反映させます。

<div id="banner">
<h1>見出し</h1>
</div>

これはブログなどでもよく使われている方法なので覚えてください。

今までタイトルバナーは<img src="http://○○○.com/☆☆.jpg">などをHTMLに書いて表示していました。しかし、CSSではタイトルなどのイメージは背景画像として表示している場合が多いのです。

ブログは、タイトル部分のイメージは背景画像として表示させています。

そうすることにより、タイトルをユーザーが自由に変えることができ、タイトルや見出しを文字で書くことによって、検索エンジン対策にもなります。

NEXT⇒CSSでfontを制御


ｽﾀｲﾙｼｰﾄ(css)Menu
cssｽﾀｲﾙｼｰﾄ入門