CSSを用いたWebアイテム構築

リンクの装飾(1)−CSSで文字列を彩る:準備編−

written by Moonstone

はじめに−ボタンやアイコンをテキストだけで作れる?!−

ボタンやアイコンを自分で作れたら…
 Webページを構築するにあたって、ボタンやアイコン−以下「Webアイテム」と称します−は重要な位置を占めます。WebページにおいてWebアイテムは標識や誘導灯のようなものです。「此処から続きを見られるよ」とか閲覧者を適切に誘導し、Webページの内容を提示したいところですが、綺麗なWebアイテムがあるとそれだけで閲覧者の目を引きますし、その分誘導もしやすくなります。
 しかし、Webページに合ったWebアイテムを作成するのはなかなか困難です。ボタンやアイコンの作成にはデザインの知識や技術が必要です。イメージどおりに作成するにはレタッチソフトの使い方を把握していることも求められます。現在は無償でボタンやアイコンを配布しているWebページも多数存在しますから、それを利用するのも手です。
 しかし、高価なレタッチソフトを購入したり、使い方を覚えたりしなくても、ブラウザとテキストエディタがあればそれなりのWebアイテムが出来るとしたらどうでしょう?マウスカーソルを当てると(マウスホバー)光ったり形が変わったりすることが、イメージを複数作らなくても出来るとしたら?一般のWebアイテムに見られるグラデーションやエンボスも出来るとしたら?こういったことが、今は可能です。そのためにはCSS(Cascading Style Sheet)なるものを使う必要があります。
CSSは難しくない?
 CSSと聞いて思わず尻ごみした人も居るでしょう。「色々なパラメータがあるんだよね?」「何だか難しいって印象…」「何をどうすれば良いのか分からない」…こんな疑問や不安を抱いたかもしれません。以前CSSに触れて挫折した人だと「paddingとmarginの区別がつけられない」「クラスって何だか分からない」「CSS3?何それ?」といった一種のアレルギー反応を呈したかもしれません。
 いずれも無理のないことです。CSSの解説は書籍でもWebページでも多々ありますし、サンプルも豊富ですが、「こういうものを作りたい時はどのパラメータを使えば良い?」といった具体的な疑問にはなかなか答えてくれません。CSSはWebアイテムの制作だけでなく、Webページのレイアウトにも使えますし、JavaScriptというブラウザで実行するプログラムと組み合わせることで、多彩でダイナミックな動きを持たせることも出来ます。そのためにはパラメータの個別解説とサンプルが必要で、それをどう使うかはユーザー次第という面がありますから、個別の回答に答えることは難しいのです。
 此処では、Webアイテムに絞ってCSSの使い方を解説します。そしてCSSのパラメータについても、「こうすることでこんな変化が見られる」といったことを重点的に解説します。「CSSでこういうことが出来る」と分かったら、書籍やWebページを巡って深く調べれば知識は深まるでしょう。提示したソースリストを入力して変化を見て、パラメータを弄ってどう変わるか試す。これだけでも何となくCSSが分かってくるでしょう。きっかけはそれで十分です。

Chapter 1:まずは準備をしよう

ソフトウェアを準備しよう
 流石に何もないところから何も出来ません。魔法使いじゃないんですから。まずは道具を準備しましょう。用意する道具(ソフトウェア)は以下のものです。
  • ブラウザ
    表示に使用します。此処ではFirefoxを使用します。理由は後述します。全てのソースリストを反映するにはFirefoxかSafariが必要です。
    Firefoxは次のURLから無償でダウンロードできます:http://mozilla.jp/firefox/
  • テキストエディタ
    ソースリストを入力します。自分の使いやすいもので構いません。
    Windowsならメモ帳でも構いませんが、タブが使えるものだとウィンドウを探さなくて済むので効率が良いでしょう。以下にソフトウェアの一部を示します。
    サクラエディタ(フリーウェア):http://sakura-editor.sourceforge.net/
    秀丸エディタ(シェアウェア:4200円(税込)):http://hide.maruo.co.jp/software/hidemaru.html
 これだけです。Firefoxを使うのであれば、以下のアドオンをインストールすると、非常に便利です。全て無償です。実際に使う場面もあります。
  • Firebug:有名なWeb開発用アドオン。非常に高機能。FirefoxでのWebページ制作には必須と言っても過言ではない。
    https://addons.mozilla.org/ja/firefox/addon/firebug/?src=cb-dl-users
  • Web Developer:有名なWeb開発用アドオン。やはり非常に高機能。メニューから様々な設定が可能。
    https://addons.mozilla.org/ja/firefox/addon/web-developer/?src=cb-dl-users
 これでソフトウェアの準備は完了です。開発に必要なソフトウェアを全て無料で揃えられるのはありがたいことです。
