m-School (エムスクール)は、駿河台学園グループが運営する
法人向け研修トレーニングセンター、およびレンタル教室・会議室です。

2009年10月06日

各ブラウザーのデフォルトスタイルを揃えるリセットCSS:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

各ブラウザーのデフォルトスタイルを揃えるリセットCSS


前回はフォントサイズを揃える方法でしたが、今回は様々な要素のデフォルトスタイルを揃えたいと思います。

前回も書いたとおり、ブラウザーは最初からデフォルトスタイルを持っています。様々な要素のmargin,paddingなどなどが微妙に違うため、これらを一度すべてリセットをかけて統一し、CSSのコーディングをする人がスタイルを書き直す、というのがリセットCSSの考え方です。

いろいろなリセットCSS


リセットCSSの書き方にはいくつかのバリエーションがあります。

全称セレクタでリセットする


全称セレクタ(ユニバーサルセレクタ)を使って、あらゆる要素を一括で設定する方法です。
* {
margin: 0;
padding: 0;
font-family:
"メイリオ", Meiryo,
"ヒラギノ角ゴ Pro W3",
"HIragino Kaku Gothic Pro W3",
"HIragino Kaku Gothic Pro",
Osaka,
"MS Pゴシック", "MS P Gothic",
sans-serif;
}

例えばこんな感じです。

コードも短くて楽といえば楽ですが、個人的にはあまりオススメではありません。

この方法は「ページ内のあらゆる要素をリセット」するので、逆をいえば「ページ内のあらゆる要素をスタイル」しなくてはいけなくなります。それによりほぼ完璧にズレのないページは作れるかもしれませんが、デフォルトスタイルのままでもいいような部分までスタイルしなくてはいけなくなります。また、全ての要素にスタイルを適用するため、レンダリング速度の低下も懸念されます。

限定した要素のみリセットする


全称セレクタであらゆる要素をリセットしてしまうのがまずいのであれば、自分で決めた要素だけリセットすればいいということで、要素を1つ1つ指定する方法です。
html, body,
h1, h2, h3, h4, h5, h6,
div, p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td {
margin: 0;
padding: 0;
font-family:
"メイリオ", Meiryo,
"ヒラギノ角ゴ Pro W3",
"HIragino Kaku Gothic Pro W3",
"HIragino Kaku Gothic Pro",
Osaka,
"MS Pゴシック", "MS P Gothic",
sans-serif;
}

例えばこんな感じです。
リセットしたい要素は追加、したくない要素は削除というようにして、自分でカスタマイズできます。
img {
border: 0;
}

このようにimg要素を追加してもいいですね。

こういったものをまとめてreset.cssとかdefault.cssのような形で用意しておくと、汎用性があって便利ではないかと思います。

参考:CSSファイルの分割:CSS 3分コーディング

YUIのReset CSSを使う


前回ご紹介したYUI Libraryでは、フォントのリセットだけではなく、デフォルトスタイルのリセットCSSも公開されています。

考え方は先述の限定した要素のリセットと同じですが、非常に細かな部分まで設定されています。

使い方は前回同様に、下記のようにリンクするだけです。
<!--XHTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" />
<!--HTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">


これをそのままリンクで使ってもいいでしょうし、コードを参考に自分用に最適化したリセットCSSを作ってもいいですね!

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 17:44
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年09月15日

各ブラウザーのフォントサイズを揃えるYahoo! UIを使う

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

各ブラウザーのフォントサイズを揃えるYahoo! UIを使う


色々なブラウザーでの見え方を調整する、というのはページを作っていて苦労する点ベスト5には入るぐらいメンドクサイことです。

なかでもフォントサイズというのは、各ブラウザーが持っているデフォルトスタイルによって「微妙な」違いがあるため、なかなかやっかいです。

それをがつんと一発で解決してくれるのが、今回ご紹介するYahoo! UI LibraryのFont CSSです。

