HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは <hoge>...</hoge> 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを 示 している 属 性 としてさらに 細 かい 設 定 を 開 始 タグの 中 に 書 き 込 むことができる <hoge attribute = "value"> 属 性 は 一 つのタグに 複 数 指 定 することができる.その 場 合 は, 新 たな 属 性 との 境 目 に 半 角 のスペースを 入 れる 開 始 終 了 タグの 入 れ 子 構 造 は 決 して 崩 してはならない HTML ファイルの 作 成 (1) エディタ(TeraPad)を 起 動 する (2) ファイルに 名 前 をつけて 保 存 する その 際,ファイル 形 式 は HTML にする (3) 1 行 目 に<!DOCTYPE html> (4) 2 行 目 に<html>, 最 終 行 には</html> (5) 3 行 目 に<head>, 4 行 目 に</head> ヘッダ 情 報 は<head> </head>の 中 に 加 えていく (6) ヘッダ 情 報 に 以 下 の 二 行 を 記 述 する <meta charset= UTF-8 > 文 字 コードの 指 定 <title>タイトル</title> 文 章 のタイトルの 指 定 (7) </head>の 下 に<body></body>を 加 える 1
<!DOCTYPE html> <html> <head> <meta charset= UTF-8 > <title>タイトル</title> </head> <body> </body></html> ( 例 ) 本 文 の 記 述 1:ヘッダーとフッター, 構 造 をあらわすタグ サイト 上 部 をヘッダー, 下 部 をフッターと 呼 ぶ ヘッダーには,サイトがどこに 属 してい るのかをわかるようにタイトルをつける フッターにはコピーライトをつける <header> <h1>タイトル</h1> </header> <footer> (c) Copyright 2014 hogehoge </footer> 構 造 をあらわすタグ article aside figcaption figure header footer hgroup mark nav section time 記 事 の 部 分 関 連 リンク figure 部 分 の 脚 柱 画 像 や 映 像 の 範 囲 指 定 文 書 のヘッダー 部 分 文 書 のフッター 部 分, 作 者 情 報,コピーライトを 記 載 見 出 しタグをグルーピングする 文 字 列 の 中 のハイライト ナビゲーション 文 章 のそれぞれの 要 素 を 囲 む 文 字 列 が 時 間 や 日 付 の 場 合 本 文 の 記 述 2: 見 出 しと 本 文 本 文 は<body>タグで 囲 まれた 部 分, 上 図 ( 例 )の の 部 分 に 書 く.ここでいう 本 文 とは, 主 にテキスト( 文 字 )と 画 像 動 画 などからなりたっている 以 下, 使 用 することができる タグのうち 最 も 基 本 的 なものについて 解 説 する 2
(1) 段 落 <p> </p> 文 章 の 本 文 には 一 段 落 ごとに<p>というタグをつける.このタグで 囲 まれ たものがひとつの 段 落 である. (2) タイトル <h1> </h1> / ~ / <h6> </h6> 見 出 しを 設 定 すると,その 部 分 は 大 きくあるいは 太 字 で 表 示 される. 見 出 しは<h1>~<h6>まであり,<h1>が 一 番 大 きな 見 出 しである. (3) 同 一 コンテンツのマークアップ <article> </article> 同 じ 内 容 に 属 する 部 分 を 囲 むことでマークアップする タイトルのタグ h1~h6 はマークアップされた 内 部 ごとに 1 から 始 めることができ る その 他 のタグ (1) テーマやコンテンツの 区 切 り 区 切 り 線 <hr> 単 独 で 用 いられて, 終 了 タグを 持 たない CSS で, 長 さ, 太 さ, 水 平 方 向 の 位 置, 陰 の 有 無 を 指 定 できる 長 さ width: 50%> : 画 面 の 50%の 長 さ 太 さ height: 5> :5 ピクセルの 長 さ align: center 中 央 に 表 示,left 左 寄 せで 表 示,right 右 寄 せで 表 示 (2) ハイパーリンクを 張 る <a href= http://www.hogehoge > </a> ハイパーリンクを 張 ることによって, 文 書 と 文 書,あるいはウェブ サイトとウェブサイトを 結 びつけることができる 引 用 符 で 囲 まれた 箇 所 には,インターネット 上 の URL やファイル 名 を 入 れる 属 性 で target = _blank と 記 述 しておくと,リンク 先 が 別 のウィ ンドウで 開 く(_self / _parent / _top / ウィンドウ 名 ) (3) 画 像 を 挿 入 する <img src = hoge.jpg width = "360" height = "220" alt = " 風 景 > img タグは 開 始 タグ 単 独 で 用 いられる width 属 性 で 画 像 の 幅,height 属 性 で 画 像 の 高 さを 指 定 できる. 別 に 指 定 しなくてもよいが,その 場 合,あらかじめ 画 像 の 大 きさを 調 整 しておく 必 要 がある. 数 値 はピクセル(px) 単 位 で 指 定 する.1px は 約 0.3mm である. 幅 と 高 さを 両 方 指 定 すると, 元 の 画 像 の 縦 横 の 比 率 が 変 わる 可 能 性 があるので, 通 常 はどちらか 一 方 だけを 指 定 する. alt 属 性 では, 画 像 ファイルについての 説 明 を 記 述 しておく. 例 えば, 川 の 写 真 を 入 れてあるならば, alt = 川 の 写 真 とでもいれておけ 3
ばよい.コンテンツの 意 味 が 重 複 しないように 注 意 する これは 必 須 項 目 ではないが,ブラウザのテキスト 読 み 上 げ 機 能 や 画 像 の 読 み 込 みがなされなかった 場 合 にユーザーのアクセシビリティがよくな る これ 以 外 に, 文 章 の 部 分 に 構 造 上 の 意 味 づけを 行 うためのタグが 色 々と 用 意 されている. いろいろな 構 造 に 関 するタグ (1) 強 調 <em> </em> と,さらに 強 い 強 調 <strong> </strong> 強 調 された 文 字 列 はブラウザではイタリックやボールドで 表 示 されるが, 実 際 にどのように 表 示 されるかは,ブラウザによる. (2) 定 義 <dfn> </dfn> (3) 引 用 <q> </q>, 長 い 引 用 <blockquote> </blockquote> (4) 引 用 元, 引 用 した 作 品 名 <cite> </cite> (5) 署 名 連 絡 先 <address> </address> (6) メイルの 送 信 :<a href="mailto:(メールアドレス)"> </a> (7) コメントアウト <!- - コメント - -> コメントを 記 述 する.このタグ 内 部 のコメントは,ブラウザでは 表 示 されない. (4) <div> </div> と <span> </span> このタグは 単 にテキストを 領 域 指 定 するために 用 いる. 具 体 的 な 使 い 方 は CSS の 項 を 参 照 せよ. 箇 条 書 き 箇 条 書 きを 表 すときには, 番 号 付 きの 箇 条 書 きと 番 号 を 振 らない 箇 条 書 きの 2 種 類 がある. (1) 番 号 付 き 箇 条 書 き <ol> <li>hogehoge</li> <li>hogehoge</li> </ol> (2) 番 号 無 し 箇 条 書 き <ul> <li>hogehoge</li> <li>hogehoge</li> </ul> 文 章 のタイトル(ヘッダ)と 末 尾 (フッタ)と 自 己 完 結 したセクション (1) <header> </header> 4
(2) <footer> </booter> (3) <article> </article> 表 の 作 成 とその 応 用 ウェブサイトにおいて 表 を 作 るには<table> </table>というタグを 用 いる.ウェブサイトに おける 表 組 みの 重 要 性 は, 1. 表 を 出 力 する 2. ウェブサイトのレイアウトを 制 御 する という 二 点 にある. 表 組 のためのタグの 使 い 方 <table border> <tr> </tr> <tr> </tr> </table> <td>(1, 1)</td> <td>(2, 1)</td> <td>(3, 1)</td> <td> (1, 2)</td> <td>(2, 2)</td> <td>(3, 2)</td> </table> <table> </table>:テーブルであることを 示 す <tr> </tr>:テーブル 内 の 行 であることを 示 す <td> <td>: 行 のなかでの 区 切 りセルを 示 す リンク タグと 属 性 タグのなかには, 属 性 を 使 って 値 を 指 定 するものがある. <tag attribute="value"> </tag> <hr>( 水 平 線 を 引 く) align="center/left/right" ( 水 平 線 の 位 置 を 指 定 ) 5
noshade [ 影 のない 水 平 線 を 表 示 ] width="number" [ピクセル 単 位 かページ 幅 に 対 する 割 合 (%)で 指 定 ] <a> </a> [アンカー] href="url" (url のサイトにリンクを 張 る) name="text" (ドキュメントの 一 部 に 名 前 を 付 ける) target="name_blank/self/_parent/_top" (href と 共 に 用 いる ターゲットのページ が 表 示 されるウィンドウやフレームを 指 定 する) <figure> </figure> [ 画 像 動 画 の 範 囲 指 定 ] <img> src="url" ( 画 像 ファイルの 指 定 ) alt=" 画 像 の 説 明 " ( 画 像 の 説 明 ) height(width)= number ( 画 像 の 高 さと 幅 を 数 値 で 指 定, 単 位 はピクセルか%) hspace= number ( 画 像 の 左 右 の 余 白 を 指 定, 単 位 はピクセル.) <table> </table> ( 表 組 み) align="left/right/center" (テーブルの 配 置 を 左 寄 せ/ 中 央 揃 え/ 右 寄 せのいずれで 指 定 する) background="url" ( 背 景 に 用 いる 画 像 の url を 指 定 する) border="x" ( 枠 線 の 幅 ) cellpadding="x" (セルの 罫 線 の 内 側 から 内 容 までのスペースをピクセル 単 位 で 指 定 する) cellspacing="x" (セル 間 のスペースをピクセル 単 位 で 指 定 する) vspace="x" (テーブルの 上 下 の 空 白 をピクセル 単 位 で 指 定 する) hspace="x" (テーブルの 左 右 の 空 白 をピクセル 単 位 で 指 定 する) <tr> </tr> (テーブルの 行 の 区 切 り) align="left/right/center" bgcolor="#rrggbb/colorname" valign="top/middle/bottom/baseline" <td> </td>[<th> </th>] ( 行 をセルに 区 切 る) colspan="number" ( 複 数 のセルを 横 方 向 に 結 合 する) rowspan= number ( 複 数 のセルを 縦 方 向 に 結 合 する) height(width)="x / Y%" (セルの 高 さ) 6
CSS 現 在 のウェブサイト 作 成 は,まず HTML によってサイトの 構 造 を 記 述 し,レイアウトは CSS(Cascading Style Sheet)でデザインするというのが 主 流 となりつつある. 本 来,HTML はネットワーク 上 のさまざまな 環 境 下 で 情 報 を 共 有 するために 開 発 されたものであり,そ して OS(オペレーティング システム)などが 異 なる 環 境 下 では, 表 示 のされ 方 も 異 なる ことが 考 えられる.したがって,HTML ではウェブサイトの 見 た 目 を 規 定 するような 要 素 は 使 わないようにし, 文 書 の 構 造 を 定 義 することのみに 用 いよう,という 最 近 の 傾 向 は HTML の 本 来 の 精 神 にかなっているといえる. しかし 近 年,ウェブサイトは 以 前 にもまして 見 た 目 やレイアウトが 重 視 されるようになっ てきた.これはサイトの 見 た 目 が,そのサイトのアクセス 数 などに 大 きな 影 響 を 与 える 以 上, 当 然 のことであろう.そこで,レイアウト 情 報 は CSS(Cascading Style Sheet)とい うスタイル ファイルによって 規 定 することになった.CSS を 利 用 することで, 従 来 では 不 可 能 であったより 細 かな 調 整 が 可 能 になったが, 他 方, 未 だ CSS に 対 応 していないブラ ウザでは, 不 可 解 なバグを 発 生 させることがありうる. CSS の 書 式 CSS は, 要 素 (selector)に 対 して 属 性 と 値 という 2 つの 要 素 を 組 み 合 わせる.こ の 場 合 の 要 素 (selector) とは,1 単 独 のタグであったり,2 複 数 タグをまとめたもので あったり,3 任 意 のウェブサイトの 要 素 である. そして,その 文 法 は どの 要 素 に 対 して 何 を:どうする という 順 番 で 記 述 していく. 複 数 の 何 を:どうする を 指 定 したい 場 合 は,それぞれをセミコロンで 区 切 って 記 述 す る.ただし, 改 行 は 任 意 に 行 ってかまわない. 要 素 { 属 性 1: 値 ; 属 性 2: 値 ;} また,CSS では /* */ がコメントとなる. CSS の 記 述 の 仕 方 は 3 種 類 ある. 1. タグに 属 性 として 記 述 する: <h1 style= fontsize:+2; color:red > 2. ページのヘッダ 部 分 ボディ 部 分 に 記 述 する: <head> <style type= text/css ><!-- h1 {font-size:+2; color:red;} h2 {color:blue;} --></style> </head> 3. CSS ファイルに 記 述 する ヘッダ 部 分 に <link rel= stylesheet href= /hoge.css > と 書 き 込 む 7
hoge.css というファイルをつくり そこでスタイルを 指 定 する. <div>と<span> <div>, <span> というタグは 単 に 範 囲 を 指 定 する という 機 能 のみを 担 っている.<div> はブロック 単 位 での 指 定 に 用 いて,<span>はその 前 後 で 改 行 されない 場 合 に 用 いる.これら は 様 々な 用 途 に 用 いることができるが,その 主 な 使 用 法 の 一 つが CSS を 用 いてスタイル を 指 定 するときの,スタイルの 適 用 先 を 規 定 するということである. 具 体 的 には 次 のよう な 手 順 を 踏 むことになる. 1. タグに class 属 性 を 指 定 して,クラスに 分 類 する 例 ):<div class= hoge1 > </div> 2. クラスに 対 してスタイルを 指 定 する 例 ):.hoge1 { 属 性 : 値 :} div.hoge1 { 属 性 : 値 ;} 但 し,class 属 性 は 上 記 以 外 のタグにも 用 いることができる. スタイルシートの 記 述 例 a) 色,フォント, 配 置 の 指 定 body {color:#666666; ( 文 字 の 色 を#666666 に) background-color:#ffffee;} ( 背 景 色 を#ffffee に) h1 {font-size:40px; (フォントサイズを 40px) font-family: Comic Sans MS ; (フォントを 指 定 ) color:#666633; text-align:center; (テキストを 中 央 揃 え) font-weight:normal/bold/bolder/lighter/100~900; (テキストの 太 さ) font-style:normal/italic/oblique;} ( 普 通 /イタリック/ 斜 体 にする) b)テキストの 配 置, 余 白 の 設 定 <div>, <p>, <h1>などに 適 用 p{text-indent:20pt; (テキストの 段 落 の 最 初 の 一 文 字 をインデント) line-height:1.5; (テキストの 高 さ, 行 間 を 指 定 する) margin-top:30pt; ( 上 部 余 白 の 設 定 ) margin-bottom:30pt; ( 下 部 余 白 の 設 定 ) margin-left:30pt; ( 左 部 余 白 の 設 定 ) margina-right:30pt; ( 右 部 余 白 の 設 定 ) c) 水 平 線, 表 の 設 定 hr {height:4px; ( 水 平 線 の 高 さの 指 定 ) background-color:#33cc65;} ( 背 景 色 の 設 定 ) table {width:90%; ( 表 の 幅 をウィンドウの 90%に) 8
height:115px;} ( 表 の 高 さを 指 定 ) td {padding:10px; (セルの 上 下 左 右 を 10 ピクセル 余 白 をとる) text-align:left;} (セルのテキストを 左 寄 せ) 画 像 とテキストのそろえ 方 を 指 定 する CSS の 値 (<div>, <p>, h1>, <span>, <img> な ど) vertical-align: 値 ; 値 :baseline(イメージの 下 辺 をテキストのベースラインにそろえる, top (イメージの 上 辺 を 行 の 上 にそろえる), middle(イメージの 中 央 を 行 の 中 央 に そろえる), bottom(イメージの 下 辺 を 行 の 下 にそろえる), 数 値 (ベースライン からの 位 置 を 数 値 で 指 定 ), 割 合 (ベースラインからの 位 置 を 割 合 で 決 定 ), float:left/right/none; (コンテンツの 回 り 込 みを 指 定 ) clear: 値 ; (コンテンツの 回 り 込 みを 解 除 ) 部 分 的 にコンテンツの 回 り 込 みをしたくない 場 合 にはこれを 使 う. 画 像,コンテンツの 周 りに 余 白 を 入 れる margin-top: 値 ; margin-right: 値 ; margin-bottom: 値 ; margin-left: 値 ; 値 = 数 値 ( 単 位 :cm, mm, in, pt, pc, px, em, ex) 割 合 ( 単 位 :%) 画 像 の 表 示 位 置 <figure> text-align:center; 背 景 と 罫 線 のデザインをする CSS(<div>, <p> <h1>, <span> <img> <b> 背 景 色 background-color: 値 ; 背 景 色 の 境 界 線 の 角 を 丸 くする border-radius: 10px; 背 景 色 の 境 界 線 に 影 をつける box-shadow: 1px 1px 3px #aaaaaa; コンテンツと 背 景 の 間 の 余 白 padding: 値 ; 数 値 と 割 合 9
背 景 画 像 を 表 示 する(<div> <p> <h1> <body> <span> <img> <b> ) background-image:url; 背 景 に 画 像 を 表 示 させる.url では 画 像 ファイルを 指 定 する. 背 景 画 像 をスクロールしないようにする background-attachment:scroll/fixed; 背 景 画 像 を 繰 り 返 して 表 示 しない backgroudn-repeat:repeat/norepeat/repeat-x,repeat-y; repeat 縦 横 に 繰 り 返 し no-repeat 繰 り 返 して 表 示 しない repeat-x 横 にだけ 繰 り 返 し repeat-y 縦 にだけ 繰 り 返 し 背 景 画 像 の 表 示 位 置 を 指 定 background-position: 値 値 横 方 向 と 縦 方 向 それぞれ 数 値, 割 合,left, center, right のいずれかで 指 定 する. 罫 線 の 種 類 border-style: 値 dotted 点 線 dashed 波 線 solid 実 践 double 二 重 線 groove 立 体 枠 罫 線 の 太 さ border-width: 値 ; thin, medium, thick, 数 値 罫 線 の 色 border-color: 値 ; テーブルとフォームのデザインをする CSS 罫 線 のスタイルを 指 定 border: 値 値 値 罫 線 の 種 類, 太 さ, 色 の 順 で 指 定 する 10
空 セルの 罫 線 を 表 示 table{empty-cells:show/hide;} セルとセルの 間 隔 を 調 節 table{border-spacing: 値 / 割 合 ;} テーブルやセルの 大 きさの 指 定 table {table-layout:fied; width: 値 ; ( 数 値 か 割 合 ) height: 値 ; ( 数 値 か 割 合 ) } 11