第4回 画像とスタイルシート

ウェブページを構成するファイル

前回までに、ウェブページはそれぞれHTMLファイルと対応していることを勉強しました。しかし、HTMLだけではできることが限られていますので、他の種類のファイルをHTMLと組み合わせて使うのが普通です。

よく使われるファイルの種類には次のようなものがあります。

スタイルシート(CSS)
ウェブページの見栄え(文字の大きさや色、レイアウトなど)を指定します。
スクリプト(JavaScript)
ウェブページに動きをつけたり、データを処理したりします。
画像(JPEG, PNGなど)
ウェブページに表示する画像です。

今回はスタイルシートと画像について勉強します。スクリプトについては次回以降詳しく勉強します。

画像

アナログとデジタル

今使われているコンピュータは、ほとんどすべて情報をデジタルな形で処理します。

(PPT版ダウンロード)

練習問題 04-1(☆☆)

数年前に地上波のアナログテレビ放送が停止し、デジタル放送(いわゆる地デジ)に移行しましたが、なぜアナログからデジタルへ移行したのでしょうか?理由を調べてまとめなさい。

画像ファイルの表示

自分の顔写真をデジタル画像としてファイルに保存し、自己紹介のページの中に表示してみましょう。

練習問題 04-2(☆☆)
  1. アプリケーションフォルダからPhoto Boothを探して起動しなさい。
  2. Photo BoothはiMacの内蔵カメラを使って写真を撮るアプリです。カメラのマークのボタンがシャッターで、右側のエフェクトをクリックすると、いろいろな効果を加える事ができます。

  3. 撮影した画像をメニューの【ファイル】→【書き出す…】でファイルに保存しなさい。
    • ファイル名に日本語が含まれている場合、そのままURLとして使うと何かとトラブルが多いので、英数字だけのファイル名に変更しておくのが無難です。
  4. 画像ファイルをダブルクリックして開きなさい。通常は「プレビュー」が起動するはずです。
  5. 必要な部分だけ切り抜きなさい。マウスで切り抜きたい範囲を選択してから、メニューの【ツール】→【切り取り】を選びます。
  6. メニューの【ツール】→【サイズを調整…】で、縦横200〜300ピクセル程度に変更しなさい。
  7. 変更後の画像をファイルに保存しなさい。
  8. 参考資料でimg要素の使い方を調べ、自己紹介ページに顔写真を表示しなさい。
    • 相対URLで指定しましょう。HTMLファイルと画像ファイルが同じディレクトリにあると楽です。
  9. title属性を使ってキャプションを書きなさい。
  10. この場合、alt属性はどのように指定すべきでしょうか?

プライバシーの観点から、顔写真はむやみに公開すべきではないという意見があります。上の練習問題で作ったファイルは自分しか見ることができないので大丈夫ですが、インターネットに公開するファイルを作るときは、個人情報をどこまで書くか慎重に考えてください。

練習問題 04-3(☆)
  1. 自己紹介の出身校のところに慶應義塾大学を追加し、SFCのロゴ画像を表示しなさい。
  2. ロゴ画像をa要素で囲んでリンクにし、画像をクリックするとSFCトップページに飛ぶようにしなさい。
  3. この場合、alt属性はどのように指定すべきでしょうか?

ロゴや写真には著作権があります。ウェブで公開されている写真をimg要素で自分のページの一部として表示する場合は、引用のルールに従って表示するか、作者の許可が必要です。

写真と同じように、動画ファイルを作って表示することもできます。ただし、ウェブで使用する動画のフォーマットはいろいろな種類があって統一されておらず、下の資料に従って作った動画ページは、閲覧者のブラウザや環境によって見えないことがあります。
簡単動画制作資料 ( PPT | PDF )

スタイルシート

CSSとは

第2回のマークアップ言語のところでも説明したように、HTMLは文章の構造(見出しとか段落とか)を指示するマークアップです。それに対して、文章の見え方(見出しは48ポイントの大きさで中央揃えとか)を指示するのがスタイルシートで、現在ウェブで使われている規格は CSS (Cascading Style Sheets) です。

