自作サイト作成　CSS基本編　2

簡単なものはCSSの右側に説明を入れているので
理解できると思うので今回は他の指定した言葉について書いていきます。

上から順番に拾ってみると
hタグ（z-index・position・clear・border　）
sidebar部分（display）

まず『z-index』は『position』プロパティで配置した要素が重なってしまった時、
表示させる順番を決めることができます。

h1タグの場合バナー画像の下に隠れてしまっては意味が無いので
このような形で指定します。

positionタグは座標を指定して配置するための方法を示すものです。
通常は『absolute』としておいてtopプロパティやleftプロパティで値を指定します。

これを使うと小技としてリンク部分にカーソルを合わせると、
押されたように少し位置がずれるのを見たことがありませんか？

例えば
a:hover{
position: relative;
left: 3px;
top; 3px;
}
とするとマウスを合わせた時に左へ3px・上から3pxズレた形で表示されます＾＾

clearタグは回り込みを解除するためのものです。
回り込みというのはよく画像の左側に説明文があったりするやつです。

別にわざわざ書く必要もないのですがタグが増えすぎて間違った時、
思いっきり変なところに移動してしまわないように最初のうちに書いておきましょう。

borderタグの補足として、
noneは線なしdottedは点線・doubleは二重線などがあります。

次はmain部分です。

overflowは例えば文字が指定した枠内の範囲から
はみ出てしまった時の指示です。

hiddenは表示しない・visibleは無視し得表示され
scrollはスクロールバー付になります。

さて・・・最後にして今回の一番理解しにくいdisplayに関して＾＾；

displayとはタグ（正式には要素）を指定するものなのですが・・・
ややこしいですが頭から煙が出ないよう注意して下さいね＾＾；

まず要素の説明をします。
要素とはブロック要素とインライン要素に大まかに分類されます。

ブロック要素で代表的なのはPタグとよばれているのもので
文字（文章）を一塊として扱います。

インライン要素というのはその中でstrongタグなどで強調するときに使います。
つまりインライン要素というのはリンクや強調するときにつかいます。

『ん？なんでサイドバー関連にあるの？？』というと、
私のブログで例えばカテゴリーに矢印画像がついていますよね。

これは『ul・li』というインライン要素があってこれらを使用するために
『inline』と指定しています。

では『inline』ではなく『block』とするとどうなるのか？
下の画像はわかりやすいようにすこしCSSをいじりました。

いかがでしょうか？

今回さわった設定はリンク部分だけ色を変える。
そしてカーソルが重なったら更に色を変えるようにしました。

カテゴリーが枠で表示されていてカーソルが重なると色がかわるというのは
これを使っています。

ではblockで指定してulの要素を使うとどうなるのか？
右に色ごとズレます。。。

某テンプレートGA●ATを購入したときブロック要素というのを
理解していなかったので半泣きで必死にいじりたおしていました＾＾；

自分が作成していないテンプレというのは
意図しない要素を指定しているので
なぜこれを書いているのかがわからず思うようにできません。

でも自分で作ったテンプレならどんな形にも変化させることができます。

オリジナルテンプレでひと味違うサイトを作ってみましょう＾＾

補足ですがこのままではその後どのようになるかイメージがつきにくいので
こうなって→ こうなり→ こんな感じに変化していきます＾＾

見れるサイトになってきたかな＾＾；

＜＜編集後記＞＞

ようやく基本編が終わりました。。。
でも応用編はどうしようか思案中です＾＾；

サイト作成で本当に知りたい部分。。。
それはどうしてもSEOとかが入ってくるので『賢威』のノウハウから学んだ
私の方法は書けないんですよね＾＾；

SEOに触れない内容でそのうち書くとします＾＾；

2010年2月 5日

ユウ (13:11) | コメント(0)

カテゴリ：06.自作テンプレ作成編