ファイルとフォルダを準備しよう
 道具(ソフトウェア)が揃ったら、次は材料(ファイルとフォルダ)を準備します。実際にソースコードを入力して試すことが重要ですので、混乱を防ぐために以下の要領で専用のフォルダを作ってください。ちなみにWindowsを対象にしています。Macは滅多に使わないので不明です…。
  • Cドライブの直下に「webpractice」というフォルダを作ります。此処に全てのフォルダとファイルを集約します。
  • 「webpractice」フォルダの下に、「sheets」フォルダを作ります。ここにCSSファイルを集約します。
  • テキストエディタで以下のソースコードを入力して、「websample001.html」という名前で「webpractice」フォルダに保存します。
    文字列部分を全て選択してコピー&ペーストすると楽でしょう。作成した「websample001.html」はHTMLファイルのテンプレートに出来ると思います。
    保存の際、文字エンコードはシフトJISであることを確認してください。Windowsのメモ帳では確認不要です(シフトJISのみです)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN " "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSを用いたWebアイテムのサンプル</title>
</head>
<body>

</body>
</html>
 此処までの段階で、Cドライブの直下に、ファイル「websample001.html」と「sheets」フォルダだけが存在する「webpractice」フォルダが出来た筈です。
以降の解説はこのフォルダ攻勢を前提に進めていきます。
ひとまずブラウザでHTMLファイルを表示させてみよう
 HTMLファイルは出来ましたか?テキストファイルですからテキストエディタで編集できますが、ブラウザから読み込むとブラウザのレンダリングエンジンというファイルの解釈機能が働いてWebページとして表示されます。「当たり前じゃないか」と思われるでしょうか。そうです。この「当たり前」があるから、特別な知識や使い方の習得が必要ないテキストエディタで様々な情報をWebページとして簡単に発信出来るんです。これが特別なソフトウェアを必要としていたら、Webページは此処まで一般的にはならなかったでしょう。
fig.1:websample001.htmlを表示させた様子
 さて、いよいよWebアイテムを作ります。まず、Chapter 1で用意した「websample001.html」をブラウザで表示してみましょう。ブラウザのメニューで「ファイル」→「ファイルを開く」などでも良いですし、ファイルをブラウザにドラッグ&ドロップでも構いません。すると、fig.1のようになったと思います。
 まっさらですね。よく見ると、ウィンドウのタイトルバー(一番上)に「CSSを用いたWebアイテムのサンプル」と表示されていますね。「まっさらのページなんて表示させてどういうつもりだ」とご立腹でしょうか。これがきちんと表示出来ないと、実は大変なことです。ブラウザがHTMLファイルをきちんと解釈出来ないんですから。
 問題なかったら、本題に入ります。此処で作るWebアイテムはイメージを使わないので、文字や記号はHTMLで書きます。サイズや色は後で幾らでも変更出来ますから、まずどういうWebアイテムを作るか−種類、形状、サイズ、文字のレイアウトといった基本的なことを纏めておきましょう。漠然としていると作り難いですから。
  • 種類:ボタン
  • 形状:長方形
  • サイズ:横96px(ピクセル)×縦48px(ピクセル)
  • 表示文字:「メイン」と「MAIN」を横方向に並べる
  • 色:背景色は深めの緑、文字は日本語が白でアルファベットが茶色
 …こんな感じで纏めます。見栄えが気に入らないとかは、後で修正します。…え?センスの問題は大丈夫か?…その辺は許容してください。
Webアイテムの骨組みを作ろう
 上記で纏めたWebアイテムを、HTMLだけで作るのは流石に無理です。HTMLで出来るのは、文字(列)の表示と箇条書き、改行と表組みくらいです。以前は複雑なソースを書くことでHTMLだけで色々な表示をさせていましたが、やはり修正や保守管理が大変なので、現在はレイアウトや配色などはCSSに任せる、HTMLとCSSの分業体制が主流になっています。筆者もWebページ(つまりは「芸術創造センター」)の管理運営の中で同じ変遷を辿りました。
 HTMLで必要な知識は、表示の仕方を定義する「タグ」です。特にCSSと組み合わせる際には、「div」タグと「span」タグが重要な位置づけにあります。Webに無数にあるCSSの解説でも、HTMLソースにこの2つのタグが頻繁に登場します。
 「div」タグと「span」タグの相違は別の機会にでも説明するとして(このページは実例を通じてCSSの使い方を習得するのが目的ですから)、これらを使ってWebアイテムの骨組みを作りましょう。「websample001.html」に以下のようにソースを追加します。青色の部分だけでOKです。上下の改行も任意でOKです。改行タグである「br」タグを付けなければ、ブラウザはHTMLソースの改行を無視します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN " "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSを用いたWebアイテムのサンプル</title>
