CSSファイルの編集

*とimgにCSSを適用する

htmlの各タグに対してスタイルを適用していきます。

まずはユニバーサルセレクタとimgを指定します。imgにborder:0を指定するのは、imgにリンクを設定すると淵枠が表示されてしまうためです。

* {
	margin:0;
	padding:0;
	}
img {
	border:0; */ 画像の淵枠を消す */
	}

hとaddressにCSSを適用する

次にh要素とaddressにスタイルを適用します。

h1,h2,h3,p,ul,address {
	margin:5px 0 0 10px;
	width:610px;
	}
h2 {
	padding-left:5px;
	margin-top:14px;
	font-size:14px;
	color:#944;
	line-height:25px;
	background:url(../../gif/11.gif) left center no-repeat;
	}
h3 {
	font-size:14px;
	color:#f44;
	}
address {
	font-style:normal;
	padding:2px 0 5px 5px;
	border-top:solid 5px #944;
	}

h2に適用されているbackgroundの新しい使い方について説明します。

「background:url(○○.gif) left center no-repeat;」のような記述が上にあると思いますが、これは、

h2 {
	background-image:url(○○.gif); */ 背景画像の読み込み */
	background-position:left center; */ 背景画像の位置 */
	background-repeat:no-repeat; */ 背景を何回表示させるか */
	}

を略して記述したものです。

前に、「background-color:#000;」を「background:#000;」に略して書いていたことと同じ要領です。

今回のサンプルでは、「h2要素の背景を前の前のgifというフォルダの中の11.gifから読み込み、それを左中央に、繰り返しなしで表示する」という意味になります。

↑を背景に指定して、その上に文字を置くということです。

background-positionで指定できる位置は、「top,bottom,left,rightだけでなく、px指定もできます（20px 30px）」

background-repeatで指定できる表示方法は、「repeat,repeat-x,repeat-y,no-repaet」があり、1回だけ表示したいときは、no-repeat、repeat-xはx軸方向にwidthで指定した幅の文だけ繰り返して表示、repeat-yはy軸方向に、repeatはx,y軸どちらの方向にも繰り返し表示します。

このタグとこの使い方は結構使うので、必ず覚えておくこと。

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

pとulにCSSを適用する

次に先ほどidとclassを指定した、pとulにスタイルを適用します。

idで名前を付けたタグは、「タグ#名前」、classで名前を付けたタグは、「タグ.名前」と書くのでしたね。

p#a1 {
	background-color:#fcc;
	line-height:18px;
	border-top:solid 1px #f99;
	border-bottom:solid 1px #f99;
	}
p#a2 {
	font-size:14px;
	color:#00f;
	}
ul,p.a3,p.a4 {
	margin-left:30px;
	font-size:13px;
	color:#222;
	width:550px;
	}
p.a3 {
	line-height:20px;
	}
p.a4 {
	font-size:13px;
	color:#944;
	}
ul#d1 {
	list-style-type:none;
	list-style-image:url(../../gif/12.gif);
	list-style-position:inside;
	}
ul#d1 li {
	height:17px; */リストマークの位置調整のため*/
	padding-left:5px;
	}
p#a1 a {
	padding:0 10px;
	text-decoration:none;
	}
p#a1 a:link {
	color:#00f;
	}
p#a1 a:visited {
	color:#00f;
	}
p#a1 a:hover {
	color:#005;
	text-decoration:underline;
	}

list-sytle-typeはリストマークについてのタグで、noneとすると、"・"のマークがなくなります。（他にも色々ありますが管理人は使いません。）

list-style-imageはリストマークに画像を設定するときに使うタグで、画像の名前と場所を記述します。

list-style-positionは、リストマークがborderより内側（inside）にくるか、外側（outside）にくるかを指定できます。（デフォルトはoutsideです。）

サンプルでは、3行にわたって書いておりますが、これもbackgroundと同じく、

ul {
	list-style:none url(../../gif/12.gif) inside;
	}

のように、省略して記述すること可能です。

text-decorationは、リンクの下線のあるなしを変えることのできるタグで、noneは下線なし、underlineは下線ありを表します（デフォルトは下線あり）。

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

Lesson4～スタイルを細かく指定する～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>