まず、フォントサイズの指定方法についてですが、単位をpx(ピクセル)としてサイズを固定してしまう方法と、emや%をつかった相対的なサイズにする方法が考えられます。

pxで固定してしまうと、ユーザーがブラウザーの設定で文字サイズを標準以外の設定にしても見た目が固定になってしまうため、アクセシビリティ的にあまりよくありません。

そこで、%でのサイズ指定かつ、どのブラウザーでも同じように見せるためにFont CSSを使用します。

※以下余談
最近のブラウザーは「文字サイズの拡大縮小」ではなく「ページの拡大縮小」に移行しつつあります。この場合、ページ全体が拡大縮小されるため、pxで指定されていても文字も大きさが変更されます。これがスタンダードとして確立されればフォントサイズに関する悩みは消えるかも。

Font CSSの使い方


まず、link要素で以下のCSSファイルへリンクする、またはCSSファイルをダウンロードして使用(linkやコピペで)します。

<!--XHTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<!--HTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css">


これで完了です。

これができたら、あとは下記の対応表にしたがってCSSでフォントサイズを指定すればOKです。
指定したいサイズ(px)実際に指定するサイズ(%)
10 77
11 85
12 93
13 100
14 108
15 116
16 123.1
17 131
18 138.5
19 146.5
20 153.9
21 161.6
22 167
23 174
24 182
25 189
26 197

たとえばこんな感じ。
p {
/* 12pxと同等になる */
font-size: 93%;
}

このFont CSSはBSDライセンスで配布されていますので一応ご注意ください。

BSDライセンスとは


BSDライセンスとは、オープンソースのライセンスの1つで、使用にあたっては配布元は「無保証」ですが、再配布する際は著作権だけ表示しておけばよいというものです。なので、このFont CSSのコードをコピペして使うときは著作権の表示だけお忘れ無く!

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 17:23
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年09月09日

HTML5とCSS3はプラグインを超える!?:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

HTML5とCSS3はプラグインを超える!?


目下策定中のHTML5やCSS3では、非常に大幅な変更が予定されています。今まではFlash PlayerやSilverlightなどのプラグインが必要だったビデオやアニメーションも、HTMLとCSSのコードだけでできるようになってしまいます。

デモページをつくってみたのでご覧下さい。
※閲覧にはHTML5,CSS3に対応したブラウザーが必要です。
お勧めのブラウザはSafariChrome Dev版(Subscribing to a ChannelのDev channelからDLできます)

標準化された技術という面では、FlashやSilverlightがいかに普及してもHTMLやCSSには及びません。これからはビデオやサウンドなどのメディアはHTML5で、アニメーションやインタラクティブ性はCSS3、JavaScriptで!という時代が…!

ということで、HTML5とCSS3はプラグインを超えるかも!などと言ってみたものの、そんなことはありません。

Flash Player、Silverlightにはデータベースサーバーやアプリケーションサーバーとの連動、著作権管理など、強力なメリットがあります。また、Flash、Blendといったオーサリングツールがある点も見逃せません。

ですが、プラグインなどの環境に依存しない、標準化された技術で実現できる幅が大きく広がることは間違いありません。まだビデオコーデックなどの問題は多々ありますが、近い将来の勧告に、今から備えておくと「差」を付けられるのではないでしょうか。

では次回もお楽しみに。
posted by こう at 10:51
連載:CSS 3分コーディング | コメント(1) | トラックバック(0)
2009年08月26日

CSSファイルの分割:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSSファイルの分割


先日の講座で少し話題にのぼったので、今回はCSSファイルをわけて作る方法をご紹介します。

CSSのコード量が増えてくるとどうしても管理が大変になります。コメントをどんなに駆使しても何百行もあればどこに何が書かれているのか見つけるだけでも大変です。

そこで、CSSファイルを複数にわけて管理するという手段がよく取られます。

link要素と@import


