情報ラボ ＞ HTMLとCSSでWebページを作ろう
Webページは、文書の組み立てを表す HTML と、見た目を決める CSS でできています。書いたらすぐに結果を見ながら、そのしくみを確かめましょう。
見本の学校・人物・町などは、すべて説明のための架空のものです。書いた内容はこのページの中だけで使われ、どこにも送られません（ページを閉じると消えるので、残したいときは保存してください）。
Tab キーで字下げできます。エディタの外へ移るときは Esc を押してから Tab を押します。
mysite/
├─ index.html
├─ style.css
└─ images/
├─ ball.svg
├─ flower.svg
├─ camera.svg
└─ star.svg
木の中の要素を押すと、下のプレビューでその要素に金色の枠がつきます（head の中は画面に表示されない部分です）。注意点の「〜行目」を押すと、エディタのその行へ移ります。
このチェックは、授業でよく見かける間違いを簡単に調べるだけのものです。HTMLの仕様にそっているかを正式に確かめる W3C の Nu Html Checker の代わりにはなりません。公開する前には、そちらでも確かめましょう。
左のチェックを外すと、そのプロパティは指定しない（ブラウザの初期の見た目）に戻ります。
.cards の display:flex）ふだん見ているWebページは、ほとんどが3種類の言語を組み合わせて作られています。
| 言語 | 受け持つこと | 例 |
|---|---|---|
| HTML | 文書の組み立て（どこが見出しで、どこが段落か） | 見出し、段落、リスト、表、画像、リンク |
| CSS | 見た目（色・大きさ・余白・配置） | 文字を紺色にする、カードを横に並べる |
| JavaScript | 動き（操作に応じて内容を変える処理） | ボタンを押したらメニューを開く |
HTML（HyperText Markup Language）は、文章に「ここは見出し」「ここは段落」といった意味の印をつける言語です。印をつけることをマークアップといいます。CSS（Cascading Style Sheets）は、その印を手がかりに「見出しは紺色で大きく」と見た目を指定する言語です。JavaScript は、ブラウザの中で動くプログラミング言語です。
役割を分けておくと、同じHTMLのままCSSだけを取りかえてデザインを変えたり、画面の大きなパソコンと小さなスマートフォンで並べ方を変えたりできます。また、文書の組み立てがHTMLに正しく書かれていれば、画面を見られない人が使う読み上げソフトなども、ページの内容を正しく伝えやすくなります。
HTMLの仕様は、WHATWG という団体が「HTML Living Standard」として公開し、いつも最新の状態に更新しています。2019年に W3C（World Wide Web Consortium）と WHATWG が結んだ覚え書きで、HTMLは主に WHATWG で作っていくことが決まりました。CSSの仕様は、W3C がボックスモデル、色、セレクタなどのモジュール（部品）ごとに作っています。JavaScript の中心となる言語仕様は、Ecma International という団体が ECMA-262（ECMAScript）として定めています。作ったページがサーバからブラウザに届くまでの流れは、Webページが表示されるまでで確かめられます。
HTMLでは、内容を開始タグ <p> と終了タグ </p> ではさみます。開始タグから終了タグまでのまとまりを要素といいます。<p>ようこそ</p> は「ようこそ」という内容をもつ p 要素（段落）です。
開始タグの中には、要素についての追加の情報である属性を「属性名="値"」の形で書けます。たとえば <a href="https://www.example.com/"> の href はリンク先、<img src="images/ball.svg" alt="バスケットボール"> の src は画像ファイルの場所、alt は画像の代わりになる文章です。
改行の <br> や画像の <img> のように、内容をもたず、終了タグを書かない要素もあります。仕様ではこれを空要素（void elements）とよび、area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr が決められています。空要素に </br> のような終了タグを書いてはいけません。
要素の中には、別の要素を入れられます。これを入れ子といいます。入れ子にしたときは、あとから開いたタグを先に閉じます。
<p>集合は <b>8時30分</b> です。</p> ← 正しい <p>集合は <b>8時30分</p></b> です。 ← b を閉じる前に p を閉じている
ブラウザは、間違いがあってもできるだけ表示しようとして、決められた手順で自動的に直します。そのため、見た目では気づきにくいのですが、直された結果が書いた人の意図とちがうことがあります。たとえば p 要素の中に ul 要素（リスト）は入れられないので、<p> のあとに <ul> を書くと、その時点で段落は終わったものとして扱われます。「タグの構造を見る」では、ブラウザが実際に作った入れ子の形（DOMツリー）を木の形で確かめられます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> ← 文字コード <title>写真部の紹介</title> ← タブや検索結果に出る題名 <link rel="stylesheet" href="style.css"> ← CSSファイルを読みこむ </head> <body> <h1>写真部へようこそ</h1> ← ここから下が画面に表示される </body> </html>
1行目の <!DOCTYPE html> は、このファイルが今のHTMLの決まりで書かれていることを示します。仕様には、DOCTYPE を省くとブラウザが一部の仕様と合わない別の表示方式を使うことがあると書かれています。html 要素の lang="ja" はページの言語が日本語であることを表し、読み上げソフトなどが正しい読み方を選ぶ手がかりになります。head には、文字コードや題名など、ページについての情報を書きます。body には、画面に表示する内容を書きます。
見出しには h1 から h6 までの6段階があり、数字が小さいほど上の階層です。仕様では、見出しの次に来る見出しは「同じ階層」「より上の階層」「1段だけ下の階層」のどれかでなければならないとされています。h1 の次にいきなり h3 を使うのは、この決まりに反します。
見出しを選ぶときは、文字の大きさではなく文書の階層で決めます。大きな文字にしたいだけなら、CSSで font-size を指定します。見出しの並びは、ページの目次を作るのにも使われます。
アクセシビリティとは、障害の有無や年齢、使っている機器にかかわらず、だれもが情報を利用できることです。W3C の「Web Content Accessibility Guidelines（WCAG）2.2」は、画像のような文字でない内容には、同じ目的を果たす代わりの文章（テキストによる代替）を用意することを求めています。
img 要素では、その代わりの文章を alt 属性に書きます。alt の文章は、読み上げソフトで読まれるほか、画像が読みこめなかったときに画像の代わりに表示されます。見本の「画像」では、わざとファイル名を間違えた画像の場所に alt の文章が出ることを確かめられます。
alt には「画像」「写真」と書くのではなく、その画像が伝えている内容を書きます。一方、飾りのための画像で、なくても情報が減らないものは、仕様で alt=""（空の文字列）と書くことになっています。alt 属性そのものを省くのとはちがう、という点に注意しましょう。
h1 { ← セレクタ（どの要素に）
color: #2F5496; ← プロパティ: 値;（何を・どうする）
font-size: 28px;
}
CSSは「どの要素に」「何を」「どうする」を書いたルールの集まりです。セレクタで相手を選び、{ } の中に「プロパティ: 値;」を並べます。1つの指定（宣言）の終わりにはセミコロン「;」をつけます。「;」を忘れると、次の行の指定までまとめて読めなくなることがあります。
| 種類 | 書き方 | 選ばれる要素 |
|---|---|---|
| 要素（型）セレクタ | p | すべての p 要素 |
| クラスセレクタ | .note | class="note" がついた要素（いくつあってもよい） |
| IDセレクタ | #title | id="title" がついた要素 |
class は同じ名前をいくつの要素につけてもかまいません。id は、HTMLの仕様で文書の中で重ならない名前（ただ1つの名前）にすることになっています。「CSSを試す」で、セレクタを切りかえると選ばれる要素の数が変わることを確かめましょう。
1つの要素に、いくつかのルールが同時に当てはまることがあります。そのときどれを使うかを決めるしくみをカスケードといい、CSSの名前の由来にもなっています。セレクタには詳細度という強さがあり、IDセレクタの数、クラスセレクタなどの数、要素セレクタの数の順に比べて、強いほうが使われます。詳細度が同じなら、あとに書いたほうが使われます。
CSSでは、すべての要素を四角い箱（ボックス）として扱います。箱は内側から順に、内容（content）、内側の余白（padding）、枠線（border）、外側の余白（margin）の4つの領域でできています。背景の色は content・padding・border の部分に塗られ、margin には塗られません。
width で指定した幅は、初期の設定（box-sizing: content-box）では content の幅を表します。たとえば width: 200px; padding: 10px; border: 2px solid; のとき、枠線の外側までの幅は 200＋10×2＋2×2＝224px になり、margin: 20px; も加えると、まわりの余白をふくめて 264px の場所を使います。box-sizing: border-box にすると、width は枠線の外側までの幅を表すようになり、content の幅は 200−10×2−2×2＝176px になります。「CSSを試す」の④で、数字を変えて計算を確かめられます。
色は、red のような色の名前、#FF0000 のような16進数、rgb(255 0 0) のような数値で指定できます。16進数の書き方では、# のあとの6けたを2けたずつ区切り、赤・緑・青の強さを 00〜FF（0〜255）で表します。3けたの #F00 は、各けたを2回くり返した #FF0000 と同じ意味です。英字は大文字でも小文字でもかまいません。光の三原色と16進数のしくみは色の表し方でくわしく体験できます。
親の要素に display: flex を指定すると、その子の要素がフレックスアイテムとして、ふつうは横一列に並びます。並ぶ向き（主軸）にそったそろえ方を justify-content、それと直角の向きのそろえ方を align-items で指定します。部活紹介のカードのように、同じ形のものを並べるときに便利です。
リンク先や画像の場所の書き方には、大きく2つあります。
https://www.example.com/images/ball.svg のように、スキームやホスト名から全部書く方法。どのページから使っても同じ場所を指します。images/ball.svg のように、いま書いているファイルのある場所を基準にして書く方法。mysite/ ├─ index.html ← ここから見ると images/ball.svg ├─ images/ │ └─ ball.svg └─ club/ └─ photo.html ← ここから見ると ../images/ball.svg
../ は「1つ上のフォルダ」を表します。相対パスを使うと、フォルダごとほかのサーバへ移しても、ファイルどうしのつながりがそのまま保たれます。一方、C:\Users\… のような自分のパソコンの中の場所を書くと、ほかの人のパソコンやWebサーバには同じ場所がないので、画像が表示されません。また、URLのパスは大文字と小文字を区別するものとして扱われるので、Images/Ball.svg と images/ball.svg は別のファイルを指すことがあります。ファイル名は半角の小文字・数字でそろえておくと安全です。
コンピュータの中では、文字は番号（数値）として記録されています。どの文字に何番を割り当てるかの決まりが文字コードです。ブラウザが、ファイルを作ったときとちがう文字コードで読んでしまうと、意味のない文字の並びが表示されます。これが文字化けです。文字と番号の対応は文字コードで確かめられます。
HTMLの仕様では、文書の文字コードは UTF-8 でなければならないとされています。また、<meta charset="UTF-8"> の宣言は、ファイルの先頭から 1024 バイト以内に書き終わっていなければなりません。そのため、head の中のいちばん最初に書くのが一般的です。テキストエディタで保存するときも、文字コードに UTF-8 を選びましょう。このページの「保存」ボタンは UTF-8 でファイルを作ります。
作ったページをインターネットに公開すると、世界中のだれでも見られるようになります。公開する前に、次のことを確かめましょう。
見本の「自己紹介ページ」が架空の名前と学校で作ってあるのは、このためです。授業で作ったページを公開するときは、先生の指示にしたがいましょう。
プレビューは、ページの中に別のページを表示する iframe 要素の中に、書いたHTMLを表示しています。iframe には sandbox 属性をつけてあり、仕様では、sandbox に allow-scripts の指定がないとスクリプトは動かず、allow-forms の指定がないとフォームの送信もできません。また、iframe の中の文書は、このページとは別の出所（オリジン）として扱われ、このページの中身にさわれません。そのため、JavaScript（<script> や onclick など）を書いても、プレビューでは実行されません。
あわせて、プレビューでは外部のサイトから画像やCSSを読みこまないようにしてあり、プレビューの中のリンクを押してもページは移動しません。使える画像は images フォルダの4つの画像だけです。保存したファイルをブラウザで直接開くと、リンクも動きます。
<link rel="stylesheet" href="style.css"> があるときだけ style.css が使われるのは、実際のWebページと同じです。自分のパソコンにあるHTMLファイルやCSSファイルを読みこんだり、作ったページをファイルとして保存したりできます。情報Ⅰ 授業の進め方ガイドでは、この教材を次の授業で使います。ねらい・導入の問い・50分の流れ・確認問題をまとめています。