1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート (Style Sheet)とは HTML や XML SGML といったマークアップ 文 書 の 表 示 形 式 を 制 御 する 概 念 マークアップ 文 書 において 見 栄 えと 構 造 を 分 離 するという 目 的 で 提 唱 された Web 上 で 広 く 使 われている HTML 文 書 にスタイルシートを 適 用 させる 場 合 には 一 般 的 に CSS が 利 用 される こうした 現 状 から CSS が 圧 倒 的 な 普 及 度 を 誇 っているため 一 般 に スタイルシートといえば CSS を 指 すことがある しかし CSS はスタイルシートという 概 念 の サブセット 即 ち 実 装 であるにすぎず 従 って CSS スタイルシート である 点 に 注 意 が 必 要 である <Wikipediaより 抜 粋 > 3.スタイルシートを 使 うメリットと 注 意 点 メリット 外 部 スタイルシートを 使 うことで 複 数 のHTMLファイルのレイアウトを 一 括 管 理 できる 見 栄 え 情 報 を 分 離 することで HTMLソース 自 体 が 見 易 くなる 注 意 点 古 いブラウザはスタイルシート 未 対 応 のものがある ブラウザによっては 動 作 が 異 なるものがある 4.CSS (Cascading Style Sheets)の 使 い 方 CSSをHTMLファイルに 適 用 するには 以 下 の3つの 方 法 があります 指 定 したタグのstyle 属 性 に 記 述 する head 要 素 内 にstyleタグで 記 述 する 外 部 CSSファイルを 作 成 し head 要 素 内 のlinkタグで 指 定 する スタイルシートの 本 来 の 目 的 を 考 えると HTMLとCSSを 分 離 した 方 が 望 ましいため ここで は 外 部 CSSファイルを 作 成 する 方 法 のみ 取 り 上 げることにします 1 / 6
5.CSSの 演 習 以 下 のソースをエディタで 記 述 し css.htmlとでも 名 前 を 付 けて 保 存 して 下 さい 保 存 したら ブラウザで 開 いて 確 認 して 見 て 下 さい これからCSSで 装 飾 していきます <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>cssの 演 習 </title> </head> <body> <h1>cssの 演 習 です </h1> <p> 今 はCSSの 演 習 をしています </p> </body> </html> 次 に 外 部 CSSファイルを 作 成 します 以 下 のソースをエディタで 記 述 し style.cssとでも 名 前 を 付 けて 保 存 して 下 さい h1{ p{ color: #0000FF; /* #0000FFの 部 分 をblueとしても 同 じ */ font-size: 300%; 続 いて 先 程 作 成 したcss.htmlのhead 要 素 にlinkタグでstyle.cssをスタイルシートに 指 定 す るコードを 追 加 します 以 下 の 一 文 を 追 加 しましょう <link rel=stylesheet type=text/css href=style.css> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>cssの 演 習 </title> <link rel=stylesheet type=text/css href=style.css> </head> 同 様 にブラウザで 開 いて 確 認 してみましょう h1タグの 中 身 の 文 字 色 が 青 になっているはずです また pタグの 文 字 の 大 きさもデフォルトの 大 きさの300%になっているはずです 2 / 6
ここでCSSの 文 法 について 説 明 していきます style.cssと 見 比 べながら 見 ていって 下 さい セレクタ { プロパティ: 値 ; これが 基 本 です セレクタの 部 分 は 要 素 ここではh1やpを 指 定 しています プロパティ 部 分 はh1ではcolor pではfont-sizeを 指 定 し 値 にはそれぞれのプロパティに 対 応 する 値 を 入 れています セレクタに 対 して プロパティは 複 数 指 定 できます セレクタ { プロパティ1: 値 1; プロパティ2: 値 2; つまり 以 下 のようにpに 対 して 複 数 のプロパティを 指 定 できます p{ font-size: 500%; backgoround-color: #C0C0C0; また 複 数 のセレクタにプロパティを 指 定 することもできます セレクタ1,セレクタ2 { プロパティ: 値 ; 例 えば 以 下 のようにh1とpに 対 してプロパティを 指 定 することができます h1,p{ color: #0000FF; /* #0000FFの 部 分 をblueとしても 同 じ */ ちなみに CSSファイルの 中 で/*と*/で 囲 むとその 部 分 は 無 視 されるため コメントを 付 ける 際 に 使 用 します 以 上 で CSSにおける 基 本 的 な 文 法 は 終 わりです 続 いてレイアウトの 基 本 になりうるであろうマージン( 外 側 の 余 白 ),パディング( 内 側 の 余 白 ),ボーダー( 枠 線 )について 説 明 していきます 3 / 6
css.htmlのbody 要 素 を 以 下 のように 追 加 します <body> <h1>cssの 演 習 です </h1> <p> 今 はCSSの 演 習 をしています </p> <div>マージン,パディング,ボーダーについて</div> <p> 確 認 作 業 中 </p> </body> style.cssも 以 下 のように 変 更 しましょう h1,p{ color: #0000FF; /* #0000FFの 部 分 をblueとしても 同 じ */ p,div{ font-size: 300%; background-color: #C0C0C0; div{ margin-top: 50px; margin-right: 100px; margin-bottom: 200px; margin-left: 400px; padding-top: 400px; padding-right: 200px; padding-bottom: 100px; padding-left: 50px; border: 2px solid red; ブラウザを 最 大 化 して 確 認 してみて 下 さい 赤 い 枠 線 がボーダーです その 枠 線 を 境 界 として 外 側 の 余 白 をマージン 内 側 の 余 白 をパ ディングといいます 外 側 の 余 白 が 上 50px, 右 100px, 下 200px, 左 400pxになっていることが 確 認 できると 思 いま す 同 様 に 内 側 の 余 白 も 上 400px, 右 200px, 下 100px, 左 50pxとなっています 4 / 6
また マージン,パディングはそれぞれ 以 下 のように 書 くこともできます margin: 50px 100px 200px 400px; padding: 400px 200px 100px 50px; これは margin: 上 右 下 左 ; のように 指 定 していることになります paddingについても 同 様 です もし 左 右 が 同 じ 値 ならば 引 数 の 数 は3つに 省 略 できます さらに 上 下 が 同 じ 値 であれば 引 数 の 数 は2つにできます 引 数 の 値 を1つにすると 上 下 左 右 すべて 同 じ 値 を 指 定 したことになります まとめると 以 下 のようになります margin: 上 右 下 左 ; /* 引 数 が4つの 場 合 */ margin: 上 左 右 下 ; /* 引 数 が3つの 場 合 */ margin: 上 下 左 右 ; /* 引 数 が2つの 場 合 */ margin: 上 下 左 右 ; /* 引 数 が1つの 場 合 */ 次 にborderプロパティについて 見 ていきます borderの 書 式 は 以 下 のようになっています border: 太 さ スタイル 色 ; スタイルにはsolid( 実 線 )やdotted( 点 線 )などがあります その 他 はリファレンス 等 で 各 自 調 べてみて 下 さい また 以 下 のようにborderを 個 別 に 指 定 することもできます border-top: 2px solid red; border-right: 4px solid green; border-bottom: 4px dotted green; border-left: 4px dotted #000000; 最 後 に マージンなどで 使 用 している 単 位 について 軽 く 触 れておきます 使 用 できる 単 位 にはcm,mmのような 絶 対 単 位 と px,em,exといった 相 対 単 位 と パーセ ント 値 があります px ディスプレイ 上 の1ピクセルを1とする 単 位 で 解 像 度 に 対 して 相 対 的 となる em 要 素 のfont-sizeの 値 を1とする 単 位 ex その 要 素 の 小 文 字 のxの 高 さを1とする 単 位 % 他 の 値 に 対 する 割 合 で 長 さや 大 きさを 指 定 5 / 6
6. 終 わりに 以 上 で 簡 単 ではありますが スタイルシートの 基 礎 の 説 明 を 終 わります 今 までCSSに 馴 染 みがなかった 方 も 今 回 の 講 習 会 を 取 っ 掛 かりに 興 味 を 持 って 頂 ければ 幸 いです 7. 参 考 文 献 など 参 考 文 献 ( 株 )アンク(2007), スタイルシート 辞 典 第 4 版, 株 式 会 社 翔 泳 社,400pp 引 用 URL フリー 百 科 事 典 ウィキペディア(Wikipedia), スタイルシート, http://ja.wikipedia.org/wiki/%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88 (2007/8 アクセス) 参 考 URL SUGAI Manabu 氏, CSS とはなんだろうか, http://www.nextindex.net/web/css/index.html (2007/8 アクセス) Web Frontier 氏, スタイルシートの 技, http://www.w-frontier.com/stylesheet/index.html (2007/8 アクセス) HTMQ 氏, スタイルシートリファレンス( 目 的 別 ), http://www.htmq.com/style/index.shtml (2007/8 アクセス) 杜 甫 々 氏, とほほのスタイルシート 入 門, http://www.tohoho-web.com/css/index.htm (2007/8 アクセス) 超 初 心 者 のためのホームページ 作 成 講 座, 超 初 心 者 のためのスタイルシート 講 座, http://park16.wakwak.com/~html-css/css/ (2007/8 アクセス) 明 治 大 学 経 営 学 部 戸 村 佳 代 教 授, 参 考 文 献 の 書 き 方, http://www.isc.meiji.ac.jp/~tomura/references_guide.html (2007/8 アクセス) 6 / 6