複数のCSSファイルを1つのHTMLファイルに対して適用するには、link要素を複数使う、またはCSSで@importを複数使う方法があります。

どちらでも見た目は同じ結果を得られますが、管理の効率を考えると、@importのほうがよいかもしれません。

CSSファイルをlink要素でリンクする、または@importで読み込む

上図のように、インポート用のCSSがあれば、HTMLファイルのソースコードをすっきりさせることができます。CSSファイルが増えたり減ったりしたときも、基本的にはHTMLファイルを編集することなく、CSSのみの変更でことたります。

@importの使い方


@importは次のように使います。
@import url("reset.css");
@import url("font.css");
@import url("style.css");

また、色々な省略方法があります。
/* 引用符を省略 */
@import url(reset.css);
/* urlを省略 */
@import "default.css";

urlを省略する際はかならず引用符が必要です。

また、@importはかならずスタイル宣言の前に記述します。ですので、@charsetの直後か、@charsetがない場合はファイルの先頭に記述し、@importを複数使う場合は、間にスタイル宣言を入れてはいけません。

この決まりを守って、先ほどの図のようにインポート用のCSSを用意し、複数のCSSファイルを読み込みます。

スタイル宣言と同様に、後から読み込んだファイルのほうが優先度が高くなります。

それを考慮して、例えば次のようにファイルを分割します。
  • reset.css
    • ブロックレベル要素のmargin,paddingなど各ブラウザーの差違をリセット。
  • font.css
    • 全体的なフォントサイズの調整など。役割的にはreset.cssやcommon.cssに含めてもよいが、YUIなど使ってる場合は独立させておく方が管理は楽かも。
  • common.css
    • サイト全体のレイアウトや要素の共通設定。
  • style.css
    • 各ページ独自のスタイル。
  • hack.css
    • IE向けのハックなど。

ファイル分割の目的は効率的な作成ですので、実際にアップロードする際には、ファイルの中身を統合してもいいかもしれません。翻せば、制作中であれば制作効率や、メンテナンス性重視で作りやすいように自由に分割してよいと思います。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 13:13
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年08月18日

CSSコーディングでハマったら…:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSSコーディングでハマったら…


黙々とCSSコードを書いていると、ときどき「正しく書いてるのにちゃんと表示されない!」ということがあると思います。いわゆる「ハマり」状態。

こうなったら書き直してみたり、怪しい場所をコメント化したり、祈ってみたり泣いてみたりと色々やるっきゃないのですが、人力よりは便利な道具をつかうべきです。

CSS Validation Serviceとは


その名前の通り、W3Cが提供する、CSSのValidation(検証)を行ってくれるWebサービスです。

これは何? 私には必要?

W3C CSS 検査サービスは、W3Cによって作られたフリーソフトウェアで、ウェブデザイナーやウェブ開発者が CSS (Cascading Style Sheets; カスケーディング・スタイルシート) をチェックするのに使うことができます。このサービスは、ウェブ上のフリーサービスを通じて使ったり、ダウンロードして Java プログラムとして実行したりウェブサーバー上で Java サーブレットとして使ったりできます。

あなたに必要かどうか? もしあなたがウェブ開発者やウェブデザイナーなら、このツールがとても役立つでしょう。このツールは、あなたのスタイルシートを CSS 仕様と比較するだけではなく、エラーやタイプミス、CSS の誤用などを発見したり、あなたの書いた CSS が使い勝手を悪くするような場合に教えてくれたりします。

"このサービスについて"


CSS Validation Serviceの使い方


使い方は非常にカンタン。まずは、CSS Validation Serviceにアクセスします。

検証手段は、
  • URLで指定して検証
  • ソースファイルをアップロードして検証
  • テキストエリアに直接入力して検証
の3つから選ぶことができます。

W3C CSS Validation Service

タブでいずれかを選択し、入力したら検証ボタンをクリック!