</head>
<body>

<div class="item01">
<span class="text-jp">メイン</span><span class="text-en">MAIN</span>
</div>

</body>
</html>
fig.2:ソースを追加したwebsample001.htmlを表示させた様子
 間違いがないことを確認してください。間違っていてもブラウザはエラーのダイアログ(プログラミングを経験した人なら分かる、とても嫌な表示)を出しませんが、表示がおかしくなるのは避けられないでしょう。見た目も勿論ですが精神的にもダメージが大きいので、特に「<」と「>」が「,」(コンマ)と「.」(ピリオド)になっていないか確認してください。SHIFTキーを使う関係で、この間違いは意外と多いんですよ。いや、本当に。
 確認出来たら、ブラウザで表示させてみましょう。表示の更新でOKです。今度はfig.2のようになったと思います。左上隅に「メイン」と「MAIN」が並んで表示されていると思います。それでOKです。骨組みですから、余分なものがあるとその分修正が大変になります。
 次からついにCSSの出番です。

Chapter 3:CSSで表示を変化させてみよう

CSSファイルを作ってHTMLファイルに読みこませよう
 Chapter 1で空の「sheets」フォルダを作った筈です。このフォルダの中に「webcss001.css」というファイルを作りましょう。テキストエディタで新規ファイルを作成してから以下のソースを入力して、「webcss001.css」というファイル名で保存します。保存場所が「sheets」フォルダの中であることを確認してください。保存場所を間違うと、以降HTMLファイルと組み合わせてもせっかく作ったCSSが効果を発揮しません。
*{
	margin:0;
	padding:0;
	list-style:none;
	border:none;
}

/* ウィンドウ全体の体裁 */
body{
	font-family: "MS P明朝","MS 明朝",Times New Roman,arial,helvetica,serif;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	background: #ffffe0;
	color: #000000;
}
 ソースの空白はいくつでも構いません。ただし、必ず半角で入力してください。他も「MS P明朝」「MS 明朝」以外は全て半角入力です。「MS P明朝」「MS 明朝」の間のスペースも半角です。少々ややこしいですが、「CSSのソース入力は基本的に全て半角」と覚えておけばOKです。
 あ、そうそう。「/*」と「*/」で囲まれた行はコメントです。入力しなくても全く支障はありませんが、読みやすいように適時コメントを入れておくのが、自分のためです。覚え始めの頃は、少し時間を置くと簡単に忘れてしまいます。この部分は何をしているところか書いておくのは、記憶を引っ張り出す有力な手段です。
 さてさて、CSSを作ったからといって、HTMLファイルは自動的にCSSを組み込んではくれません。そんな機能があっても、複数のCSSがあったら識別出来ないでしょうし、識別が失敗したらレイアウトが悲惨なことになってしまいます。ですので、「websample001.html」に以下の青色部分を追加してください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN " "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSを用いたWebアイテムのサンプル</title>

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

</head>

<body>
<div class="item01">
<span class="text-jp">メイン</span><pan class="text-en">MAIN</span>
</div>

</body>
</html>
fig.3:ソースを追加したwebsample001.htmlを表示させた様子
 ここまで準備が済んだら、ブラウザで表示させてみましょう。すると。fig.3のようになったと思います。おや?HTMLソースに1行追加しただけで、全体がクリーム色になって、フォントも変わりましたね?この変化は上記で作成したCSS「webcss001.css」の効果です。
 HTMLソースに追加した部分で、CSSファイル、此処では「webcss001.css」を読み込みます。hrefの「"」に囲まれた部分でCSSファイルの位置を指定します。位置の指定の仕方は、このタグを書いたHTMLファイルがあるディレクトリを基準にした「相対指定」または「相対パス」です。ルートディレクトリ(今はC:\)から書く方法を「絶対指定」または「絶対パス」と言います。相対指定はディレクトリをルートから書かなくて良いので便利ですが、ディレクトリ構造が複雑だと間違えやすくて、「ファイルを用意したのに読み込まれない」といったトラブルの原因になりやすいものです。
 この「webcss001.css」のソースは、実際に「芸術創造センター」の各グループや公開作品で適用しているCSSの冒頭部分とほぼ同じです。パディングとマージンを全て0にリセットする情報と、以前HTMLのみでWebページを作っていた時代に「body」タグに記載していた、Webページ全体のフォントや背景色を決める情報です。この詳細の解説は別の機会に譲って、Webアイテムの装飾をしていきましょう。
