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

2009年12月24日

超初心者のためのWeb用語集【2】:CSS 3分コーディング

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

はじまりはじまり。

超初心者のためのWeb用語集【2】


何かと略語やヨコモジの多いWeb関連用語。なーんとなく聞いたことはあるけど、よくしらない。そんな方のために、「コレは知っとくべき!」な用語集第2回です。

参考:超初心者のためのWeb用語集【1】
HTMLレンダリングエンジン
エイチティーエムエルレンダリングエンジン。HTMLやCSS、JavaScriptなどのコードを視覚情報や音声情報などに変換するプログラムのこと。主にWebブラウザーに搭載されており、IEのTrident、FirefoxのGecko、SafariのWebKitなどが有名。
Transitional
トランジショナル。DTD(文書型定義)の形式の1つ。「過渡期の」という意味で、将来廃止される、または非推奨のHTML要素や属性も使うことができる、比較的制限の緩い文書型定義。
Strict
ストリクト。DTD(文書型定義)の形式の1つ。「厳密な」という意味で、廃止される要素や属性は使えない文書型定義。しかし、ブラウザーの対応状況などから、浸透していないのが現状。
Frameset
フレームセット。Transitionalの記述方式で、フレーム(画面分割)を設定する場合の文書型定義。Strictではフレームは使用できない。
JavaScript
ジャヴァスクリプト。Webブラウザー上で動作するスクリプト言語。Webブラウザー上で動作し、HTMLとCSSだけでは実現できない動的なページを作成することができる。国際標準化団体、Ecma Internationalにより、標準化され、大半のWebブラウザーで動作する。プログラム言語、Javaとは完全に別物。
Ajax
エージャックス。Asynchronous JavaScript + XMLの略。JavaScriptによる非同期通信でサーバー上のXMLとやりとりを行い、Webページをリロードすることなく、データの通信ができる。Ajaxという言語等があるわけではなく、実態はJavaScript。ゼロから開発するのはかなり大変なので、jQueryやAdobe Spryといったライブラリが人気を集めている。アジャックス、アヤックスと読んでも間違いではないらしい。
DOM
ドム。Document Object Modelの略。XMLやHTMLの文書をソフトウェアから扱うためのAPI(Application Programming Interface)。たとえば、JavaScriptを使って、特定のHTML要素を指し示す時などに使う。
CMS
シーエムエス。Content Management Systemの略。Webサイトのコンテンツを管理するためのシステム。HTMLやCSSの知識がなくても動的にそれらを生成することができるため、効率的にWebサイトを構築することができる。Movable TypeやWordPress等、ブログ作成ツールとして使用できるものもある。


まだ続くかもしれません。

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

超初心者のためのWeb用語集【1】:CSS 3分コーディング

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

はじまりはじまり。

超初心者のためのWeb用語集【1】