すると、エラーや警告がある場合には該当箇所を教えてくれます。この結果は、CSSの仕様に則っているためブラウザーの表示に問題がなくてもハックなどを使っている場合は指摘されます。

それは仕様外の記述方法なので仕方ないのですが、表示がうまくいっていないときにも役立ちます。とくにDreamweaverのデザインビューやライブビュー等は、多少のCSSのエラーを無視してしまうことがあるようで、ハマる原因になることがたまにあります。

私はさきほど「Dreamweaverでみるとwidth指定がうまくいってる」しかし「ブラウザでみるとどう見ても幅100%」という状態でハマりかけましたが、あわてずさわがずValidatorを通してみたところ、「@charset」がなぜか「@ charset」になっていました。(@とcの間に半角スペース)初歩的すぎるタイプミスで恥ずかしいですが、ハマるのって得てしてそういうモンですよね!(きっと)

そういうわけで便利なCSS Validation Service、使ったことない方にはオススメしておきます。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 11:43
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年08月10日

超便利なDreamweaverのコードナビゲータ:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

超便利なDreamweaverのコードナビゲータ


今回はDreamweaver CS4の超便利機能コードナビゲータをご紹介します。使用時・非使用時でCSSの記述効率に激しく差がでることは間違いなし。

コードナビゲータとは


コードナビゲータとは、Dreamweaver CS4から搭載された新機能で、HTMLと関連する外部ファイル(CSSやJavaScript)の編集したい箇所を一撃で開くことができます。以上おわり…ですが、これがとてつもなく便利です。

「あれ…ここのスタイルを指定してるのはどこ…?」

というような問題が起きたときにもコードナビゲータを使えば一瞬で探し出すことができます。これさえあれば自分でコーディングしたページは勿論、誰かが書いたごちゃごちゃコードも怖くない…かも。

コードナビゲータの使い方


Altキー + クリック!以上!

CSSルールが適用されている部分をAltキーを押しながらクリックするとポップアップのウィンドウが開きます。

CSSルールが適用されている部分をAltキーを押しながらクリックする

すると、そこに適用されているスタイルのセレクタがズラリと出てくるので、編集したいスタイルをクリックします。マウスオーバーすると実際のプロパティと値も見ることができるので、大量にカスケーディングしていても楽に探せます。

クリックすると該当する箇所を一瞬でコードビューで開くことができます。

セレクタをクリックするとコードビューに移動する

先ほども少し書きましたが、他の人が書いたCSSや、Spryで生成されたCSSを編集するときに最高に便利な気がします。自分で書いていればある程度HTMLとCSSの関係性が頭に入っていますが、人が作ったページのHTMLとCSSを紐付けていくのは結構メンドクサイですよね。

また、Altキーを押さなくても、入力カーソルを置いて2秒間マウスを動かさずにいるとインジケータというアイコンが表示されるので、これをクリックしてもOKです。が、もちろんAltキーのほうが素早く操作できます。

インジケータのアイコン

このインジケータはマウスを2秒止めると常に出てくるので、邪魔な場合は、コードナビゲータを開いて「インジケータを無効にする」のチェックを入れれば出ないようになります。

インジケータを無効にするチェックボックス

Flash CS4などに比べるとDreamweaver CS4の新機能はあまり派手さはないのですが、地味に、しかし確実に効率があがるようなものが多いですね。

アップデートする価値アリアリではないでしょうか。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 15:18
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年08月05日

今すぐできるアクセシビリティ対策:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今すぐできるアクセシビリティ対策


アクセシビリティとは


アクセシビリティとは、直訳すれば「近付きやすさ」になります。そこから、施設やサービスの利用しやすさ、情報へのアクセスのしやすさなどを指す言葉として使われています。とても広い意味を持っていますが、特にウェブにおいては、ウェブページの情報の得やすさ(ウェブアクセシビリティ)を指します。

