トップへ
田村研究室

コンピュータリテラシー2

Computer Literacy 2

メニュー

目次

2011
11/02

第8回

目標

  • スタイルシート機能を理解する
  • メニュー画面を用意できるようにする

スタイルシートの使い方

スタイルシート(CSS)とは

HTMLでは、文書の見出しや本文など文書構造の情報と、見栄えを表現した書式の情報の両方を記述できる。しかし、両者を一緒にしておくと後で修正が大変になる。

それに対して、見栄えに関わる記述だけをCSS(カスケードスタイルシート)として記述し、分離しておくことができる。CSSは別ファイルとして保存することもでき、同じCSSファイルを参照するページを作成すれば、見た目の統一が簡単にはかれる。

ただし、ブラウザによってはcssの対応にはバグも多く、正常に表示できないものもあるため，必ず各ブラウザで実際にどう表示されるか確認しておく必要がある．

外部スタイルシートの作成

まずスタイル名.cssという拡張子のファイルを新たに別に用意し，次のような内容を書き込んでおく．スタイル名は，例えばブログ用にblog.cssや，趣味のページ用にhobby.cssなど目的別に用意したり，サイト名にちなんだ名前にしたり，目的に応じてスタイルを選択しやすくできるように適当に付けておく．ただし，HTMLファイルと同様に，日本語のファイル名は使用できない．ファイル名をURLに含めても全世界からアクセスできるようにしておくためである．

body{
   background-image: url("back.jpg");
   background-repeat: repeat;
   color: #000080;
   text-align: left;
   margin-top: 0.5cm;
   font-size: 12pt;
}
H1{
   margin-left: 0.5cm;
   font-size: 24pt;
   background-color: #000080;
   color: #0088ff;
   text-align: center;
   font-weight: bold;
}

外部スタイルシートの基本的な設定方法

上の例のように次の形式で，タグ名ごとに必要な書式をひとつひとつ設定していく．

タグ名{
  設定項目名: 設定値;
  設定項目名: 設定値;
　...
  設定項目名: 設定値;
}

ここでは各設定項目の詳細は示さない．各自CSS関係の書籍やWebサイトを探して確認すること．

外部スタイルシートファイルをWebページへ読み込んで適用する方法

このスタイルシートファイルに設定しておいた書式は，自分で作成したすべてのWebページに適用することができる．その方法は，Webページ(HTMLファイル)の中の<head>部分にスタイルシートのファイル名を記述すればよい．次の例はstyleディレクトリの中にスタイルシートファイルが保存されている例である．もしもhtmlファイルと同じ場所にスタイルシートファイルが保存されている場合には単純に"スタイル名.css"と指定すること

<head>
  <title>●●のページ</title>
  <link rel="stylesheet" type="text/css" href="スタイルファイルの名前またはスタイルファイルのURL" media="screen">
</head>

外部スタイルシートをヘッダ内で指定する以外には特別になにか記述する必要はない．後は自動的に文字の色や大きさなどスタイルシートに書いておいた書式が有効になる．むしろHTMLファイルには，文字の大きさや色などは一切指定しない方がすっきりする．

Webページの中で複数スタイルを切り替える方法(クラスの利用)

あるひとつのタグに対して、場面の違いにより複数の書式を用意したいときには、「.クラス名」をつけてクラスを設定する．例えば，英語ページ用の書式と日本語ページ用の書式を別々に設定したい場合には，次のように設定する．

H1.western { font-family: "Arial Black" }
H1.cjk { font-family: "Ms Gothic" }

この例ではwesternやcjkがクラス名である．同じ<H1>に対して，westernというクラスとcjkというクラスの二つの設定を用意していることになる．それぞれ次のようにHTML中から利用する．

<h1 class=western>Introduction</h1>

または

<h1 class=cjk>紹介</h1>

また，タグ名を省略すると，すべてのタグで共通のクラス名を設定することができる．外部CSSファイルの中で次のように書く．

.red { color: red }

これによりHTMLファイルの方では，次のように色々なタグ中で指定することができる．

<h1 class=red>
<p class=red>

特定箇所だけの特別なスタイルを設定する(IDの利用)

クラスとは逆に，HTMLの方を先に考えて，ページ内の特定の1箇所に名前(ID)を付けて，他と区別した書式を設定することもできる．例えばpタグで指定される段落はページ中にたくさん存在しているが，その中のひとつに名前を付けることができる．次の例では"first"と名前を付けている．

<p id="first">

このような特定箇所だけの書式を外部CSSファイル中に作成することもできる．

p#first { color: blue }

結果的に，クラスを使用するとほとんど同様の設定方法となっており，HTMLファイル内では「class=」の代わりに「id=」を使用し，外部CSSファイルの中では「.クラス名」の代わりに，「#ID名」を使用する．ただし考え方は異なり，クラス名はあくまで書式設定のひとつのグループを表しているため，HTMLファイル中で何度も別の場所で同じクラス名が指定されることがありうる．しかし，ID名はHTMLファイル中でただ一ヶ所でしか同じID名のものが存在しないようする必要がある．(同じID名が2箇所以上で使われると，本来はエラーとなるべき．)

