[翻訳] Web 開発入門：Part 3 スタイルを活用する (20110209)

  • Article

さて、今回は Part 3 の翻訳です。

https://www.microsoft.com/web/post/Web-Development-101-Part-3-Getting-some-style

今回はスタイルについて紹介しています。

今までの目次はコチラです。

WebMatrix を使ったWeb開発入門の翻訳始めます！(20110204)

Web 開発入門：Part 3 スタイルを活用する

Part 2 ではWebMatrix を使って非常にシンプルなページを作成し、複数のブラウザでそのページがどのように処理されるかを学びました。このセクションでは、Cascading Style Sheet (CSS) という技術を使って Web ページの内容を変えずに、見た目を変更する方法を学びます。

こちらが前回のセクションで作成した映画の一覧を表示する簡単なWeb ページです。

01

Cascading Style Sheet でスタイルを変える準備をする

これから少し、ハイパーリンクやページ内の区分け、スタイル設定などの機能を実現するタグについて説明していきます。その中で、Cascading Style Sheet (CSS) を使って Web ページの見た目を変える方法を説明します。。最終的に、他のページの間で共通の内容を切り出して、より簡単に内容を編集する方法を学びます。

区分けを使う

HTML では <div> タグを使用してページの内容を論理的に分割することができます。これはページの一部に特定のスタイルを適用する場合などに非常に有用です。

それでは Part 2 で作成した HTML から始めていきましょう。

 <!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Favorite Movies</title>
    </head>
    <body>
    <h1>A list of my Favorite Movies</h1>
       <ol>
            <li>It's a wonderful life</li>
            <li>Lord of the Rings</li>
            <li>The Fourth World</li>
            <li>The Lion King</li>
       </ol>
    </body>
</html>

まず、最初に映画の一覧を <div> タグを使って次のように囲みます。：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
</head>
<body>
  <h1>A list of my Favorite Movies</h1>
  <div id="movieslist">
  <ul>
    <li>It's a wonderful life</li>
    <li>Lord of the Rings</li>
    <li>The Fourth World</li>
    <li>The Lion King</li>
  </ul>
</div>
</body>
</html>

これで、映画の一覧である <ol><li> によるリストは <div> タグで囲まれました。いまこのページをブラウザで見ても何の変化もありません。それは <div> タグを使って論理的に分割しただけだからです。そのため、実際には見た目に何の変化も現れません。

ハイパーリンクを使う

みなさんも既にハイパーリンクはよく知っているかと思います。Web ページ内でクリック可能な領域で、他のページへのリンクになっている部分です。現在ではハイパーリンクとよく呼ばれていますが、もともとはアンカー (anchor) と呼ばれていました。そのため、ハイパーリンクを作成するためにアンカーを表す <a> タグを使います。

<a> タグは <a> と </a> で囲まれた内容をクリック可能にします。ユーザーがこのクリック可能な内容をクリックすると、ブラウザは <a> タグの中に指定された href 属性の内容に基づき HREF (Hyper-Reference) に表示を切り替えます。

属性とは角括弧の間、つまり < と > の間で定義される値のことです。たとえば次のような形です。：

 <tag 属性名=”値”>content</tag>

ハイパーリンクの属性を定義する場合には、次のような文法を使います。：

 <a href=”https://www.microsoft.com”>Click Here</a>

href 属性で指定する値は必ずしも上記のような URL である必要はありません。たとえば実行したい JavaScript の関数のようなものであってもかまいません。また、仮置きのような形で特殊な href 属性を設定することもできます。今回はこの仮置きの手段を使ってハイパーリンクを試してみたいと思います。仮置きのハイパーリンクを設定するには href の値に “#” を使います。

<li> に含まれている映画にハイパーリンクを加えていきます。そのために、それぞれの映画を <a> タグで囲み href 属性の値に “#“ を設定します。下記が <a> タグを追加した状態です。：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
</head>
<body>
  <h1>A list of my Favorite Movies</h1>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
  </ol>
  </div>
</body>
</html>

この状態で Web ページを実行すると、リストのそれぞれの属性が青い下線がついたよく見るハイパーリンクのスタイルになっているのがわかるかと思います。：

02

ヘッダーとフッターの追加