何かと略語やヨコモジの多いWeb関連用語。なーんとなく聞いたことはあるけど、よくしらない。そんな方のために、「コレは知っとくべき!」な用語集を作りました。あまり数は多くないですが、是非押さえておきましょう。
HTML
エイチティーエムエル。HyperText Markup Languageの略。Webページの文書を構造化する(テキストに意味づけをする)言語。主にWebブラウザーによって解析、表示される。
XHTML
エックスエイチティーエムエル。Extensible HyperText Markup Languageの略。HTMLを、XMLに基づいて再定義したもの。XMLの文法に基づいているので、XML文書との互換性がある。
DTD
ディーティーディー。Document Type Definitionの略。HTML文書等の文書形式を定める言語の一種。要素や属性等の規則を定めている。(X)HTMLではStrict、Transitional、Framesetの3種類がある。
HTML要素
エイチティーエムエルヨウソ。HTML文書を構成する。基本的に<開始タグ>内容</終了タグ>で構成される。これがそろって要素なので、厳密には要素=タグではない点に注意。
属性
ゾクセイ。HTML要素の特性を定める。必須であるもの、オプションであるものがある。例えば、a要素であればsrc(リンク先)が属性。
XML
エックスエムエル。Extensible Markup Languageの略。ユーザーが独自の要素をつかって文書を構造化することができる。規格で、様々なシステムでデータを共有することができる。
CSS
シーエスエス。Cascading Style Sheetの略。HTMLやXHTMLの見栄え(デザイン)を表現する仕様。Web標準の考え方では、HTMLやXHTMLの文書内から視覚的要素の指定を排除し、それらは全てCSSで行うことが推奨されている。
W3C
ダブリュースリーシー。World Wide Web Consortiumの略。Web上で使われる様々な技術の策定、標準化を行うための非営利標準化団体。World Wide Web Consortium (W3C)
Web標準
ウェブヒョウジュン。W3Cが勧告しているWeb上で使われる標準化された規格。すべての人が平等にWebを利用し、等しく情報を得られるようにする(情報のバリアフリー化)ことを目的としている。Webアクセシビリティとあわせて言われることが多い。
UA
ユーエー。User Agentの略。利用者がデータにアクセスするために使うソフトウェアやハードウェアのこと。代表的なものでは、WebへアクセスするWebブラウザーや、メールを送受信するメーラーがUAにあたる。Webに限っても、Webブラウザー以外にモバイル端末や、ゲーム機もUAにあたる。
Webブラウザー
ウェブブラウザー。Web上の情報を閲覧するために利用するソフトウェア。主にHTMLやCSSの情報を解析して視覚的に描画する機能を持っている。他にも、Webページを合成音声で読み上げるブラウザ等も存在する。
HTTP
エイチティーティーピー。HyperText Transfer Protocolの略。インターネット上で主にHTMLのデータ等を通信する際に使われるプロトコル(規約、決まり事)
RSS
アールエスエス。RDF Site Summaryの略。主にサイトの更新情報を公開するために用いられるXMLベースのフォーマット。アドレス、タイトル、見出し、更新日時などを記述できる。RSSリーダーを使ってRSSを取得すると、最新情報に素早くアクセスすることができる。

きっと続きます。

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

CSSのpositionに挑戦:CSS 3分コーディング

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

はじまりはじまり。

CSSのpositionに挑戦


CSSをつかってレイアウトをする際、floatやmargin、padding等のプロパティを使いますが、その他にもpositionプロパティというのがあります。若干ややこしいので慣れが必要ですが、使いこなせればより自由度の高いレイアウトが可能になります。

positionプロパティ


positionプロパティは配置をどこにするかを定めるプロパティです。値は配置の基準点を定める次の4つがあります。基準点を定めた後、top,right,bottom,leftプロパティを使い、配置箇所を決めます。
static
初期値。positionを指定しない場合の通常通りの配置で、位置指定は無効です。
relative
相対配置。staticの際に表示される、通常配置の場所を基準として配置します。
absolute
絶対配置。positionプロパティで位置指定された親要素、または指定がない場合はブラウザのウィンドウを基準として配置します。
fixed
絶対配置+位置固定。absoluteと同じ位置に配置されますが、位置が固定され、ページをスクロールしても常にウィンドウ内の同じ位置に配置されます。(IE6未対応)

※基準…ブラウザのウィンドウまたは親要素の左上の角。

サンプルファイルを見る

ソースコードは以下。
<body>
<div id="box1">box1-static</div>
<div id="box2">box2-relative</div>
<div id="box3">
<p>box3-absolute</p>
</div>
<div id="box4">box4-fixed</div>
<img src="logo_m-School.jpg" width="150" height="66" alt="ロゴ" />
</body>

body {
margin: 0px;
padding: 0px;
height:9999px;
background-image: url(grid.jpg);
background-repeat: no-repeat;
}
div {
width: 148px;
height: 98px;
background: #FFC;
border: 1px solid #FC3;
}
#box1 {
position: static;
top: 50px; /*位置指定は無効*/
left: 50px; /*位置指定は無効*/
}
#box2 {
position: relative;
top: 50px; /*通常位置基準*/
left: 50px; /*通常位置基準*/
}
#box3 {
position: absolute;
top: 250px; /*ブラウザのウィンドウ基準*/
left: 250px; /*ブラウザのウィンドウ基準*/
}
#box3 p {
margin: 0px;
padding: 0px;
position: absolute;
top: 50px; /*#box3基準*/
left: 50px; /*#box3基準*/
border: 1px solid #FC3;
}
#box4 {
position: fixed;
top: 0px; /*ブラウザのウィンドウ基準 + 固定*/
left: 200px; /*ブラウザのウィンドウ基準 + 固定*/
}
img {
position: absolute;
top: 434px; /*ブラウザのウィンドウ基準*/
left: 350px; /*ブラウザのウィンドウ基準*/
}