Webアイテムの基本を形作ろう
 では、いよいよWebアイテムを形作っていきます。前に「div」タグと「span」タグがCSSとの組み合わせで重要と述べましたが、それも感じられると思います。
 まず、背景色とサイズを指定しましょう。背景色は深めの緑で、サイズは96px×48pxでしたね。「webcss001.css」に以下の青色部分を追記してください。
*{
	margin:0;
	padding:0;
	list-style:none;
	border:none;
}

/* ウィンドウ全体の体裁 */
body{
	font-family: "MS P明朝","MS 明朝",Times New Roman,arial,helvetica,serif;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	background: #ffffe0;
	color: #000000;
}

/* Webアイテムの背景 */
div.item01 {
	width: 96px;
	height: 48px;
	background: #00a000;
}

fig.4:CSSソースを追加したwebsample001.htmlを表示させた様子
 入力したら保存して、ブラウザに読みこませるか表示を更新するかします。fig.4のようになると思います。何だかそれっぽくなりそうですね。
 上記追記部分は、英語がちょっと読める人なら何となく何をしているか分かると思います。パラメータ(正式名称はアトリビュート(属性)ですが、この方が分かりやすいと思います)を書きだすと以下のようになります。
  • 「width」:横幅(ここではpx単位で指定)
  • 「height」:立て幅(ここではpx単位で指定)
  • 「background」:背景色をR(Red:赤)、G(Green:緑)、B(Blue:青)の順で指定。
    値は16進数(0〜9とA〜Fでひと桁を表すこと。10進数だと0〜9で2進数だと0と1)で表記する。
 ですので、これらのパラメータの値を操作すると、幅広になったり縦長になったり、背景色が白やピンクになったりします。色々試してみてください。テキストエディタで変更して(保存をお忘れなく)ブラウザを更新するだけで変化が分かるのも、HTMLとCSSの特徴の1つです。
 勿論、他にもたくさんのパラメータがあります。ですが、全部覚えるのは大変ですし、忘れたら書籍なりこのページのような参考ページを見たりすれば良いことです。それに此処では「どのパラメータを使えばどんな変化が出るか」を中心に解説するので、よく使うか使う必要があるパラメータを順次使いながら紹介していきます。
 では、次は文字の色を設定しましょう。日本語が白でアルファベットが黄色でしたね。「webcss001.css」に以下の青色部分を追記してください。
*{
	margin:0;
	padding:0;
	list-style:none;
	border:none;
}

/* ウィンドウ全体の体裁 */
body{
	font-family: "MS P明朝","MS 明朝",Times New Roman,arial,helvetica,serif;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	background: #ffffe0;
	color: #000000;
}

/* Webアイテムの背景 */
div.item01 {
	width: 96px;
	height: 48px;
	background: #00a000;
}

/* Webアイテムの文字(日本語) */
span.text-jp {
	color: #ffffff;
}

/* Webアイテムの文字(アルファベット) */
span.text-en {
	color: #ffff00;
}

fig.5:CSSソースを追加したwebsample001.htmlを表示させた様子
 追記したら保存してブラウザに読みこませるか表示を更新するかしましょう。fig.5のようになると思います。パラメータを書きだしておきます。
  • 「color」:テキストの色をR(Red:赤)、G(Green:緑)、B(Blue:青)の順で指定。
    値は16進数(0〜9とA〜Fでひと桁を表すこと。10進数だと0〜9で2進数だと0と1)で表記する。
 「background」と指定の仕方は全く同じです。ですので、「background」とごちゃ混ぜにしないように気を付けてください。あと、HTMLタグを知っている人だと、「color」の前に「font」を付けてしまいそうになるかもしれませんが、「color」だけでOKです。余分なものを付けるとパラメータ自体が認識されませんのでご注意を。
次へ進む
-Go to Next page-
Web技術チームへ戻る
-Return Web technology team-
PAC Entrance Hallへ戻る
-Return PAC Entrance Hall-