５月の授業日記

＞トップページへ ＞リンクのページへ

5/7 属性　

属性（タグのオプション）

　 属性をつけることで同じタグでも様々な表現にすることができる。

＜タグ 属性＝"属性値"＞

タグ名と区別するために半角スペースを入れる
"(ダブルクオート)を押し忘れるとおかしくなるので必ず先に閉じる

align属性（ｐ189）(left/center/right)

段落の水平揃えを指定する属性

bodyタグの属性

bodyタグに属性をつけるとページ全体にあたる指定が出来る

色の指定方法

色の指定にはRGE値（ｐ234）またはカラーネームを属性値として記述

bgcolor

背景色

text

文字色

複数の属性の指定

属性を複数指定する場合、間を半角スペースで明示する。

fontタグ

文章の構造とは関係なく文字に修飾を行うため追加された
しかし修飾は新たに出来たスタイルシート、タグは構造定義と役割分担化されたため 非推奨化

color

部分的に文字の色を変える

size="1~7"

文字の大きさを変える（デフォルト＝３）

今日のひとこと

タグの種類が増え、画面づくりが楽しくなる反面、作業が一段と めんどうくさくなってきた。

5/14 リスト

hrタグの属性

size=太さ（10）
width=幅(400)
align=水平方向の揃え(left)
color=色(#1E90FF)
noshade(属性値なし:影をつけない)

リストの種類

リスト(順不同リスト)＜ul＞〜＜/ul＞(p205)

(Un ortherd List)

番号つきリスト＜ol＞〜＜/ol＞(p206)

(Ol ortherd List)

リストの中身（共通）

＜li＞〜＜/li＞

(List Item

リストの作成方法)
  1. まずOLいUlでリストの領域をつくる
  2. 中に入れたい項目を＜li＞〜＜/li＞でくくる

      3. リストの入れ子

      リストの中にリストをつくることでインデントして階層化されたリストをつくることができる。

      ulリストのマークを変える(ul/li type属性)

      • square
      • disc
      • circle
      (デフォルトは一段目disc二段目circle)

      olリストの番号を変える（ol type属性）

      ＜ol type="a"＞
        1. いっこめ
        2. にこめ
        3. さんこめ
            4. ＜ol type="I"＞
            1. いっこめ
            2. にこめ
            3. さんこめ

            olリストの開始順を変える

            ＜ol start=""＞

            1. きのう
            2. きょう
            3. あした

            きょうのひとこと

            打つのは大変だけれどコピーをしてしまえば楽だし リストも様々な表示方法があるのでおもしろい。

            5/21 img

            画像を貼り付ける流れ

            1. 画像の準備
              1. 気に入った画像をダウンロード
              2. 使用するものだけをsite/imgフォルダへ（コピー）
              3. ファイル名をわかりやすいものに書き換える
            2. imgタグでどこにあるどの画像を表示するのかを指定
            3. htmlファウルと画像ファイルの位置関係を保ちながらアップロード

            ＜img＞画像を貼り付けるタグ

            ＜img src="画像へのパス"＞

            パス（経路）

            • （記述をしている）htmlファイルから（画像）ファイルへの経路(行き方)
          1. 画像に範囲はないので終了タグはなし
          2. src属性で画像ファイルの設置場所への経路を示す（画像へのパス）
            3. .
          3. ファイルの保存場所が変わると経路も変わる
          4. imgフォルダの中のicon.gif img/icon.gifと表記する

            5. imgタグのalign属性

            アニメgifも貼れます

            • imgタグのalign属性は画像に対する文字の垂直揃え
            • 画像の水平歩行揃えを設定したい場合はその段落にalign属性で設定する（ｐをつける）

            ページに背景画像を設置する（bodyタグのbackground属性）

            ＜body background="画像へのパス"＞

            この画像を背景にします<../img src="img/02.gif" border="4">

            今日のひとこと

            画像の貼り付け方法は少しややこしかったです。

            5/28 リンク１

            リンクのページ参照

            今日の一言

            ややこしかった。