ドリル式ホームページの作り方

CSSファイルの編集

ドリル式ホームページの作り方TOP  >>  Lesson4〜スタイルを細かく指定する〜  >>  CSSファイルの編集

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〜スタイルを細かく指定する〜

  1. htmlの骨格を作成する
  2. IDとClassの設定
  3. CSSファイルの編集
  4. strongとemで強調する
  5. spanで一部分のスタイルを変える

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.