つぎはページにフッターとヘッターを追加します。<header> タグと <footer> タグは HTML 5 で新しく使えるようになった新機能です。HTML 5 に関してはw3cschools のサイト (https://w3schools.com/html5/default.asp)でさらに学ぶことができます。

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
</head>
<body>
  <header>
    <h1>A list of my Favorite Movies</h1>
  </header>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
    </ol>
  </div>
  <footer>
    This site was built using Microsoft WebMatrix. 
    <a href="https://web.ms/webmatrix">Download it now.</a>
  </footer>
</body>
</html>

この通り、いくつかの単純な HTML のブロックに分けることができました。

ヘッダーでは以前に作成した <h1> タグの内容を <header> タグに入れただけです。フッターとしてはちょっとした文章とハイパーリンクを追加しました。

これをブラウザで表示すると、このようになりました。：

03

ここまでフッター以外にはほとんど見た目の変化がありませんので、これからほかの部分の見た目も変えています。

このページの見た目を定義する

この前の章でアンカー タグの話をしたときに属性について学んだのを覚えているでしょうか？属性はそのタグの中の要素の振る舞いを定義しています。アンカータグの場合、リンクをクリックした場合、何が起こるかを HREF 属性に定義していました。

気づきかもしれませんが、属性を使ってタグの中の要素のフォントのサイズや色、罫線など様々な見た目を定義することができます。

たとえば、ページに記述されている <h1> の 「A list of my Favorite Movies」という文字列のフォントと色を変えてみましょう。：

 <h1 style="color:blue; font-size:32; font-family:Verdana; text-decoration:underline">A list of my Favorite Movies</h1>

このように <h1> タグは style 属性にそのスタイルの定義を記述することができます。上の例では色を青、フォントサイズは32、フォントファミリーは Verdanaそして、下線を入れるという設定をしています。実行結果は次の通りです。：

04

この方法でスタイルを変えることができましたが、実はこの方法はあまり良い方法とは言えません。もし、すべての要素にこのようなスタイルを適用していくことを考えてください。おそらく、Web ページはスタイルを指定する文字で埋め尽くされ、ページのダウンロードは遅くなり、ブラウザの表示も遅くなってしまうでしょう。

もちろん、そうならない仕組みは用意されています。その方法はスタイルシートを使う方法です。スタイルシートは要素ごとに設定され、その子供の要素には親の設定が引き継がれるという Cascading Style Sheet の概念を使って定義を行います。たとえば、<div> タグにスタイルを設定します。そして <div> の中には <ol> と <li> が記述されいますが、明示的に <ol> や <li> の中でスタイルを上書きしない限り <div> で設定されたスタイルが適用されます。

今度は style 属性を <h1> タグの中に定義しないでスタイルを設定する方法を見てみましょう。

全てのスタイルの定義を <h1> タグの中に書く代わりに、class 属性を次のように設定します。

 <h1 class="Title">A list of my Favorite Movies</h1>

これでタグにクラスが設定できました。これでこのクラスを持つものすべてに特定のスタイルを適用することができるようになりました。次のように CSS のコードを記述することで、すべての Title というクラスを持つ要素に同じスタイルを適用することができます。

 .Title {
  font-size: xx-large;
  font-weight: normal;
  padding: 0px;
  margin: 0px;
}

スタイル ”言語” はセミコロンで分けられた属性の一覧は中括弧 ({..}) でまとめられています。これらの属性がクラスに適用する場合、ドットを付けたクラス名を使って定義を行います。これにより、このクラスに適用するスタイルの定義はここに集約されます。

このコードはヘッダー部分の <style> タグに記述されます。例題のコードはこのようになるはずです。：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
  <style type="text/css">
    .Title {
      font-size: xx-large;
      font-weight: normal;
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>
<body>
  <header>
    <h1 class="Title">A list of my Favorite Movies</h1>
  </header>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
    </ol>
  </div>
  <footer>
    This site was built using Microsoft WebMatrix. 
    <a href="https://web.ms/webmatrix">Download it now.</a>
  </footer>
</html>

この状態で実行すると、スタイルが適用され、次のようなページが表示されます。：

05

<h1> タグに “Title“ というクラスを設定しましたが、スタイルシートの “.Title” の定義に従って、このクラスを持つすべての要素にこのスタイルが適用されます。

特定の要素にスタイルを設定したい場合その要素にクラスを設定することもできますが、そのクラスを適用する要素が1つのみである場合はその要素の id 属性を使ってスタイルを設定することもできます。HTML を見てみると 映画の一覧が “moviesList” というid を持った <div> タグで囲まれているのがわかるかと思います。

 #movieslist{
  font-family: Geneva, Tahoma, sans-serif;
}

これはこの“moviesList” というid を持った <div> タグに対するスタイルの定義です。スタイルシートはその定義した要素以下の子要素に対して有効になる (cascade) ため、この div タグ以下のすべての要素は上記の定義が適用されます。そのため、この例では <li> の要素に固有のスタイルを設定していなくても、<li> の要素のテキストにもスタイルが適用されています。

clip_image012

ブラウザの既定の設定では <ol> の中の <li> で表される個々のアイテムは先頭に数字が振られたリストを表示します。この数字をスタイルを使って削除することもできます。なぜなら、このリストは “moviesList” のIDを持った div の中にあるため、簡単にスタイルを設定できるのです。

これがその例です。：

 #movieslist ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}

この例は、#moviesList に含まれる <ol> に対するスタイル設定で、リストにしない、マージンを設けない、ボーダーを描画しない、パディングもしないという事を示しています。

これが実行結果です。

07

見ての通り、番号が消えました。

さらに、リスト内の各文字列は <a> タグによって囲まれています。下記の文法を使って#moviesList の中にある <li> タグ中にある <a> タグの見た目を制御できるようになります。

 #movieslist li a {
  font-size: large;
  color: #000000;
  display: block;
  padding: 5px;
}