まず、body要素には配置位置がわかりやすいようにグリッド状の背景画像をおいています。1マス50ピクセルです。そして、fixedの効果がわかりやすいようにheightに大きい数値をいれて無理矢理スクロールできるようにしました。

body要素以下には、4つのdiv要素(box1〜4)とimg要素を置いています。

box1はstaticにしているため、位置指定をしても無効です。

box2はrelativeで、これはposition指定をしない場合に通常配置される場所を基準として配置されます。

box3はabsoluteで、positionプロパティで位置指定された親要素、または指定がない場合はブラウザのウィンドウを基準として配置します。今回このbox3の親は特にないため、ウィンドウを基準にしています。

box3の中にあるp要素もabsoluteですが、box3にはpositionの指定があるため、box3を基準に配置されます。

box4はfixedで、absoluteと同様の基準で配置されますが、スクロールしても常にウィンドウ内の同じ場所に配置されます。IE6は対応していないため、static扱いになります。

img要素などのインライン要素も、同様にpositionでの位置指定が可能です。

基準点を考えるのが少しだけややこしいですが、分かってしまえば難しいことはありません。使いこなせれば、要素を自由自在に配置できるため、とても便利です。

では次回もお楽しみに。

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

スキップリンクの実装:CSS 3分コーディング

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

はじまりはじまり。

スキップリンクの実装


スキップリンクとは


スキップリンクとは、主にページ内先頭部分に配置されるページ内へのリンクのことを言います。スキップナビゲーションやナビゲーションスキップといった呼び方もあります。

ページ先頭にはサイト内リンク(いわゆるメニュー)があることが多いですが、スクリーンリーダー(音声ブラウザー)を使っている場合に、毎ページで共通のナビゲーションが読み上げられてしまうと煩雑になってしまいます。

そこで、サイト内リンクより前にページ内へのリンクを配置し、サイト内リンクが読み上げられる前にメインのコンテンツに移動できるようにする、というのがスキップリンクの主目的です。

JIS規格 X 8341-3:5.3 hでも
共通に使われるナビゲーションなどのためのハイパリンク及びメニューは,読み飛ばせるようにすることが望ましい。
とされています。

ただ、スクリーンリーダーのユーザーを対象として、視覚的に表示をしておく必要がない場合には、CSSを使うなどのテクニックで、「読み上げられるが表示しない」とするケースが多くあります。

スキップリンクのマークアップ

スキップリンクのマークアップは非常に様々な方法が考えられます。上記のJIS規格でも紹介されていますが、次のようなパターンがあります。
  • a要素でマークアップし、隠さず表示させておく
  • a要素でマークアップし、CSSで非表示にする
  • a要素でマークアップし、CSSで画面外に配置する
  • 背景と同色or透明のgifなどのalt属性にリンク先の説明を記述し、画像をa要素でマークアップする
  • HTML構造上、メインコンテンツをサイト内リンクより上部に配置する

他にも様々なものが考えられますが、よく見かける手法は「a要素でマークアップし、CSSで画面外に配置する」です。HTMLの構造がシンプルにできる点、CSSで簡単に実装できる点が優れています。

例えばこんな感じです。
<div id="nav-skiplink">
<p>ページ内へのスキップ用リンクです。</p>
<ul>
<li><a href="#product-glasses">メガネの一覧</a></li>
<li><a href="#product-sunglasses">サングラスの一覧</a></li>
<li><a href="#topics">最新トピックス</a></li>
<li><a href="#campaign">キャンペーン情報</a></li>
<li><a href="#nav-footer">フッターナビゲーション </a></li>
</ul>
</div>

#nav-skiplink {
position: absolute;
top: -10000px;
left: -10000px;
}

単純な方法ですが、スキップ用のリンクのdivブロックをpositionプロパティで画面のはるか左上に飛ばしています。

その他にも、このような消し方もあります。
#nav-skiplink {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}

ただ、スキップリンクは、必ずしもスクリーンリーダーのユーザーだけに有用なものではないので、通常のマウス操作でも使えるように非表示にすべきではない、という意見や、そもそもページ内へのリンクの是非に関する議論もあります。

これが正解!とはここでは言い切れませんが、スクリーンリーダーのユーザー向けということであれば、アクセシビリティの向上に役立つのではないかと思います。