ウェブページにアクセスするユーザーは千差万別です。パソコンかもしれないし、モバイルかもしれません。また、視覚などに障害があってなんらかの支援ソフトなどを使っている場合もあります。これらの様々なケースで、平等に情報を得られるページにしようというのがウェブアクセシビリティの基本的な考え方です。情報のバリアフリー化とも言われます。

あらゆるケースに完璧に対応するのはとても困難ですが、少しでも考慮しておくと全然ちがう!というポイントも多々あります。ということで今回はすぐにできる対策をご紹介します。超定番、必須の属性からいきます!

alt属性


alt属性はimg要素(など)の代替テキストとして、表示または音声で読み上げられます。ルール上は省略不可の必須属性です。特に重要なのは、視覚障害のある方への配慮です。スクリーンリーダーと呼ばれるような画面を機械音声で読み上げる支援ソフトは、このalt属性を画像の説明として読み上げます。そのため、ページ内で意味合いを持つ画像にalt属性を指定しない、または説明として不適切な内容は避けるべきです。

<img src="xxx" alt="画像の解説" />

視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007 第6節 結果―インターネットの利用状況 を見ると、インターネット利用時の課題の課題として、「代替テキストがない」「不要な代替テキストがある」という意見が多くあります。

極力わかりやすい説明を入れておくとよいでしょう。

わかりやすい見出しをつける


ページ内の各項目にはわかりやすい見出しをつけておくとよいです。

例えばこんな感じです。
<div class="nav">
<h2>グローバルナビゲーション</h2>
<ul>
<li><a href="./01.html">top</a></li>
<li><a href="./02.html">info</a></li>
<li><a href="./03.html">link</a></li>
</ul>
</div>

こうしておくことで、見出しが読み上げられるため、その項目が何であるかが明確になります。CSS適用時にデザイン的に不要である場合には、text-indent: -9999px;などの方法でブラウザの表示領域から消します。(この方法にも議論の余地はあると思いますが…。)

メインコンテンツは上部に配置する


そのページで重要な項目はHTML文書内で上位に記述しておきます。

視覚に問題がなければマウスやキーボードを使って「ざっと読み飛ばす」ことができますが、スクリーンリーダーは基本的にHTML文書を上から順番に読み上げていくため、そのページで言いたいことが早い段階で読み上げられるようにします。

これは特にアクセシビリティという観点でなくても、結論や主張がなかなか出てこない文書はわかりづらいことを考えれば妥当かなと思います。

大文字と小文字は区別する


英単語を全て大文字で表記した場合、スクリーンリーダーで意図したとおりに読まれない場合があります。たとえば、「Flash」と書けば「フラッシュ」と発音されますが、「FLASH」としてしまうと、「エフエルエーエスエイチ」と読まれてしまうかもしれません。これは略語は通常大文字でアルファベットでそのまま読むからです。たとえば、Cascading Style SheetはCSS(シーエスエス)、Chief Executive OfficerはCEO(シーイーオー)といった具合。

そこで、表記上すべて大文字で表したい場合はCSSで大文字に変更します。

<p>Flash</p>

p {
text-transform: uppercase;
}

パンくずリストを用意する


ページ数、階層が多いサイトの場合、パンくずリストがあるとユーザーがサイト内で迷わないようにすることができます。

作り方は以前の記事をご覧下さい。
CSSでリストをパンくずリストにする【1】
CSSでリストをパンくずリストにする【2】

完璧なアクセシビリティを実現するのは非常に困難ですが、ちょっとした一工夫で大きく改善できるテクニックはたくさんあります。

また、特殊な手法を使うのではなく、HTMLとCSSを正しく記述するだけでも効果は十分にはるはずです。また機会をみて色々ご紹介したいと思います。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 17:46
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年07月28日

CSSはショートハンドで楽して書こう:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSSはショートハンドで楽して書こう


ショートハンドとは


