スタイルシート ( 第 1 章 基 礎 1) HTMLはWeb 作 成 用 の 言 語 ですが 文 字 飾 りがかなり 貧 弱 です そこを 強 化 した ものがスタイルシートと 言 われるものです さらにスタイルシートには HTMLでは 出 来 ないような 仕 組 みも 取 り 入 れられています スタイルシートよりレベルの 高 い 技 術 は JavaScript ですが スタイルシートの 仕 組 み まで 覚 えれば 私 は Web サイトを 作 る 技 術 を 持 っています と 胸 を 張 るだけの 技 術 を 手 に 入 れたことになるのです これから 少 しの 間 スタイルーシートのうちで 最 もポピュ ラーなカスケードスタイルシート(CSS)の 勉 強 をしていきましょう スタイルシートは HTMLに 組 み 込 んで 使 用 します 組 み 込 み 方 は 次 の3 種 がありま す 1.スタイルブロックを HEAD 内 に 記 述 してタグ 要 素 に 指 定 する 埋 め 込 み 2. 要 素 に 直 接 スタイルを 記 述 するインライン 埋 め 込 み 3.スタイルシートを 外 部 ファイルにしてリンクやインポートして 組 み 込 む この3つを 用 途 に 応 じて 使 い 分 けると 便 利 です 授 業 では まず 1の 埋 め 込 みについて 学 習 していきます 埋 め 込 みに 習 熟 したころに 2のインライン 埋 め 込 みについて 学 習 します 一 番 最 後 に3を 学 習 します スタイルシートを 使 用 する 場 合 内 に meta タグで スタイルシートを 用 いる と いう 宣 言 をする 必 要 があります この 埋 め 込 みでの 組 み 込 みについて スタイルシートのベーシックな 組 み 込 み 方 です まず 次 のHTML 文 を Samy により 入 力 してください <title>css1-1</title> p { font-size: 24pt; color: blue; } <p> 埋 め 込 みのCSSです</p> この 章 のファイル はフォルダ フォルダ CSS1 CSS1 を 作 ってその 中 に 保 存 し て く だ さ い CSS1-1.html で 保 存 これにより <p>~</p> の 間 のすべてが 24ポイ ントで 青 色 の 文 字 になる CSS( 第 1 章 基 礎 1)-1
~タグ 内 のスタイルブロック<style>~ 内 にスタイルを 書 き 使 用 するタグに 指 定 して 使 用 します スタイルブロックのあるスタイルを 変 更 した 場 合 ペ ージ 内 の 指 定 されているタグはすべて 訂 正 できます HTML 文 章 内 で 編 集 時 のメモ(コメント)を 一 時 的 に 書 いておきたい 場 合 と で 囲 っておきます と 内 のものはすべてブラウザーでは 表 示 されません タグ を 一 時 的 に 隠 したり 更 新 履 歴 を 書 いておくのにも 便 利 です ただ ブラウザーによってはの 後 に--が 来 るとそこでコメントは 終 了 したと 誤 って 判 断 し その 後 の 文 章 を 表 示 してしまうものもあるようです との 中 には--は 書 か ないでください また コメント( 注 釈 文 )は /* と */ で 囲 みます コメントは 複 数 行 にわたっ て 書 くこともできます /* ここはコメントアウトされます */ /* コメントは 一 行 で 書 いても 複 数 行 で 書 いてもいいです 説 明 を 書 くのにも 使 えます */ ここで CSS CSSの 書 き 方 を 説 明 しましょう 一 番 シンプルな 書 き 方 は 次 のようなものです p{color:blue} セレクタ スタイルシートを 適 用 する 対 象 のタグ 宣 言 適 用 するスタイル 指 定 の 内 容 (プロパティ: 値 と 呼 ばれる) これにより <p>~</p>の 間 のすべての 文 字 が BLUE( 青 )になる また 次 のように 複 数 のプロパティを 使 うときには ;セミコロン で 区 切 ります p { font-size: 24pt; color: blue; } 空 間 は 半 角 スペース を 入 れる 絶 対 に 全 角 スペース を 入 れた ら 駄 目 です 動 作 しません CSS( 第 1 章 基 礎 1)-2
一 度 練 習 してみましょう 次 のHTML 文 をSamyで 入 力 して プレビューしてください CSS1-2.html <title>css1-2</title> p { font-size: 24pt; color: blue; } <p>1. 春 の 七 草 </p> <p>2. 夏 の 花 火 </p> <p>3. 秋 の 運 動 会 </p> <p>4. 冬 の 雪 かき</p> この4 行 が 24 ポイント の 青 色 の 文 字 になって いるでしょ ヘッダー 部 のスタイル 設 定 の 部 分 に 次 の 記 述 があるでしょ 1で 最 初 に pとあるのは <p>タグのすべての 箇 所 の 部 分 が 設 定 したようになります ここで 1の 箇 所 を 次 のように 変 えてみましょう p { font-size: 16pt; color: red; } ------ 1 これで 表 示 してみると 16ポイントの 文 字 サイズで 赤 色 に 変 わったでしょう 16 ポイント 文 字 色 : 赤 色 このスタイル 設 定 は タグ(<>で 囲 まれ た 仕 組 み)の 箇 所 にしか 設 定 できません 自 分 でタグを 作 ることは 出 来 ませんので 用 意 されているタグにスタイル 設 定 を 書 き 込 む 必 要 があります CSS( 第 1 章 基 礎 1)-3
次 に <h>タグと<i>タグを 利 用 してスタイル 設 定 を 書 き 込 んで 見 ましょう <title>css1-3</title> h6{ font-size:22pt; color:blue } p { font-size:16pt; color:red } i {font-size:17pt; color:green } <h1>1 年 の 行 事 <h1> <h2>1 年 の 行 事 <h2> <h3>1 年 の 行 事 <h3> <h4>1 年 の 行 事 </h4> <h5>1 年 の 行 事 <h5> <h6>1 年 の 行 事 </h6> <p>1. 春 の 七 草 </p> <p>2. 夏 の 花 火 </p> <p>3. 秋 の 運 動 会 </p> <p>4. 冬 の 雪 かき</p> <i>これらは 大 変 思 いで 深 いものでした だから 君 たちも 興 味 を 持 ってください </i> CSS1-3.html h6 見 出 しタグ ( 数 字 の6は 最 小 文 字 サイズ) i 斜 体 h1~h6 見 出 しタグ 数 字 は1~6 数 字 の 大 きいほうが 文 字 サイズが 小 さい 上 から<h1>~<h6>の 設 定 です <h>タグは 見 出 しを 書 くためのもので 数 字 が 小 さいほど 文 字 が 大 きいのですが <h6> のものだけがそうはな っていません スタイル 設 定 のほうが 優 先 する のですよ <i>タグによって 文 字 は 斜 体 になりますが これ に 加 えて スタイル 設 定 の 文 字 修 飾 が 加 わってい ることがわかります CSS( 第 1 章 基 礎 1)-4
今 度 は <font>~</font> のタグで スタイル 設 定 を 行 ってみましょう <title>css-1-4</title> font { font-size:28pt; color:blue } <font>24pt 青 </font> CSS1-4.html それでは <font>タグで 色 々なスタイル 設 定 をしたいときには どうするのでしょうか? できない のでしょうか? それをする 方 法 はあるのです しかも2つあるのです 次 のHTML 文 を 入 力 してプレ ビューしてください <title>css1-5</title> font.24 { font-size:24pt; color:blue } font.20 { font-size:20pt; color:cyan } font.16 { font-size:16pt; color:black } font.12 { font-size:12pt; color:red} <font class=24>24pt 青 </font> <font class=20>20pt シアン</font> <font class=16>16pt 黒 </font> <font class=12>12pt 赤 </font> CSS1-5.html 設 定 法 font.24 { font-size:24pt; color:blue } 使 い 方 は Class 属 性 を 使 って 指 定 します 例 <font class=24>24pt 青 </font> CSS( 第 1 章 基 礎 1)-5
この 名 前 の 付 け 方 は 半 角 の 文 字 で 意 味 がわかるようなつけ 方 にするのがいいのです ここでは24 24ポイント ポイントの 文 字 サイズなので font.24 としましたが font.moji24 でも いいし font.size24 でも あるいは 青 色 の24 24ポイント ポイントの 文 字 であることを 考 えて font.blue24 でもいいでしょう 自 分 で 工 夫 してわかりやすい 名 前 をつけましょう しょう 次 タグに のHTML.24 文 というふうに を 入 力 して プレビューしてください class 属 性 をつけるやり 方 は その そのタグ タグにしか 通 用 しませ ん しかし しかし タグ タグを 指 定 しないで.24 と class 属 性 をつければ すべての すべてのタグ タグに 対 し て 通 用 するやり 方 になります <title>css1-6</title>.24 { font-size:24pt; color:blue }.20 { font-size:20pt; color:cyan }.16 { font-size:16pt; color:black }.12 { font-size:12pt; color:red} <font class=24>24pt 青 </font> <b class=20>20pt シアン</b> <i class=16>16pt 黒 </i> <div class=12>12pt 赤 </div> CSS1-6.html 前 の 例 とほとんど 同 じ 結 果 ですよね <font class=24>24pt 青 </font> <b class=20>20pt シアン</b> bタグだから 太 字 になっています <i class=16>16pt 黒 </i> iタグだから 斜 体 になっています <div class=12>12pt 赤 </div> div タグはブロック 化 のタグで この タグ 中 に 好 きなスタイル 設 定 を 書 く ことが 出 来 るのですよ CSS( 第 1 章 基 礎 1)-6
今 度 は class 属 性 を 使 う 代 わりに id 属 性 を 使 ってみましょう 次 を 入 力 してください まったく まったく 同 じものが 表 示 されるでしょ <title>css1-7</title> font#24 { font-size:24pt; color:blue } font#20 { font-size:20pt; color:cyan } font#16 { font-size:16pt; color:black } font#12 { font-size:12pt; color:red} <font id=24>24pt 青 </font> <font id=20>20pt シアン</font> <font id=16>16pt 黒 </font> <font id=12>12pt 赤 </font> <title>css1-8</title> #24 { font-size:24pt; color:blue } #20 { font-size:20pt; color:cyan } #16 { font-size:16pt; color:black } #12 { font-size:12pt; color:red} <font id=24>24pt 青 </font> <b id=20>20pt シアン</b> <i id=16>16pt 黒 </i> <div id=12>12pt 赤 </div> id 属 性 でまずタグを 明 記 する 場 合 ですよ CSS1-7.html タグを 記 入 しているんだ font#24 font#20 font#16 font#12 というふうに<font>タグ を 使 っているので <font id=24> と い う よ う に <font>タグのないぶに id を 設 定 す ることが 必 要 なんだよ id 属 性 の 場 合 も タグを 明 記 しないで 記 述 するとすべてのタグで 通 用 す ることは class 属 性 の 場 合 と 同 なんだ CSS1-8.html タグを 明 記 していないので すべてのタ グに 通 用 します スタイル 設 定 に 加 えて すでにそのタグ が 持 っている 属 性 とが 合 わさった 結 果 が 表 示 されるのは まったく Class 属 性 の 場 合 と 同 じですよ <i id=24> ~ </i> とすると#24 で 設 定 された 属 性 と<i>の 属 性 が 両 方 現 れてくるのだよ CSS( 第 1 章 基 礎 1)-7
class 属 性 と id 属 性 はまったく 同 じ 動 作 をします どっちを 使 うかはまっ たくの 個 人 の 好 みでしょう ただ ただ id id のほうが のほうが class class より 入 力 しや すいし # # のほうが のほうが.. より 間 違 いにくいので id 属 性 で 記 述 する ほうを 薦 めます 練 習 問 題 次 のWebページを 作 ってください id 属 性 を 使 って 書 いてくださいね 前 頁 の 後 半 の 例 題 を 参 考 にしながら すべてのタグに 通 用 する タグを 明 記 しないやり 方 で 書 いてくだ さい ページのタイトルは CSSEX1-1 にして くださいね 24 ポイント 斜 体 32 ポイント 赤 色 40 ポイント 青 色 斜 体 この Web ページのファイルはフォルダ CSS1 の 中 に CSSEX1-1.html の 名 前 で 保 存 してください CSS( 第 1 章 基 礎 1)-8