HTML5，CSS 資料
HTML５
HTML の文法
HTML（Hyper Text Markup Language）は，文章の部分を Tag（タグ）と呼ばれ る命令で挟んでいく タグは ＜hoge＞．．．＜/hoge＞ 開始 終了 のように開始タグと終了タグ一対のペアになっている． タグは，挟まれた部分がどのような情報であるかを示している。 属性としてさらに細かい設定を開始タグの中に書き込むことができる。
<hoge attribute = "value">
属性は一つのタグに複数指定することができる．その場合は，新たな属性との境目 に半角のスペースを入れる 開始・終了タグの入れ子構造は決して崩してはならない HTML ファイルの作成 (1) エディタ（TeraPad）を起動する (2) ファイルに名前をつけて保存する。 (ア) ファイル形式：HTML (イ) 文字コード：UTF8, (ウ) 改行コード：LF にする。 (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>を加える
（例） 本文の記述１：ヘッダーとフッター，構造をあらわすタグ サイト上部をヘッダー，下部をフッターと呼ぶ。ヘッダーには，サイトがどこに属している のかをわかるようにタイトルをつける。フッターにはコピーライトをつける。 <header> <h1>タイトル</h1> </header> <footer> (c) Copyright 2014 hogehoge </footer> 構造をあらわすタグ ariticle 記事の部分 aside 関連リンク figcaption figure 部分の脚柱 figure 画像や映像の範囲指定 header 文書のヘッダー部分 footer 文書のフッター部分，作者情報，コピーライトを記載 hgroup 見出しタグをグルーピングする mark 文字列の中のハイライト nav ナビゲーション section 文章のそれぞれの要素を囲む time 文字列が時間や日付の場合 本文の記述２：見出しと本文 本文は<body>タグで囲まれた部分，上図（例）の ※の部分に書く．ここでいう本文とは， 主にテキスト(文字）と画像・動画などからなりたっている。以下，使用することができる タグのうち最も基本的なものについて解説する。 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8”> <title>タイトル</title> </head> <body> </body></html> ※
(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 = “川の写真”」とでもいれておけ
ばよい．コンテンツの意味が重複しないように注意する。これは必須 項目ではないが，ブラウザのテキスト読み上げ機能や画像の読み込 みがなされなかった場合にユーザーのアクセシビリティがよくなる。 これ以外に，文章の部分に構造上の意味づけを行うためのタグが色々と用意されている． いろいろな構造に関するタグ (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) 番号付き箇条書き (2) 番号無し箇条書き 文章のタイトル（ヘッダ）と末尾（フッタ）と自己完結したセクション (1) <header> …</header> (2) <footer> </booter> <ol> <li>hogehoge</li> <li>hogehoge</li> </ol> <ul> <li>hogehoge</li> <li>hogehoge</li> </ul>
(3) <article> </article> 表の作成とその応用 ウェブサイトにおいて表を作るには<table> </table>というタグを用いる．ウェブサイトに おける表組みの重要性は， 1. 表を出力する 2. ウェブサイトのレイアウトを制御する という二点にある． 表組のためのタグの使い方 <table>…</table>:テーブルであることを示す <tr>…</tr>：テーブル内の行であることを示す <td>…<td>：行のなかでの区切りセルを示す リンク タグと属性 タグのなかには，属性を使って値を指定するものがある．
<tag attribute="value">…</tag>
<hr>（水平線を引く） align="center/left/right" （水平線の位置を指定） noshade [影のない水平線を表示] <table border> <tr> <td>(1, 1)</td> <td>(2, 1)</td> <td>(3, 1)</td> </tr> <tr> <td> (1, 2)</td> <td>(2, 2)</td> <td>(3, 2)</td> </tr> </table> </table> 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%" （セルの高さ）
CSS
現在のウェブサイト作成は，まずHTML によってサイトの構造を記述し，レイアウトは
CSS（Cascading Style Sheet）でデザインするというのが主流となりつつある．本来，HTML はネットワーク上のさまざまな環境下で情報を共有するために開発されたものであり，そ してOS（オペレーティング・システム）などが異なる環境下では，表示のされ方も異なる ことが考えられる．したがって，HTML ではウェブサイトの見た目を規定するような要素 は使わないようにし，文書の構造を定義することのみに用いよう，という最近の傾向は HTML の本来の精神にかなっているといえる． しかし近年，ウェブサイトは以前にもまして見た目やレイアウトが重視されるようになっ てきた．これはサイトの見た目が，そのサイトのアクセス数などに大きな影響を与える以上， 当然のことであろう．そこで，レイアウト情報はCSS（Cascading Style Sheet）というス タイル・ファイルによって規定することになった．CSS を利用することで，従来では不可 能であったより細かな調整が可能になったが， 他方，未だ CSS に対応していないブラウザ では，不可解なバグを発生させることがありうる． CSS の書式 CSS は，要素(selector)に対して「属性」と「値」という 2 つの要素を組み合わせる．こ の場合の「要素(selector)」とは，①単独のタグであったり，②複数タグをまとめたものであ ったり，③任意のウェブサイトの要素である． そして，その文法は「どの要素に対して」「何を：どうする」という順番で記述していく． 複数の「何を：どうする」を指定したい場合は，それぞれをセミコロンで区切って記述する． ただし，改行は任意に行ってかまわない． 要素 {属性 1：値； 属性 2：値；} また，CSS では「 /*・・・・*/ 」がコメントとなる． CSS の記述の仕方は 3 種類ある． 1. タグに属性として記述する: <h1 style=“fontsize:+2; color:red”> 2. ページのヘッダ部分・ボディ部分に記述する: 3. CSS ファイルに記述する ヘッダ部分に
<link rel=“stylesheet” href=“…/hoge.css”> と書き込む <head> <style type=“text/css”><!-- h1 {font-size:+2; color:red;} h2 {color:blue;} --></style> </head>
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%に） height:115px;} （表の高さを指定） td {padding:10px; （セルの上下左右を10 ピクセル余白をとる） text-align:left;} （セルのテキストを左寄せ）
画像とテキストのそろえ方を指定するCSS の値（<div>, <p>, <h1>, <span>, <img> <li> など） 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:値;
数値と割合
背景画像を表示する(<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, 数値 罫線の色
テーブルとフォームのデザインをするCSS 罫線のスタイルを指定 border:値 値 値 罫線の種類，太さ，色の順で指定する 空セルの罫線を表示 table{empty-cells:show/hide;} セルとセルの間隔を調節 table{border-spacing:値/割合;} テーブルやセルの大きさの指定 table {table-layout:fied; width:値; (数値か割合) height:値; (数値か割合) }