ショートハンドとは、CSSのプロパティと値をまとめてカンタンに書くことができる記述方法をいいます。

たとえばこんな感じです。
#box1 {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 5px;
}

marginプロパティはこのように4方向個別に指定するものですが、ショートハンドで記述すればもっと短くすることができます。
#box1 {
/* -top,-right,-bottom,-leftの順で指定 */
margin: 5px 10px 8px 5px;
}

これで1つ目のサンプルコードと全く同じ表示結果になります。数値の並び順をみるとわかりますが、marginやpaddingをショートハンドで記述する場合は左から、-top,-right,-bottom,-leftの順で指定します。これは、上から時計回りで書くと覚えるとわかりやすいでしょう。

また、4方向の数値がバラバラな場合はすべて書く必要がありますが、全方向に同じ数値を指定する場合は、
#box1 {
margin: 0;
}

このように1つだけ指定すればOKです。(数値が"0"の場合は単位は関係ないので不要)

その他にも書き方がいくつかあります。
#box1 {
/* 全方向 */
margin: 10px;

/* 上下、左右 */
margin: 10px 5px;

/* 上、左右、下 */
margin: 5px 10px 8px;
}

paddingも同じ方法で指定可能です。

ショートハンドプロパティ一覧


他にも様々なショートハンドの書き方があります。
プロパティ名指定できる値指定順
margin-top,-right,-bottom,-left固定
padding-top,-right,-bottom,-left固定
background-color,-image,-repeat,-position,-attachment順不同
border-width,-style,-color順不同
border-top
border-right
border-bottom
border-left
-width,-style,-color順不同
border-width
border-stlye
border-color
-top,-right,-bottom,-left固定
list-style-type,-image,-position順不同

他にもfontもショートハンドで記述することができますが、プロパティ数が非常に多く、また記述順を間違えるときちんと表示されないため、あまりお勧めしません。バラバラに記述したほうが見た目にもわかりやすいです。

Dreamweaverのショートハンド設定


ショートハンドの大きなメリットは、手書きをするときに楽という点なので、DreamweaverのCSSルール定義ダイアログを使っている場合はあまり関係がなさそうですが、あとからコードを直接手直しする、他の人が編集する、などを考慮すると、ショートハンドで記述しておいたほうがよいでしょう。

そこで、ルール定義ダイアログが自動挿入するCSSがショートハンドになるように設定します。

画面上部の[編集]メニューから[環境設定]メニューをクリックして開きます。

左側のカテゴリから[CSS スタイルシート]をクリックして開き、[ショートハンドを使用]にチェック。
Dreamweaver環境設定でショートハンド
これで、ショートハンドで記述されるようになります。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 10:55
連載:CSS 3分コーディング | コメント(2) | トラックバック(0)
2009年07月22日

訪問済みリンクを一工夫しよう:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:訪問済みリンクを一工夫しよう


リンク、つまり<a>をCSSでデザインする際は疑似クラスをよく使います。:linkや:hoverなんてやつですね。念のため疑似クラスのおさらいです。
:link
訪問前のリンク
:visited
訪問済のリンク
:active
選択中のリンク
:hover
カーソルが重なった状態
:focus
キー操作等でフォーカス中の状態

こんなかんじですね。

これを使って、各状態をデザインしていくわけですが、たまに見かけるのが:hover以外全部同じデザインになっているようなリンクです。

別に間違っているわけではないのですが、リンク先のページが既に訪問済みなのかどうなのか、一見してわからないのはユーザビリティ的にはあまりよくありません。CSSでデザインされていなくても、一般的なブラウザーで訪問済みリンクが紫になるのは、ユーザーに対して「このページは既に見ているよ」と知らせる役割があるからです。

そこで今回は、これまでご紹介してきたテクニックの合わせ技で、訪問済みリンクをわかりやすくデザインしてみたいと思います。