参考リンク


では次回もお楽しみに。

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

いろいろなWebサイトの幅まとめ

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

はじまりはじまり。

いろいろなWebサイトの幅まとめ


講座でもよくご紹介していますが、Webサイト(ページ)の幅をどれくらいにするかの判断基準として、国内外のいろいろなWebサイトがどれぐらいの幅になっているのかをまとめてみました。

(*が付いているのは英語のページです)

*min-width(最小幅)とwidth(幅)を設定している場合は、min-widthをとっています。
*UA(ユーザーエージェント)によって設定を変えている場合はFirefoxで調べています。
*調査対象のサイトは、思いついたサイトです。チョイスに特別な意図は全くありません。

ポータル系サイト


サイト名幅(px)
Yahoo! Japan950
MSN Japan974
goo970
Excite925
Yahoo! *972
MSN.com *979
AOL.com *80.06em

主要テレビ局


サイト名幅(px)
NHKオンライン990
日テレ・ホームページ1003
TBS980
フジテレビ990
テレビ朝日967
テレビ東京960

政治


サイト名幅(px)
首相官邸ホームページ962
鳩山由紀夫ホームページ880
BarackObama.com *960
Number10.gov.uk(英国首相官邸) *1000

ゲームハード


サイト名幅(px)
PlayStation.com862
Xbox.com990
Wii768

IT系メーカー


サイト名幅(px)
マイクロソフト932
Adobe1006
アップル980

特に何か面白い傾向がみえるというわけではないですが、近年Webページの幅はどんどん大きくなってきていることはわかりますね。

Net Applicationsが提供している統計データをみても、2009年10月のデータで77%以上のモニターが横幅1000以上の解像度を表示できるようになっています。

Net Applicationsが提供している統計データをみても、2009年10月のデータで77%以上のモニターが横幅1000以上の解像度を表示できるようになっています。

ちなみに、ちょっとデータは古いですが、次のページがとても豊富なデータでまとまっています。参考、ネタ元にさせていただきました!

今webサイトは幅何pxで製作されているのか | Liquid Paper Clips

では次回もお楽しみに。

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

初心者向けHTML&CSS参考サイトまとめ

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

はじまりはじまり。

初心者向けHTML&CSS参考サイトまとめ


ネタに困ったときの最終手段。「まとめ」をします。

今回は、これからHTML&CSSに挑戦する方、または始めたばかりの方にお役立ていただけるような、比較的易しいサイトをまとめてみました。

(X)HTMLリファレンス系


標準的なWebページを作る全ての基本は、(X)HTMLの要素の役割を理解し、正しくマークアップすることに尽きます。そのため、リファレンスを読んで要素とその役割を覚えるだけでも非常に効果的です。W3Cのサイトをみれば全てが載っていますが、何せ英語、しかも専門用語ずらずらなので、分かりづらい!ということで日本語のページを中心に集めました。

(*が付いているのは英語のページです)
とほほのWWW入門
多くの方が閲覧したことがあるであろう、定番ページです。更新されていないため、ブラウザーの情報などが古いのがちょっと残念ですが、HTMl4.01の各要素の役割がわかりやすく解説されています。CSSやJavaScriptもあり。
HTMLクイックリファレンス
こちらも比較的初心者向けの平易な言葉での解説があります。目的別で調べることができるものナイスです。CSSやJavaScriptもあり。
Webウェブデザインレッスン
XHTML1.0およびHTML4.01のstrictに準拠した一覧があります。また、概念などの解説やチュートリアルも充実しています。CSSもあり。
WWWWARD
XHTML1.1の詳細な仕様、解説が載っています。初心者の方には少し難しい用語も多いかもしれませんが、各要素の概要は是非読んでおきたいところです。
W3Schools Online Web Tutorials *
英語ですが、情報量がすごいです。また、ページ内にエディタ機能が搭載されていて、実際にソースコードを入力し、結果を確認することができます。HTMLリファレンスへのリンク
Safari Reference Library *
こちらも英語ですが、Appleが提供しているリファレンス集です。HTML以外のリファレンスにもCSSやJavaScript、iPhone向けなど膨大な量のドキュメントがあります。HTMLリファレンスへのリンク

CSSリファレンス系


