アクセス向上大失敗 www.igros.net
Last updated 2004/8/15
コメントバック 対応

スタイルシート -ホームページリニューアル-

次頁 > ユーザビリティ
[PR]特集 Amazon.co.jp レコメンドコンテンツ



この辺りで少し一服をかねてまとめたいと思います。
と、言いつつ、リニューアルうぬんの基本は以上で終わったかもしれませんが。

今ではホームページ作成ツールの完成度が上がり、自分は知らずとも、見栄えや簡単なアクション(動的変化)を表現するために、スタイルを用いるケースが多くなりました。
私のように、相も変わらずメモ帳で作成している人間には、意識しないとなかなか触れる機会がありません。
そもそも、スタイルシートの本来目的は? と考えますと、SGMLの世界まで戻ってしまうような、妙なうんちくになりそうなので、止めておきたいと思いますが、今回のリニューアルに限った整理です。

1.ページのフォントサイズを任意に設定する。
2.ページのフォントカラーを任意に設定する。
3.ページの行間を任意に設定する。
以上、たった3点です。

スタイルシートの設定(記述)方法は色々ありますが、今回のリニュールのように、その設定を全てのページへ共通に与える場合、以下の方法が簡単です。
まず、スタイルだけを記述したページを作成します。
作成したスタイルページを各HTMLファイルが呼び込むようにします。
これなら、一つのスタイルページを作るだけでよく、しかも、その内容を変更すれば、すべて一斉に変わるわけですから、一石二鳥ですね。

余談ですが、この考え方はとても重要なんです、特にプログラムを組んだりする人は、言葉だけのオブジェクト指向に惑わされる事無く、インスタンスやクラス、アトリビュートにリソースファイル、しっかり基本的概念を抑えましょうね。
システム設計をする際も同じく、オブジェクト感覚でファンクションやプロモーションを設計するだけで、飛躍的にフレキシブルなシステム構築が可能になります。(以上、余談でした)

...、では、今回使っているスタイルを掲載したいと思います。
期待に反して? たったこれだけです。
/* Copyright(C) 2001-2002 アクセス向上大失敗 All Rights Reservd. */
/* Last updated 2002/8/13 */
body, td { font-size: 92%; color: #2E2E2A; line-height: 140%; }
/* Style Sheet */

/* で始まっている行はコメント文ですから、あっても無くても構いません。
BODY(本文全体)とTD(テーブル内のテキスト)で使われるテキストに対し、
font-size: 92%;
color: #2E2E2A;
line-height: 140%;
と設定しているだけです。(それぞれの意味は前のページを参照してください)

例えば、このファイルを style.css と言う名前で保存した場合、各HTML内に以下のように書きます。
<link rel=stylesheet type="text/css" href="style.css">

TITLEは特に指定する必要は無いと思います。
挿入位置は<body>タグの上ならどこでも良いと思います、私は</head>の上に書いています。
いたって簡単ですね。

このページは、上記スタイルとまったく同じモノを読み込んで表示していますが、読み込まない場合はどんな感じになるでしょう。
良かったら参考までに比較してみてください。

スタイルシートを用いないこのページ
雰囲気、違いますよね?
このページ、ブラウザの 表示-文字のサイズを 大 にするともっと良くわかるかもしれません。


<<< トップ << テーマトップ < 前頁次頁 > ユーザビリティ >>

www.igros.net
[PR]特集 Amazon.co.jp レコメンドコンテンツ



Copyright(C) アクセス向上大失敗 All Rights Reservd.
version2.0