CSSにはいくつかのレベルがあります。最近のブラウザはLevel3 (CSS3) に対応していますが、ブラウザによっては対応していない機能もあります。書き方を検索する時は、利用できるブラウザが限定されていないかどうか注意しましょう。

CSSはHTMLとは別のファイルに書きます。そのままでは、どのHTMLファイルとどのCSSファイルが対応しているのか分からないので、HTMLファイルの中にCSSファイルの名前を書いておきます。ブラウザは、まずHTMLファイルを読み込み、次にその中で指定しているCSSファイルを読み込んで、それから表示をします。画像の場合にimg要素で指定した画像ファイルを読み込んで表示するのと同じです。

CSSを別のファイルにせず、HTMLと混ぜて一つのファイルに書く方法もありますが、初心者は分けて書いた方が区別がはっきりして混乱を防げるので、この授業では別のファイルに分けて書く方法を使います。

CSSの文法

CSSファイルの中には、スタイルの指定を書き並べていきます。スタイルの指定は、「どこを」「どうする」という形をしています。

「どこを」
セレクタと呼び、色々な書き方がありますが、一番簡単なのはHTMLの要素名をそのまま書くことです。例えば h1 と書けば、見出しに対してスタイルが適用されます。複数の要素に同じスタイルを適用する場合は、要素名をコンマで区切って書きます。
「どうする」
プロパティと呼び、「○○は××」という形をしています。例えば、color: blue と書けば「文字色は青」という意味になります。プロパティが複数ある場合はセミコロンで区切って書きます。(1個しか無い場合でも最後にセミコロンを書く習慣をつけておいた方が間違いが少ないです。)

スタイル指定の書き方は、まずセレクタを書き、その後に { } で囲んでプロパティを書きます。

空白、改行はどこでも好きなところ(ただし単語の途中は除く)に書けます。コメントは /**/ で囲んだ部分です。

練習問題 04-4(☆)
  1. テキストエディタで、自己紹介のファイルと同じディレクトリに mystyle.css という名前のファイルを、次の内容で作りなさい。
  2. 自己紹介のファイル introduction.html をテキストエディタで開き、head要素に次のようにlink要素の1行を追加しなさい。
  3. 自己紹介のファイルをブラウザで開き、表示がどう変わったか確認しなさい。表示が変わらない人は、h1要素を使って見出しを書いているか確認しなさい。
  4. mystyle.css を編集し、bluegreen に書き換えてから、ブラウザを再読み込みし、表示がどうなるか確認しなさい。

色の指定

CSSでは bluegreen のように色の名前で指定することもできますが、もっと微妙な色を使いたい場合は数値で指定します。数値は16進数で書くことが多いので、まず2進数と16進数について勉強しておきましょう。

(PPT版ダウンロード)

アナログとデジタルで説明したように、色を量子化して数値に置き換えます。

  1. 色を赤(R)、緑(G)、青(B)の三原色の成分に分解します。
  2. それぞれの成分の明るさを0〜255の数値で表します。
  3. 数値を3個並べて書く方式もありますが、普通はそれぞれ2桁の16進数(00〜FF)に直し、RGBの順に並べて6桁の16進数(000000〜FFFFFF)1個にします。

こうやって作った16進数の頭に # を付けると、色の名前の代わりに書くことができます。

練習問題 04-5(☆)
  1. さっきの mystyle.css で、色の名前の代わりに #F0A050 と書いて保存し、ブラウザで再表示してみなさい。
  2. 数値をいろいろ変えて、どのような色になるか見てみなさい。

枠線の指定

時間割に枠線が無いとなんとなく締まらないので、枠線を付けてみましょう。

練習問題 04-6(☆)
  1. mystyle.css に次のスタイル指定を追加し、ブラウザで再読み込みしなさい。
  2. 参考資料のborderプロパティを見て、いろいろなスタイルの枠に変更してみなさい。一番気に入ったスタイルに変更しましょう。

class属性とセレクタ

セレクタに要素名を書くと、その要素はすべて同じスタイルが適用されます。そうではなくて、同じ要素名でも違うスタイルを適用したい場合は、あらかじめHTMLファイルの中にclass属性を書いておいて、CSSでスタイル指定する時の目印にしなければなりません。今後はclass属性の値のことをクラス名と呼ぶことにします。