スタイルシート専用のHTMLタグ

スタイルシート専用のタグとして，<div>と<span>が用意されている．このタグは，HTMLとしてはまったくの無意味なタグであり，何も効果がない．しかし，次のようにHTML中である範囲を指定するためだけに用いられる．

何かの文章，<span>何かのキーワード</span>が書かれている内容の文章

divも同様にある範囲を<div>と</div>で囲って指定する．spanとdivの違いは，指定範囲が改行を含まない場合にspan，改行を含む範囲を指定する場合にdivを用いるように説明されている．

HTML上では効果のないタグだが，指定範囲に対してスタイルファイルに書かれている特定のクラスを指定することが可能である．例えばスタイルファイルに次のようにかかれており

span.red {
  font-color: red;
}
span.green {
  font-color: green;
}

そしてHTMLファイルの方に次のように書かれていると

なにか<span class="red">キーワード<span>を含む<span class="green">適当</span>な文章です．
なにかキーワードを含む適当な文章です．

このように表示される．これは，「span.クラス名」のスタイルを定義して，他のタグのときと同様に，spanのクラスを指定してスタイルを適用している．

参考になるサイト

詳細は様々なWebページで解説されている。例えばとほほのスタイルシート入門 など。googleでスタイルシートについて検索して探して見よ。

色などを指定するだけで，自動的にcss記述を生成してくれるサイトもある．何もないページ。[CSSの自動作成と解説]

画面レイアウトのテクニック

ひとつのWebページは，メインとなる内容だけでなく，メニュー・ランキング・更新リスト・ページのヘッダー部分やフッター部分など複数のコンテンツから構成されるはずである．これらを画面上にどのように配置するかを考えることを画面のレイアウトと呼ぶ．自分の頭でデザインした画面のレイアウトを，実際にWebページに適用するためには，次のテクニックのうち，どれかを利用することになる．

  • フレーム分割機能
  • テーブル機能
  • CSS
  • SSI

フレーム分割によるレイアウト方法

本来，素直に画面レイアウトを実現する機能としてフレーム分割機能があったが，現在では完全に廃れた機能である．

フレーム分割は，FRAMEタグを使って任意なレイアウトで画面を分割，各分割画面にメニューやランキングなどの各コンテンツ用のページを表示できる機能である．詳細はここでは説明しない．この方法が作成者から見た場合一番簡単でしかも便利である．

しかし，印刷やブックマーク時などに分割ページではうまく機能しないなど利用者から見た場合に不便であり，さらにGoogleやYahooなどの検索エンジンがフレーム分割されたWebページを苦手としているため，SEO対策(本ページの最後で説明)の観点からも最悪とされる．現在の商用サイトを見ればわかるが，フレーム分割を使用しているサイトは，ただのひとつも存在しない．

テーブル機能によるレイアウト

強引にページ全体を表とみなして，画面をセル単位に分割してしまい，各セルにコンテンツを記述する方式である．強引であるが，デザイナーの思うどおりに細かい調整が可能であるため，一時期(90年代後半)よく利用されていた．しかし，テーブル機能を利用しているため，ページ中のいたるところにタグが頻繁に使用され，HTMLファイルを難読なものにする欠点がある．

あるセルにはインラインフレーム機能を用いて別ページの内容を埋め込むこともでき，フレーム分割と同様に合理的なページ更新も可能である．ただし，SEOを考慮した場合には，インラインフレーム機能を用いている場合かなり不利となる．このため，無駄を承知でヘッダーやフッターのような同じ内容を，全てのページにコピーすることが行われていた．

テーブル機能を用いた強引なレイアウト手法は，結局2000年以降に各ブラウザがスタイルシート機能に対応するようになると，次第に廃れていった．

CSSを用いたレイアウト

現在の主流のレイアウト方式である．CSS機能を利用して，画面レイアウトを行う．例えば次のように画面を4分割するためにはdivタグを用いてページを4分割する．

<body>
<div id="page">
  <div id="header">
    ここがヘッダー
  </div>
  <div id="main">
    ここがコンテンツ
  </div>
  <div id="menu">
    ここがメニュー
  </div>
  <div id="footer">
    ここがフッター
  </div>
</div>

外部CSSファイル中では次のように指定すればよい．ここでのポイントは「float:」指定により，mainとmenuを左と右に寄せることで画面分割を行っている．

#page{width:750px;text-align:left;margin:0px auto;}
#header{width:750px;margin:0px 0px 15px 0px;}
#main{float:left;width:590px;}
#menu{float:right;width:150px;padding:0px 0px 0px 10px;}
#footer{clear:both;width:750px;margin:15px 0px 15px 0px;}