上記のサイトにはCSSのリファレンスを含んでいるものがおおいので、ここは少なめに。
正しい知識を得たい人の爲のCSS2リファレンス
非常に詳解なCSSリファレンスです。そのため、初めて学ぶ方にはやや難易ですが、独学の知識を正しくかみ砕きたい方向け。
CSS Dencitie
CSSの基本からリファレンスまで豊富な情報がそろっています。ブラウザーのバグ情報もあるため、非常に役立つはずです。
CSS Cheat Sheet (V2) - Cheat Sheets - Added Bytes *
PDF、PNG形式でCSSのチートシートが公開されています。ダウンロードしておくと、ちょっと確認したいときなど便利です。(チートシートとは、いわるゆカンニングペーパーみたいなものです。)

Web標準(アクセシビリティ・ユーザビリティ)


昨今はWeb標準に関する情報も豊富です。これから始める方は是非、最初に正しい知識・考え方を得てしまいましょう。
Web標準Blog | メソッド | ミツエーリンクス
株式会社ミツエーリンクスが提供する、Web標準に関する話題を取り扱うブログです。幅広い話題で非常に有益な記事がたくさんあります。特にW3C関連の翻訳、解説の情報は英語イヤーンな人にとても役立つはず。
Web標準カリキュラム
Opera社が公開している、英語のカリキュラムの邦訳です。先ほどのミツエーリンクスさんがローカライズを担当されたもので、まだ訳されたドキュメントは多くないですが、Web標準に興味がある方は必読!な内容です。
ウェブユーザビリティ向上を支援するWebsite Usability Info
ユーザービリティやアクセシビリティに関するTipsや考え方などを提供しているサイトです。きっとこれまで意識していなかった新しい視点を得られるはずです。

おまけ:HTML5&CSS3


目下策定中のHTML5とCSS3についても情報がどんどん増えています。来るべき将来に今から備えておきましょう。勧告されてからでは思いっきり出遅れてしまうかも。
HTML5 を学ぶための情報源まとめ | WWW WATCH
HTML5関連ページを色々あつめていたのですが、他に素晴らしいまとめ記事がありました。こちらの記事を見ればほぼ完璧かとおもいます。こちらの記事でもオススメされているHTML5.JPは特に、熟読する価値大ありです。
CSS3 . Info - All you ever needed to know about CSS3 *
CSS3に関する様々な情報があります。特にCSS3 PreviewsにはCSS3からの新プロパティがわかりやすくのっています。


では次回もお楽しみに。

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

text-indentで画像を置き換えた時の輪郭線

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

はじまりはじまり。

text-indentで画像を置き換えた時の輪郭線


本来文字になっている部分を背景画像に置き換えて表示するテクニックがあります。

これを実現する方法はいくつかありますが、代表的なものではtext-indentプロパティを使って文字を本来の位置からずらしてブラウザーの画面外へ飛ばしてしまう方法があります。

例えばこんな感じです。
#nav li a {
display: block;
text-indent: -9999px;
width: 200px;
height: 40px;
background-image: url(../btn_home.png);
}

これで実現することができます。

ですが、上記のように対象がa要素でマークアップされている場合、Firefoxでは「フォーカスがあたった際に画面外につづく点線が表示される」という問題が発生します。

こんなイメージです。

Firefoxではフォーカスがあたった際に画面外につづく点線が表示される

そもそもこの画像置き換えの手法に是非があるのはさておき、一般的によく使われているため、気になる人にとっては気になる部分だと思います。

この問題の対処方法はいくつかパターンが考えられます。
#nav li a {
outline: none;
}

outlineプロパティは、ボタンやチェックボックスなどにフォーカスがあたっている際に表示される輪郭線を指定します。画面外に続いている点線は、この輪郭線です。これをnone、または0にすることで非表示にします。

しかし、この輪郭線は、特にキーボードをつかってページ内のリンクを移動する際などに、今どこがフォーカスされているかを視覚的にわかりやすくする目的をもっています。

そのため、アクセシビリティやユーザビリティという観点から考えると完全に消してしまうのはあまりよくありません。

そこで、別の方法を考えます。
#nav li a {
overflow: hidden;
}

overflowプロパティは、ボックス内に収まりきらない部分をどのように扱うかを指定します。text-indentにネガティブな値を指定して画面外へ文字を飛ばしてしまう手法は、本来のa要素の範囲外に文字を「はみださせている」わけなので、これをhidden、つまり隠してしまうことで、輪郭線が表示されなくなります。