クラス名が付いているところだけスタイル指定したい場合は、セレクタのところは要素名の後にドットとクラス名を書いたものになります。

練習問題 04-7(☆☆)
  1. 時間割の中で、この科目は重要だ(落とせない)と思うものを2〜3科目選び、次のようにtd要素のクラス名を important にしなさい。
  2. mystyle.css に次のようなスタイル指定を追加し、表示がどう変わるか確認しなさい。
  3. 時間割の中で、それほど重要ではない(落としてもいい…わけはないですが)科目をいくつか選び、青色の文字で表示するようにしなさい。

セレクタで要素名を省略して、ドットとクラス名だけ書くと、要素の種類は何でもよいから、とにかくクラス名が一致するものに対するスタイル指定になります。

練習問題 04-8(☆☆)
  1. 趣味について書いた定義・説明リストの中で、一番好きなものを選び、その要素に important というクラス名を付けなさい。この状態で文字の色はどうなるでしょうか?
  2. mystyle.css を修正し、時間割と趣味の両方で important というクラス名の付いた部分が赤い文字になるようにしなさい。
練習問題 04-9(☆☆☆☆☆)

スタイル指定がお互いに矛盾してしまうことがあります。例えば、「td要素はすべて青い文字」と「クラスが important のところは赤い文字」という指定があったら、<td class="important">...</td> のところは何色で表示されるでしょうか?まず実際に実験し、それから下の参考資料でセレクタの優先順位について調べなさい。

参考資料

インスペクタの使い方(CSSを調べる)

第2回でインスペクタを使ってHTMLを調べることをやりましたが、CSSを調べることもできます。

HTMLの要素をクリックすると、インスペクタの右側にその要素に関するCSSの情報が表示されます。表示は4種類あってタブで切り替えられます。

ルール
適用されるすべてのスタイル指定が表示されます。
計算済み
最終的に決定されたプロパティの値が表示されます。

ルール表示では、プロパティをマウスでクリックして有効/無効を切り替えられます。また、プロパティの値を書き換えて表示がどうなるか試してみることもできます。

練習問題 04-10(☆☆)
  1. 自己紹介のページを表示し、インスペクタで見出し(h1要素)に関する情報を表示しなさい。
  2. colorプロパティをクリックして有効/無効を切り替え、表示を確認しなさい。
  3. プロパティ以外のところでクリックすると、新しいプロパティが追加できます。font-sizeプロパティを追加し、値を 48pt にしなさい。
  4. 48pt をいろいろな値に変えてみなさい。

ウェブアクセシビリティ

原則としてHTMLでは文章の構造(章や段落や箇条書き)についてのマークアップを行い、それが画面上でどう見えるか(色や大きさやレイアウト)はスタイルシートで決めることになっています。このように分かれているのは、ウェブで最も重要なのは情報を万人に伝えることであり、受け手の状況に応じて表示方法は変わっても構わないという思想があるからです。つまり、伝えるべき情報そのものはHTMLで記述し、見栄えなど必要に応じて変更する部分はスタイルシートという分担になっています。

目の不自由な人や、手が不自由でマウスがうまく使えない人でもウェブを利用できるようにすることをウェブアクセシビリティと呼びます。ウェブアクセシビリティでは、構造と見栄えを分離して書くことが重要です。

練習問題 04-11(☆☆☆☆☆)

あるページがウェブアクセシビリティに配慮しているかどうかを検査するウェブアクセシビリティチェッカーがあります。下の参考資料を見て、実際にウェブアクセシビリティチェッカーを使ってみなさい。


チェックポイント
  • ウェブページを構成するファイルにはどんな種類があるでしょうか?
  • アナログと比較してデジタルの利点は何でしょうか?
  • アナログをデジタルに変換する手順は何でしょうか?
  • ビットマップ画像とベクター画像はどう違うでしょうか?
  • スタイルシートの役割は何でしょうか?
  • CSSのスタイル指定はどのような形をしているでしょうか?
  • CSSのclass属性は何のために使うのでしょうか?
  • ウェブアクセシビリティとは何でしょうか?