これ以外にも，CSS機能を使って様々なレイアウトやデザインを実現するためのテクニックが広く知られている．自分で調べてみること．

CSSを利用した画面分割などのレイアウト方式では，例えばメニュー部分などの中身は，全ページに同じものをコピーしないとならない．手動でページを作成する場合には，修正の手間が大変となる．

また，多くの商用サイトやブログサイトなどでは，Webシステム，Webアプリケーションを利用したページ作成が主流となっている．ここでいうWebシステムとは，CMS(Contents Management System)と呼ばれるもので，利用者側は自分の希望するブラウザ上でレイアウトを選択するだけで，自分専用の画面構成のページを作成できる．例えば，全ページにコピーする必要のあるメニュー部分なども，一度自分で内容を作成すれば，自分の全ページに自動的にコピーしてくれる．ページ作成者(ユーザ)は単に本文の内容だけを修正したり，メニュー部分だけを修正するだけで済むようになっている．

SSIの利用

SSIは，Server Side Includeの略で，専用のコマンドをHTMLページ中に埋め込んでおくと，Webサーバがページデータを送信する段階で，埋め込まれた場所に別ページの内容に挿入した形で発信してくれる．ただし，Webサーバ側がこの機能に対応するように設定されている必要があり，どのサーバでも自由に利用できる機能ではない．

SSIでは，CSSのメニュー部分のように，全ページにコピーしなければならない記述があった場合に対応するために，サーバ側の処理の段階で任意のページに別ファイルの内容を取り込むことができる．例えば次のようなコマンドがある．

<!--#include file="メニューファイル名" -->

このコマンドをすべてのHTMLファイルのメニュー部分に埋め込んでおけば，別のファイルに存在している実際のメニュー内容を取りこめる．このファイルのメニュー内容を書き換えるだけで，自動的に全ページのメニュー内容を更新できたことになる．

ただし，Webサーバ側がSSIに対応してくれないと利用できない．残念ながら大学のサーバは未対応である．

詳しくはとほほのSSI入門などのページを参照すること．

フリーのCSSデザインテンプレートについて

プロやアマチュアのデザイナーなどが作成したセンスの良いWebデザインのための外部CSSファイルが，無料で公開されていることがある．検索サイトで「無料CSSデザインテンプレート」や「Free CSS」などで検索してみるといろいろなサイトが存在する．中には宣伝目的やあやしいサイトも多いので注意が必要であるが，いくつか数多くのデザインテンプレートをダウンロードできるサイトがあるので探してみるとよい．

サイトにもよるが，CSSファイルだけではなく，必要なアイコン画像データなどパックされた圧縮ファイルとして提供されていることが多い．ダウンロードした圧縮ファイルを自分のWebページ用のフォルダに展開し，自分のサイトの状況に合わせて必要に応じて書き換えて使用することになる．

これらサイトのCSSファイルは，無料を謳っていても利用するにあたり使用条件を課していることがあるので，各サイトあるいはダウンロードした中に含まれているライセンスなどの文書を熟読すること．よくある使用条件としては，「ヘッダやフッタ内に最初から挿入されている作成者のWebサイトへのリンクを消さないこと」などがある．

(参考)SEO対策について

SEO対策とは

SEO(Search Engine Optimization: サーチエンジン最適化)対策とは，作成したWebページがGoogleやYahooなどの検索エンジンでの検索結果でより上位に表示されやすくなるように調整をはかる対策のことをいう．

現在のインターネット上のWebページは，最初からURLを知らないページにアクセスする場合，検索エンジンで検索されることによってアクセスされることがほとんどである．せっかく自分が作成したWebページを，より多くの人に見てもらうためには，そのWebページで伝えたい内容のキーワードで，他のページよりも検索結果の上位に表示されないといけないことになる．特に，商業用のページの場合には検索結果の順位は死活問題とさえ言われている．

サーチエンジンは，世界中から収集したWebページの情報を整理して格納しておき，ユーザが入力した検索キーワードに対して，各ページの関連度や重要度を計算して各ページの優先順位を決定し，その順番にリスト表示する仕組になっている．各ページの優先順位を決定するアルゴリズムによって，ユーザが探しているページを簡単に見つけ出せるかどうかが決まることになるため，GoogleやYahooなど各社は優秀なアルゴリズムを開発するために必死に競争している．このアルゴリズムは，当然のことながら各社の企業秘密とされ，公開されていない．しかし，特定のキーワードと実際の表示順位の関係から，いろいろ推測されている．

SEO対策の例

優先順位決定アルゴリズムの推測結果や公開されている情報から，検索順位をあげるために一般的に行われている対策は次のようなものである．

  • フレーム分割は使用しない．(文書情報を検索エンジンが取得しにくいため)
  • H1など見出しをきちんと付ける．(ちゃんと文章の構造が分かるように書式を設定する)
  • ヘッダなどにちゃんと必要情報を載せる．
  • 重要な情報は，ページの最初に載せる．(その情報を検索されやすくするため)