ここでは様々な設定をおこなってみました。実行結果を見てみましょう

08

<a> タグについてもう少し解説します。<a> タグにはリンクの上をマウスが通過した場合の振る舞いを設定することができます。マウスがリンクの上を通過した場合に、マウスの動きを感知してスタイルを変更することができるのです。CSS でもこの機能を次のような記法で実現できます。

 #movieslist li a:hover{}

それでは、下記のようにマウスが通過した時のスタイルを設定してみましょう。：

 #movieslist li a:hover {
  border-left: 10px solid #94c9d4;
  padding-left: 10px;
  background-color: #e7f5f8;
  text-decoration: none;
}

文字列の左側に 10 pixel の罫線を入れ、背景色をつけて選択されているものがどれかをわかりやすくしています。

マウスがリンクの上を通った時、下のような見た目に変化します。：

09

CSS で色々と試してみるのも楽しいでしょう。WebMatrix ではこのような CSS の編集も簡単にできます。ただし、今まで色々とCSS を使ってみた中でこう思った方もいるかもしれません。「ちょっとまって！CSSは非常に便利だ。でも、1ページだけならいいけど、複数のページが Web サイトの中に出てきたらどうしたらいいの？」

なかなか、いい質問です。課題のこの段階では CSS はページの中の <head> タグの中で <style> タグを使用して定義されています。しかし、<style> タグで定義している内容は外部のファイルでまとめて管理することができるのです。

WebMatrix では CSS を管理する外部ファイルを簡単に作成することができます。 [ファイル] の作業領域で [新規] ボタンをクリックし、 [新しいファイル…] を選択します。

10

新規ファイルを作成するダイアログが表示されます。ここで [CSS] を選択し、ファイル名を “movies.css” と設定します。

11

[OK] ボタンをクリックして、movies.css を作成します。そうすると次のような <body> タグ用の空の CSS が入っているファイルが表示されます。

 body {
}

これを下記の CSS に置き換えてください。ここでは今まで使ってきたCSS がきれいに整理されているのがわかるかと思います。また、<h1> タグに Class 属性を指定する代わりにヘッダーを指定して CSS を設定しています。これでよりきれいなHTML になるはずです。

 body {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  width: 85%;
  margin: 20px auto;
}
 
header {
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
}
 
header h1 {
  font-size: xx-large;
  font-weight: normal;
  padding: 0px;
  margin: 0px;
}
 
#movieslist{
  margin: 20px 0;
}
 
#movieslist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#movieslist li a {
  font-size: large;
  color: #000000;
  display: block;
  padding: 5px;
}
 
#movieslist li a:hover {
  border-left: 10px solid #94c9d4;
  padding-left: 10px;
  background-color: #e7f5f8;
  text-decoration: none;
}

Web ページの方にもどちましょう。<style> タグの代わりに下記の記述を入れます。：

 <link rel="stylesheet" type="text/css" href="movies.css" />

これはブラウザに対して外部のスタイルシートを読み込むように指示しています。結果、下記のような HTML になりました。以前よりもきれいになったと実感していただけるかと思います。：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
  <link rel="stylesheet" type="text/css" href="movies.css" />
</head>
<body>
  <header>
    <h1>A list of my Favorite Movies</h1>
  </header>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
    </ol>
  </div>
  <footer>
    This site was built using Microsoft WebMatrix. 
    <a href="https://web.ms/webmatrix">Download it now.</a>
  </footer>
</body>
</html>

フッター部分の見た目がイマイチなので、下記の CSS を movies.css に追加して見た目を改善します。

 footer {
  font-size: smaller;
  color: #ccc;
  text-align: center;
  padding: 20px 10px 10px 10px;
  border-top: 1px solid #e5e5e5;
}

これは文字列を中央揃えにして、フォントを小さく、グレーにしています。実行すると下記のようになります。：

12

まとめ

このパートでは WebMatrix を使ってページにスタイルを加えていくCSSの使い方を学習しました。また、複数の要素でのスタイルの共有、ID を使って特定の要素のデザインを設定する方法、親要素から子要素にデザインを引き継いでいく様子、また子要素側でデザインを上書きする方法、そしてCSS を外部ファイルに配置し、複数のページから共有する方法も学びました。