これで輪郭線を消すことなく、画面外に飛び出す問題を解決することができます。

以下オマケです。

Mac版のIEでは、overflowの扱いにバグがあり、値がvisible以外だと表示が消えてしまうことがあります。そこで、バックスラッシュハックをつかって、Mac版IEではコメント扱いにする方法もあります。
#nav li a {
/*\*/
overflow: hidden;
/**/
}

ただ、Mac版IEってもうスルーでもよくない…?と思うのですが…

では次回もお楽しみに。

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

様々なツールでIEの表示を確認する

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

はじまりはじまり。

様々なツールでIEの表示を確認する


制作の過程や、最終段階ではブラウザーので表示確認が必要になります。ここで少し手間がかかるのがInternet Explorer(以下IE)のバージョンの問題です。

今現在、世の中で使用されているIEは、大きく分けてIE6/IE7/IE8の3バージョンです。これらのブラウザはそれぞれ大きなシェアをもっているため、表示の確認は必須といえますが、問題は1つのOS(Windows)につき、1つのIEしかインストールできない点です。

異なるバージョンのIEが入ったPCが何台もあればもちろんいいのですが、なかなかそうもいかないので、様々なツールを使用してIEでの表示をチェックします。

IETester


個人的イチオシはこちら。IE5.5〜IE8までの表示を確認できるツールです。動作OSはWinXP,Vista,7のいずれか。

タブブラウザーのような操作で、非常にカンタンに確認することができます。あくまで確認ツールなので、完全な検証とはいえませんが、制作中の確認等には最適ではないでしょうか。

IETesterのダウンロードはこちらから

Internet Explorer Collection


こちらは、IE1〜8まで全てのIEをインストールしてしまう荒技?ツールです。標準で搭載しているIEとは別にインストールされるので、IE同士の干渉はないようですが、若干コワイ気もします。

しかし需要があるかないかは置いておいて、初期の頃のIEのインターフェイスを見ることができるので面白いですね。現在のサイトはほぼまともに表示できないと思いますが…。

Internet Explorer Collectionのダウンロードはこちらから

Multiple IE


こちらも複数のIEをインストールするツールです。IE3〜6を個別にインストールすることができます。

Multiple IEのダウンロードはこちらから

Microsoft Expression Web SuperPreview for IE


こちらはMicrosoft製の確認ツールで、IE6〜8までの表示を確認することができます。画面を分割して左右で違うブラウザーで表示したり、表示をかさねてズレをわかりやすくしたりと非常に多機能なのですが、完全フリーツールというのがとてもうれしいところです。ブロックレベル要素の範囲をハイライトして幅や高さを表示してくれるなど、比較検証以外にも役に立つ機能も搭載されています。

Microsoft Expression Web SuperPreview for IEのダウンロードはこちらから


Adobe BrowserLab


BrowserLabは、Web上でブラウザーの表示を確認することができるAdobeのWebサービスです。IE6〜8とFirefox、Safariでの確認が可能で、さらにOSも切り替えることが可能です。

SuperPreview同様に画面の分割表示や、重ねて表示など、非常に多機能なのですが、将来的に有料サービス化するらしいところがちょっと残念。

Adobe BrowserLabへのアクセスはこちらから
Adobe IDとユーザー登録が必要です。(いずれも無料)

いくつかツールやサービスをご紹介しましたが、特に複数のバージョンのIEを同居させるタイプのものをご利用の際はオウンリスクでお願いいたします。。。やはり理想は実機の環境で確認するのが一番確実です。

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

セレクタはシンプルかつわかりやすく書く

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

はじまりはじまり。

セレクタはシンプルかつわかりやすく書く


セレクタは、同じ箇所を指定するのにも様々な記述方法が考えられます。

特に非常によく使う子孫セレクタの書き方は多くのパターンが考えられるため、ときに冗長な指定になってしまうことがよくあります。

たとえば、このようなXHTMLソースで考えてみます。
<div id="wrapper">
<div id="header">
<h1>タイトル</h1>
<div id="global-nav">
<h2>グローバルナビゲーション</h2>
<ul>
<li><a href="#" class="home">home</a></li>
<li><a href="#">infomation</a></li>
<li><a href="#">products</a></li>
<li><a href="#">recruit</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>