使うテクニックは以下の2つです。
<div class="nav">
<ul>
<li><a href="./01.html">top</a></li>
<li><a href="./02.html">info</a></li>
<li><a href="./03.html">link</a></li>
</ul>
</div>
li {
list-style-type: none;
}
li a{
padding-left: 18px;
background: url(list_icon.gif) 0 0 no-repeat;
text-decoration: none;
}
li a:link{
color: #999;
}
li a:visited{
background-position: 0 -58px;
color: #333;
}
li a:hover{
background-position: 0 -28px;
text-decoration: underline;
color: #666;
}

するとこうなります。上から、訪問済み、訪問前、カーソルが重なった状態です。

背景画像でvisitedを一工夫

背景に使った画像はこちら。

リンクの背景画像

今回は<li>ではなく、<a>のbackgroundで画像を指定しましたが、これは、<a>の状態によって画像をずらしたいからです。ちょっと難点なのは、3つのアイコンを含む大きい画像を使っているので、「CSSでリストをデザインする」でやったようなcenter指定ができないことです。なので、画像サイズやフォントサイズは微調整が必要になります。それが大変な場合は、今回のような画像をずらす方法ではなく、バラバラの3つの別画像をそれぞれ指定すればよいでしょう。

いずれにしても、visitedをわかりやすくすることで、ちょっと閲覧しやすい親切なページになるのではないでしょうか。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 13:42
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年07月14日

wrapperは必須?:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:wrapperは必須?


<body>以下の全てを<div>で囲み、wrapperやcontainerという名前をつけておくケースはよくあると思います。
メリットとしては、1つのセレクタでページ全体の幅や色、配置などを一括指定できる点です。

例えばこんな感じですね。
<div id="wrapper">
<div id="header">
....
</div>
<div id="main">
....
</div>
<div id="footer">
....
</div>
</div>
/* wrapperで幅、中央寄せ、背景色一括指定 */
#wrapper {
width: 850px;
margin: 0 auto;
background: #ccc;
}

しかし、wrapperなしでもおなじことが簡単に実現できます。

こんな感じ。
/* 複数セレクタで指定 */
#header, #main, #footer {
width: 850px;
margin: 0 auto;
background: #ccc;
}

こうなると、どっちがいいのかということになってきますが、HTML文書構造という点でみると、wrapperはちょっとおかしな存在です。

前回の記事でも出てきましたが、例えばこんなソース。
<div id="contents">
<div id="contents_header">
<h1>header</h1>
</div>
<div id="contents_text">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>

このソースがまずい点は、<h1>や<p>に直接IDやクラスを指定する、または子孫セレクタを使うなどすればcontents_headerやcontents_textが全く不要になってしまう点です。要素、タグというのは「囲った範囲を意味付けする=マークアップする」ものなので、すでに囲まれているもの「だけ」を更に2重に囲む必要はありません。

そう考えると、wrapperはheaderやnaviなどページ全体を囲んでいるので2重ではなさそうです。が、外側に目を向けるとページ全体を囲むのは<body>がその役割を担っています。

つまり、本来<body>が全部囲んでいたものをその内側でまた囲みなおしているのがwrapperということになります。

wrapperはなくてもいい

ですので、構造を考えるとやはりwrapperはなくてもいいわけですね。

しかし、ではwrapperが悪かというと、一概にはそうとも言い切れません。事実、世の中の非常に多くのページでwrapperやcontainerという<div>は使われていますし、やはり1つのセレクタでどかっと一気に指定できるのは制作上カンタン、スピーディです。

wrapperがあるからといって誰に迷惑がかかるわけでもない(?)ので、このあたりはコダワリの世界かなという気もしますが、wrapperは絶対に必要なものではないということ、またベストな方法でもないことを知っておくと「ちょっとできる人」っぽい気がしませんか…!?

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 11:15
連載:CSS 3分コーディング | コメント(9) | トラックバック(0)