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

spanで一部分のスタイルを変える

ドリル式ホームページの作り方TOP  >>  Lesson4〜スタイルを細かく指定する〜  >>  spanで一部分のスタイルを変える

spanで一部分のスタイルを変える

spanは一部分のスタイルを変えるのに多用されるタグで、「信号は赤色です。」という文があったとして、”赤色”の文字のみを赤くしたい場合、「信号は<span>赤色</span>です。」のように、spanタグでスタイルを変えたい文字を囲います。

そして、spanに対してCSSを、

span {
color:#f00;
}

のように指定します。

サンプルのhtmlのh2に対して、spanを指定してみましょう。spanにはidやclassを指定することも可能です。

<h2><span class="c1">INFORMATION</span></h2>

<h2><span class="c1">Lesson1:メモ帳を起動してみよう!</span></h2>

<h2><span class="c1">Lesson2:タグを書いてみよう!</span></h2>

htmlの編集が終わったら、style.cssを開いて、下のタグを追加します。

span.c1 {
padding-left:10px;
}

これで完成です!サンプルはコチラ→サンプル(ホームページ作成講座)


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.