外 部 スタイルシート(CSS)の 基 本 1. 外 部 スタイルシートを 作 るには 1Sマークをクリック 2 外 部 スタイルシートの 追 加 参 照 保 存 場 所 image が 入 っているファイルを 選 択 ファイル 名 に 名 前 を 付 ける( 例 index-ta) 保 存 3スタイルシートマネージャーを 閉 じて 上 書 き 保 存 4Sマークをクリック スタイルシート 情 報 欄 に index-ta.css が 出 来 たことを 確 認 2. 全 体 を 中 央 揃 えにするには (1) 標 準 準 拠 の 場 合 div に マージン: 自 動 (auto) を 設 定 する (2) 後 方 準 拠 の 場 合 1 body タグに 次 のCSSを 掛 ける 文 字 のレイアウト 水 平 方 向 の 配 置 : 中 央 揃 え に 設 定 2 上 記 1の 設 定 でページ 全 体 が 中 央 揃 えになるので body の 子 要 素 ( 今 回 は div )に 次 のCSSを 掛 ける 文 字 のレイアウト 水 平 方 向 の 配 置 : 左 揃 え に 設 定 3. 全 体 の 背 景 と 中 央 表 内 の 背 景 に 色 を 設 定 するには (1) 全 体 の 背 景 に 色 を 設 定 する 場 合 1ビルダー 起 動 2 index.html を 開 く 編 集 背 景 / 文 字 色 の 設 定 背 景 / 文 字 色 のタグから 色 を 選 択 OK (2) 中 央 表 内 の 背 景 に 色 を 設 定 する 場 合 1 中 央 表 内 の 全 体 を 選 択 属 性 表 タグ 色 から 任 意 の 色 を 選 択 上 書 き 保 存 4. 天 と 地 に 開 いた 空 白 部 分 を 無 くするには 1Sマークをクリック 2スタイルシート 情 報 : index.css をクリック body 編 集 レイアウト 上 方 向 : 0 px 下 方 向 : 0 px OK 閉 じる 1
CSS / 横 1 段 組 レイアウト ビルダー 起 動 新 規 作 成 名 前 を 付 けて 保 存 (ファイル 名 =01turkey-ta.html 保 存 場 所 =css-2) (1)id= contents 用 の 親 DIV タグを BODY の 中 に 入 れる 右 側 の タグ 一 覧 パネル を 表 示 BODY を 選 択 挿 入 その 他 レイアウトコンテナ(DIV) id= contents 用 の DIV (2) 親 DIV (contents)の 下 に 3つの 子 DIV タグを 入 れる 1 右 側 の タグ 一 覧 パネル 親 DIV (1 番 上 の DIV)を 選 択 挿 入 その 他 レイアウトコンテ ナ(DIV) id= header 用 の DIV 2 右 側 の タグ 一 覧 パネル 親 DIV (1 番 上 の DIV)を 選 択 挿 入 その 他 レイアウトコンテ ナ(DIV) id= main 用 の DIV 3 右 側 の タグ 一 覧 パネル 親 DIV (1 番 上 の DIV)を 選 択 挿 入 その 他 レイアウトコンテ ナ(DIV) id= footer 用 の DIV (3) 右 側 の タグ 一 覧 パネル 下 の id に 親 DIV と 子 DIV の 名 前 を 入 れる 1id= contents 用 の DIV をクリック 下 の id をクリック 値 タグに contents と Enter 2id= header 用 の DIV をクリック 下 の id をクリック 値 タグに header と Enter 3id= main 用 の DIV をクリック 下 の id をクリック 値 タグに main と Enter 4id= footer 用 の DIV をクリック 下 の id をクリック 値 タグに footer と Enter (4) 外 部 スタイルシートを 作 る 1 スタイルシートマネージャーの 表 示 をクリック 2 外 部 スタイルシートの 追 加 参 照 ファイル 名 :CSSの 名 前 を 入 力 する(index-ta) 開 く OK 閉 じる 上 書 き 保 存 ( index-ta.css が 出 来 上 がる) 3 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) が 出 来 たことを 確 認 (5)スタイルシートを 入 れる 手 順 クリック ルール 情 報 : 追 加 (6) 各 DIV にCSSを 適 用 して 横 1 段 のレイアウトを 作 る 1スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : contents と 色 と 背 景 背 景 色 ユーザー 定 義 その 他 16 進 :def2fe OK 位 置 幅 :900px OK 閉 じる 上 書 き 保 存 2 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) を クリック ルール 情 報 : 追 加 スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : header と 色 と 背 景 背 景 画 像 の 参 照 images/header-bg-1.jpg 属 性 繰 り 返 し: 繰 り 返 さない を 選 択 2
位 置 幅 :900px 高 さ:100px OK 閉 じる 上 書 き 保 存 3 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) を クリック ルール 情 報 : 追 加 スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : main と 色 と 背 景 背 景 色 白 位 置 幅 :900px 高 さ:600px OK 閉 じる 上 書 き 保 存 4 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) を クリック ルール 情 報 : 追 加 スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : footer と 色 と 背 景 背 景 色 ユーザー 定 義 その 他 16 進 :333399 OK 位 置 幅 :900px 高 さ:30px OK 閉 じる 上 書 き 保 存 (7)CSSで body( 全 面 的 )に 背 景 色 を 入 れる クリック ルール 情 報 : 追 加 スタイルの 設 定 : HTMLタグのスタイルを 設 定 を 選 択 HT MLタグ 名 : body 色 と 背 景 背 景 色 ユーザー 定 義 その 他 16 進 :dddddd OK 閉 じる 上 書 き 保 存 3
CSS / 横 2 段 組 レイアウト ビルダー 起 動 新 規 作 成 名 前 を 付 けて 保 存 (ファイル 名 =01turkey-ta.html 保 存 場 所 =css-2) (1)id= contents 用 の 親 DIV タグを BODY の 中 に 入 れる 右 側 の タグ 一 覧 パネル を 表 示 BODY を 選 択 挿 入 その 他 レイアウトコンテナ(DIV) id= contents 用 の DIV (2) 親 DIV (contents)の 下 に 4つの 子 DIV タグを 入 れる 1 右 側 の タグ 一 覧 パネル 親 DIV (1 番 上 の DIV)を 選 択 挿 入 その 他 レイアウトコンテ ナ(DIV) id= header 用 の DIV 2 右 側 の タグ 一 覧 パネル 親 DIV (1 番 上 の DIV)を 選 択 挿 入 その 他 レイアウトコンテ ナ(DIV) id= side 用 の DIV 3 右 側 の タグ 一 覧 パネル 親 DIV (1 番 上 の DIV)を 選 択 挿 入 その 他 レイアウトコンテ ナ(DIV) id= main 用 の DIV 4 右 側 の タグ 一 覧 パネル 親 DIV (1 番 上 の DIV)を 選 択 挿 入 その 他 レイアウトコンテ ナ(DIV) id= footer 用 の DIV (3) 右 側 の タグ 一 覧 パネル 下 の id に 親 DIV と 子 DIV の 名 前 を 入 れる 1id= contents 用 の DIV をクリック 下 の id をクリック 値 タグに contents と Enter 2id= header 用 の DIV をクリック 下 の id をクリック 値 タグに header と Enter 3id= side 用 の DIV をクリック 下 の id をクリック 値 タグに side と Enter 4id= main 用 の DIV をクリック 下 の id をクリック 値 タグに main と Enter 5id= footer 用 の DIV をクリック 下 の id をクリック 値 タグに footer と Enter (4) 外 部 スタイルシートを 作 る 1 スタイルシートマネージャーの 表 示 をクリック 2 外 部 スタイルシートの 追 加 参 照 ファイル 名 :CSSの 名 前 を 入 力 する(index-ta) 開 く OK 閉 じる 上 書 き 保 存 ( index-ta.css が 出 来 上 がる) 3 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) が 出 来 たことを 確 認 (5)スタイルシートを 入 れる 手 順 クリック ルール 情 報 : 追 加 (6) 各 DIV にCSSを 適 用 して 横 二 段 のレイアウトを 作 る 1スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : contents と 色 と 背 景 背 景 色 ユーザー 定 義 その 他 16 進 :def2fe OK 位 置 幅 :900px OK 閉 じる 上 書 き 保 存 2 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) を クリック ルール 情 報 : 追 加 スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : header 4
と 色 と 背 景 背 景 画 像 の 参 照 images/header-bg-1.jpg 属 性 繰 り 返 し: 繰 り 返 さない を 選 択 位 置 幅 :900px 高 さ:100px OK 閉 じる 上 書 き 保 存 3 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) を クリック ルール 情 報 : 追 加 スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : side と 位 置 幅 :199px 属 性 回 り 込 み: 左 OK 閉 じる 上 書 き 保 存 4 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) を クリック ルール 情 報 : 追 加 スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : main と 色 と 背 景 背 景 色 白 位 置 幅 :697px 高 さ:600px 属 性 回 り 込 み: 右 OK 閉 じる 上 書 き 保 存 5 スタイルシートマネージャーの 表 示 をクリック スタイルシート 情 報 : index-ta.css(link) を クリック ルール 情 報 : 追 加 スタイルの 設 定 : ID のスタイル 設 定 を 選 択 ID 名 : footer と 色 と 背 景 背 景 色 ユーザー 定 義 その 他 16 進 :333399 OK 位 置 幅 :900px 高 さ:30px 属 性 回 り 込 み 解 除 : 両 方 OK 閉 じる 上 書 き 保 存 (7)CSSで body( 全 面 的 )に 背 景 色 を 入 れる クリック ルール 情 報 : 追 加 スタイルの 設 定 : HTMLタグのスタイルを 設 定 を 選 択 HT MLタグ 名 : body 色 と 背 景 背 景 色 ユーザー 定 義 その 他 16 進 :dddddd OK 閉 じる 上 書 き 保 存 5