このソースコードの「class属性にhomeがあるa要素」を指定するとします。

子孫セレクタを使って、完全に1つずつ階層を下っていくとすれば、こうなります。
html body #wrapper #header #global-nav ul li a.home {

}

しかしこのこの書き方はあまりにも冗長です。

ブラウザーはCSSをHTMLに適用する際に、HTMLとCSSを照らし合わせてスタイルを適用して…という作業を繰り返しているため、セレクタが長ければ長いほど、その作業は大変になる=時間がかかってしまいます。

セレクタをシンプルにすることでパフォーマンスが向上するので、最速の方法はこのようになります。
.home {

}

しかし、これはパフォーマンス的には良いのですが、コーディングをする側からみるとシンプルすぎるためにあとから見て「アレ、これってドコを指してるの…?」ということになりかねません。

なので、このあたりはそれぞれの人や組織の考え方次第ですが、パフォーマンスと可読性のバランスを考える必要があります。

たとえばこんな感じでしょうか。
#global-nav li .home {

}

まず、削った部分としては、ID属性は必ずユニークであるはずなので、入れ子にする意味はありません。Dreamweaverを使うとがっつり入れ子になったりします。CSSの講座でも入れ子で書いていますが、それはそれでXHTMLの階層構造が明確に分かるので、慣れないうちは良いと思います。

また、ul要素については、li要素は必ずセットでくっついてくるものなので、ul liとする意味がありません。これはtable要素においてもtable tr tdが無意味で、tdだけOKといえます。

最後に、クラスの部分でa要素を削りました。aの指定があってもなくてもhomeクラスが適用されている先は同じなので、指定しなくてもいいですね。

これがベスト、正解ということではないので、何を優先するかによって変わってくるかと思います。

ですが、特にDreamweaverのCSSパネルでセレクタを自動で記述している方は、一工夫するといいのではないでしょうか。

では次回もお楽しみに。

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

CSSでボタンのロールオーバーをデザインする【2】

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

はじまりはじまり。

CSSでボタンのロールオーバーをデザインする【2】


「CSSでボタンのロールオーバーをデザインする【1】」とは違う方法をご紹介します。

以前ご紹介した方法は、ロールーオーバーする前、した後、いずれもbackground-imageで画像を配置していました。つまり、HTMLソース内には画像はありません。
ソースはこんなかんじでした。
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

今回は、img要素を使って画像を配置していて、なおかつCSSのみでロールオーバーをデザインする方法をご紹介します。
<a href="#"><img src="btn_info.jpg" width="160" height="45" alt="インフォメーション" /></a>


このように、背景画像ではなくimg要素を使いたいケースもあると思います。

ポイントは、visibilityプロパティでimg要素を非表示にする点です。
img {
/* 画像のボーダーを消す */
border: none;
}
a {
/* 背景画像と幅高さを指定するためにblock化 */
display: block;
/* img要素と同じサイズ */
width: 160px;
height: 45px;
/* ロールーオーバー時の背景画像 */
background: url(btn_info_bg.jpg) no-repeat;
}
a:hover {
/* IE6用設定 */
background-color: #000;
}
a:hover img {
/* ロールーオーバー時にimg要素を非表示 */
visibility: hidden;
}

コードをご覧いただくとわかるように、a要素に背景画像を設定しています。ですが、img要素の画像と完全に重なってしまうため、通常時は表示されません。

そこで、a要素のhover疑似クラスをつかい、ロールーオーバー時にimg要素を非表示とし、隠れている背景画像を表示させます。

a要素のhover疑似クラスをつかい、ロールーオーバー時にimg要素を非表示とし、隠れている背景画像を表示させる

また、IE6はhover疑似クラスと子孫セレクタを組み合わせた書き方に反応しないという問題があり、これを回避するために背景色を指定します。(何色でもOKです)

※visibility: hidden;はdisplay: none;とは異なり、要素を存在しないものにしてしまうのではなく、あくまで表示を消すだけです。

メンテナンス性を考えると、画像の修正・変更などがあった場合は(X)HTMLとCSSの両方を直す必要がある、などデメリットはありますが、img要素で画像を配置できるため、Dreamweaverなどでの作業は楽になるかもしれません。短期間で消してしまうようなバナー画像とかで使うのはアリではないでしょうか。

では次回もお楽しみに。

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