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

2010年05月12日

CSS3をIEの独自拡張で再現する【その1】

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

はじまりはじまり。

CSS3をIEの独自拡張で再現する【その1】


最近どんどんCSS3を使ったWebサイトが増えてきています。

ですが、現在リリースされているInternet Explorer(8以下)でCSS3は使えません。

そこで、実はかなり前からIEに実装されている独自拡張機能をつかって、同じ見た目を再現する方法をご紹介します。

※IEのみで使える、CSSとしては仕様外の手法です。validなCSSにこだわる場合は避けた方がよいでしょう。

border-radiusプロパティ(角丸)


border-radiusプロパティはCSSだけでボックスの角を丸くできるプロパティです。

参考:第9回 CSS3はここがすごい【プロパティ編1】

既に多くのWebサイトで使われており、たとえばtwitterの検索ボックスの角でborder-radiusプロパティが使われています。

Twitterで使われている角丸のボックス

これはFirefox3.6でのでキャプチャしました。IEでアクセスしたときは角丸にはならず、直角になります。

IEでも角を丸くしたい場合、いくつか方法がありますが、定番の手法としてはbackground-imageに角が丸く見える画像を配置する、というのがあります。この方法は簡単な反面、
  • 余計なdivを増やさなくてはいけないケースがある
  • 要素の幅を固定しなくてはいけないケースがある
  • 画像を作るのがメンドクサイ
などのデメリットがあります。

そこで、IEの独自拡張プロパティbehavior(ビヘイビア)を使う方法をご紹介します。

<div id="box">
かどまるにしたい。かどまるにしたい。かどまるにしたい。
</div>

#box {
border-radius: 1em; /* CSS3 */
behavior: url(border-radius.htc); /* for IE */
}

このbehaviorとは、JavaScriptなどで記述されたhtcファイル(HTML Component)をHTML上で実行できるIEの独自拡張機能です。角を丸くする処理をborder-radius.htcに記述しておき、それをbehaviorで読み込んでいます。

このhtcはもちろん自作できますが、各所で公開されているので、DLしてくればすぐに使えます。

curved-corner(Google Code)

ただしこの方法も完璧ではありません。
  • Webサーバーがhtcに対応した設定になっている必要がある
  • 角丸の半径は1つのhtcで固定
  • 縦のpaddingがIE以外のブラウザと異なる
などの制約・デメリットがあります。

opacityプロパティ(透過処理)


opacityプロパティは対象の要素を透過処理できるプロパティですがIEでは使えません。

参考:第10回 CSS3はここがすごい【プロパティ編2】

これは、IE独自のfilterプロパティで実現することができます。

<div id="box">
はんとうめいにしたい。はんとうめいにしたい。
</div>

#box {
background-color: #ccc;
opacity: .5; /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* for IE6,7,8 */
}

単位が違うので数値の指定はopacityは0〜1で、filterは0〜100なので注意が必要です。
filterプロパティはそのほかにもブラーをかけたり、ドロップシャドウをかけたりいろいろできます。
また、filterプロパティはレンダリングを遅くする原因になります。

次回も様々な手法をご紹介します。

では次回もお楽しみに。

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

今更だけど(X)HTMLってなんだろう

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

はじまりはじまり。

今更だけど(X)HTMLってなんだろう


CSSなどのテクニックを中心にお伝えしているこの連載ですが、その全てのベースになっているHTMLとはいったい何でしょうか。HTMLという言語の認知度も広まり、「Webページを作るためにタグで書くアレでしょ」と答えられる人は非常に多いと思います。

でも、実際の所、本当に正しい基本を知っている人は意外と少ないかもしれません。そこで、これを読めば「HTMLってのはさァ」と明日から語れる、大事な基本をご紹介します。

HTMLってなんの略?


HTMLは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略です。ハイパーテキストをマークアップする言語です。

ハイパーテキストとは、ハイパーリンク(文書間の結びつけ)が設定できる文書のことで、この中で最も有名なものが、皆様ご存じのWWW上で扱われるWebページ(HTML文書)です。

マークアップというのは「意味を付ける」という意味があり、ここまでを全部つなげると、HTMLとは、「文書をハイパーテキストとして意味付けるための言語」と言うことができます。つまり、Webページ(HTML文書)を作るための言語です。

これに謎のXがくっついたXHTMLについてはもう少し後で触れます。

HTMLの歴史


HTMLが初めて生まれたのは1993年ですが、当時から今と同じだったわけではありません。当時は非常に簡易なものでした。ですが、その簡易さや、扱いやすさが今日のWebの発展の基礎となっています。その後、改良が重ねられ、現在ではHTML 4.01というバージョンが最新版です。…といっても完成したのは1999年のことで、今は次のHTML 5が完成に向けて動いています。

HTMLってどう書く?


HTMLには「HTML要素」と呼ばれるものがあり、「タグ」とよばれるもので記述していきます。しかし、この要素とタグという言葉には誤解が多いようです。

要素とは、文書に対して特定の意味、役割をあたえるものです。たとえば、h1要素はheading1(見出し1)、p要素はparagraph(段落)といった意味を持ちます。

そして、要素は「開始タグ」、「内容」、「終了タグ」から構成される全体を指します。つまり、要素=タグではありません。

ということは厳密には、「h1タグ」や「pタグ」という表現は間違いで、「h1要素の開始タグ」となります。が、会話の中などでは普通に使ってしまうのでうるさいことはいいっこなしだとおもいますが、別物である、というのは大事です。

HTMLのルールは?


要素から成り立つHTMLですが、その記述には様々なルールがあります。このルールのことをDTD(Document Type Definition)といいます。そのまま訳すと、「文書型定義」です。このDTDには、HTMLのバージョンや記法により様々な種類があります。HTML文書内には、「どのDTDに準拠するのか」等のその文書における基準ルールを記述しておく必要があり、それをDOCTYPE宣言といいます。Dreamweaverなどの、Webオーサリングツールを使っているとあまり意識しないかもしれませんが、非常に重要な部分です。

この記述ルールの中のひとつに、先ほど少し触れた、XHTMLというルールがあります。

XHTMLってなに?


XHTMLとは、eXtensible HyperText Markup Languageの略です。そのまま訳せば、拡張可能なHTMLとなります。これは、HTMLより新しい標準規格としてうまれたルールです。

よくある誤解ですが、XHTMLという拡張子のファイルがあるわけではありません。HTMLファイルの書き方にHTMLとXHTMLという2つの方法がある、というイメージです。

ではなぜ、XHTMLは生まれたのでしょうか。

もともとHTMLは、SGMLというマークアップ言語を元につくられたものでした。これは簡易で、良くも悪くも曖昧だったので、多くの人が使えるようになった反面、さまざまな独自ルールなどが氾濫し、標準規格であるはずのHTMLは多くの問題をかかえることになってしまいました。

そこで、HTMLを見直して、XMLをもとに定義しなおされたのがXHTMLです。つまり、XHTMLはXML文書なわけです。

XHTMLのメリットは?


XHTMLのメリットは閲覧者にとっても製作者にとっても多くあります。

まずXMLと文法が同じであるため、XHTMLのなかにXML文書を含むことができます。たとえば、拡大縮小しても画質が劣化しないベクターグラフィックのSVGというファイル形式があります。このSVGはXMLで記述されているため、XHTMLであれば、SVGをそのままつかうことができるわけです。そのほかにもXMLで記述された様々なファイルをそのまま使えるため、その汎用性や拡張性は非常に高いといえます。

また、XHTMLはレイアウトやデザインはすべてCSSでおこなうことが前提になっているので、ファイルサイズが軽減されてアクセス速度が上がる、音声ブラウザーなどに対応しやすい、検索エンジンでより上位に表示される、などのメリットがあります。

さらには、XHTMLのルールを正しく守っておけば、将来新しいブラウザーや、環境で閲覧される場合にもメンテナンスなしでそのまま再利用できるはずです。

XHTMLの今後は?


Web関連のニュースや情報に詳しい方であれば「HTML5」が気になっているかもしれません。「XHTMLはもう終わった」という見出しを見た方もいるかもしれません。

「近い将来HTML5が勧告されるなら、XHTMLをいまさら覚えても…」

いえ、大丈夫です!HTML5では、XHTMLのルールも使えます。XHTMLが終わったわけではなく、統合されて「どっちでもイケる」ようになったのがHTML5です。いまのリソースは無駄にはなりません。

ということで、歴史や技術的概要まで幅広く取り扱いました。

では次回もお楽しみに。

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

簡単オススメ jQueryプラグインまとめのまとめ:jQueryの基本のキ【その3】

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

はじまりはじまり。

簡単オススメ jQueryプラグインまとめのまとめ:jQueryの基本のキ【その3】


前回までで、基本的なjQueryの使い方をご紹介しました。

今回は、特に簡単に導入でき、かつ便利なオススメプラグインをご紹介します。

Lightbox


LightboxとはWebブラウザーの画面上にさらに別の画面を重ねて、ポップアップウィンドウのように表示するテクニックのことで、元祖はPrototype.js(Ajaxライブラリーの一種)のプラグインでした。恐らく非常に多くの方が、「写真をクリックすると画面が暗くなって写真だけ拡大される」ようなページをご覧になったことがあるのでは。アレがLightboxです。

その見た目の良さ、使いやすさから爆発的に普及して、Prototype.js以外に、jQueryでも同様の機能のプラグインが公開されています。いろいろな派生系がありますが、今回は定番中の定番を。

jQuery lightBox plugin

jQuery lightBox plugin

サンプルを見る

Lightboxまとめのまとめ

The Best jQuery Lightbox Scripts

30+ Useful Ajax Lightbox and Modal Dialog Solutions

Accordion


楽器のアコーディオンのように開閉するUI、こちらも定番ですね。

bassistance.de » jQuery plugin: Accordion

bassistance.de » jQuery plugin: Accordion

サンプルを見る

Accordionまとめのまとめ

8 Amazing jQuery Accordions

jQueryのアコーディオン効果の使い方・作り方

Slider系


前回もご紹介した、タブ切り替えのプラグインです。アコーディオンとならんで、省スペースでコンテンツが配置できるので人気があります。

前回のはコレ。

jQuery Plugin - Feature List

jQuery Plugin - Feature List

サンプルを見る

Sliderまとめのまとめ

25 Incredible jQuery Slider Tutorials and Plugins

37 Fresh jQuery Image And Gallery Display Solutions

Table系


コレスゴイです。多めのデータをテーブル(表)で表示するときに大活躍。まるでExcelのようにデータをソートしたり、行や列のサイズを変えたりできます。

Flexigrid - Web 2.0 Javscript Grid for jQuery

Flexigrid - Web 2.0 Javscript Grid for jQuery

tableまとめのまとめ

30 Amazing jQuery Plugins To Play With Tables

テーブルに実装できるjQueryプラグインいろいろ

15 Great jQuery Plugins For Better Table Manipulation

今回は即実装できそうなものということで、Lightbox、Accordion、Slider、Tableにしぼって集めてみました。
まとめのまとめなので、重複している部分もあるかもしれませんが、各まとめページのボリュームをご覧いただくだけでも、jQueryの人気度がおわかりいただけるのではないでしょうか。

次回はもう少し詳しくjQueryの中身について見ていきたいと思います。

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

jQueryの基本のキ【その2】:プラグインを使う

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

はじまりはじまり。

jQueryの基本のキ【その2】


前回はjQueryとは何か、そしてその基本的な使い方について紹介しました。今回は、jQueryのプラグインを使ってみましょう。

jQueryのプラグインとは


プラグインとはjQueryの拡張機能で、さまざまな種類かつ、膨大な量のプラグインが公開されており(自作も可能)、基本的にはjQueryを使えるようにしておけば、容易に導入/カスタマイズすることが可能です。

Plugins | jQuery Plugins

jQueryの公式サイトでもカテゴリー別に各種のプラグインが公開されています。ご覧いただくとわかりますが、ここだけでも膨大な数があります。

プラグインを導入しよう


では今回はリスト要素をタブの様に表示してくれるプラグインの1つ、featureListを使ってみます。膨大な数のプラグインの中でも比較的簡単に導入できるので、jQueryの雰囲気がつかめるはずです。

featueList

たった2kのjsファイルで、導入も超簡単、自在にカスタマイズできるスグレモノです。

デモページを見る。

まずは前回ご紹介したとおり、jQueryを使えるようにしておきます。
<script type="text/javascript"
src="jQuery.js"></script>


つぎに、featureListのプラグインを導入します。

jquery.featureList- 1.0.0.zipをダウンロードして解凍し、jquery.featureList- 1.0.0.jsをscriptタグで指定します。
<script type="text/javascript"
src="jquery.featureList-1.0.0.js"></script>


これで下準備は完了。

あとはサイトのHow to Useに書かれているとおりに実行します。
<script type="text/javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 0
}
);
});
</script>


コードを見ると判りますが、$("#tabs li a")が、クリックするタブの部分のセレクタ、$("#output li")が切り替わる部分です。この部分は自分のページにあわせて変えておけばOK。start_itemの部分は「何番目のタブを初期表示にするか」で、0が先頭です。また、この featureListにはCSSファイルも同梱されているので、CSSが読めれば大きさや配置、画像などのカスタマイズはとても簡単です。

初心者向けとしてわかりやすいプラグインなので、新講座「実用サンプルで学ぶ Web標準XHTML & CSS実践講座」でも実際に使い方を実習します。

次回は様々なプラグインをご紹介します。

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

jQueryの基本のキ【その1】

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

はじまりはじまり。

jQueryの基本のキ【その1】


今回からは少しCSSとは話題を変えて、jQueryの基本的な使い方について数回にわけて連載していきたいと思います。
どんなものかよく知らない方でも、どこかでその名前を見聞きしたことがあるのではないでしょうか?

まず、jQueryとはなんでしょうか?そのベースとなっているAjaxという技術から触れていきましょう。

Ajax(エイジャックス)とは


サッカー好きな人であれば「アヤックス」と読みたくなるところですが、「エイジャックス」または「アジャックス」と読むのが一般的なようです。

通常、Webページではデータを送受信するためには、ページそのもののリロード(同期通信)が必要になります。

そこを、JavaScriptの非同期通信を応用し、リロードせずに同一ページ内での動的処理を可能にしたのが、Ajaxです。これにより、送信してもページが切り替わらないフォームや、同一ページ内でのHTMLの動的な変化を実現することができます。そのため、Flashを使わなくてもまるでFlashのような滑らかなアニメーションや、インタラクティブなページを作成することができます。このような技術を総称して Ajax(Asynchronous JavaScript + XML)と呼びます。なので、よくある誤解ですが、Ajaxというプログラム言語などがあるわけではなく、その正体はJavaScriptなのです。

jQuery(ジェイクエリ)とは


AjaxのJavaScriptコードは非常に複雑で、ゼロから開発するのは大変なことです。このため、Ajaxの黎明期には、「Ajax=かっこいいものが作れるけど超大変」というイメージが強かったようです。

ですが、時は進み、Ajaxにはライブラリーと呼ばれるものが登場してきました。このライブラリーというものは複雑な処理をすべて含んでおり、少しカスタマイズするだけでAjaxを実装することができる優れものです。

そのライブラリーのなかでも最も普及し、さまざまなプラグイン(拡張機能)があるのがjQueryです。

そのプラグインの種類は非常に膨大で、大抵のものは jQueryでなんとかなるといっても過言ではありません。

では、次はjQueryの使い方を見ていきます。

jQueryの使い方


まずはjQueryのライブラリ本体を入手する必要があります。

jQuery のダウンロード
jQueryの公式サイトから、jsファイルをダウンロードします。

jQueryをダウンロードする

jQueryを使う
ダウンロードしたファイルはscriptタグを使って次のように指定します。
<script type="text/javascript" src="./scripts/jQuery.js"></script>


または、次のように、Googleが提供するサーバーから読み込む方法もあります。
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>


コレで完了!簡単ですね。
これさえ済ませれば、プラグインで色々なことができるようになります。

次回はプラグインを実際に使ってみましょう。

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

よさげなエディターIntypeをためしてみた

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

はじまりはじまり。

よさげなエディターIntypeをためしてみた


全国のエディター好きの皆様こんにちは。

DreamweaverのCSSパネルも便利だけど、やっぱりコードの画面とにらめっこしながらゴリゴリコーディングしたいぜ!というパトスを満たしてくれそうな新しいエディター「Intype」を使ってみました。

Intype

Intypeのダウンロード


Intypeのダウンロード

インストール


インストール画面1
インストール画面2
インストール画面3
インストール完了

起動画面


Intypeを起動したところ

左側のプロジェクトの部分にフォルダをドラッグするとこうなる。
プロジェクトにフォルダを登録

CSSをひらいてみたところ。
IntypeでCSSを編集する

対応言語もいっぱい。配色などはテーマで簡単に変更することができます。
対応言語と変更したテーマ

スニペット機能


Intypeの最も便利な機能は多分このスニペット。
Tabキーを押すとがしがし入力できます。これは爽快。



現在はα版なので、まだ未実装や不具合はあるようですが、将来的にかなりたのしみなエディターです。これで無料なら最高なのですが、将来的にはシェアウェアになるとのこと。

しかしエディター好きとしてはシンプル軽量多機能なこのIntypeは要注目です。

では次回もお楽しみに。

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

自由自在にフォントを使う!

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

はじまりはじまり。

自由自在にフォントを使う!


一般的に、

Webページで使えるフォント=ユーザーのPCにインストールされているフォント

という認識をもっている方が多いのではないでしょうか?

そのため、Windowsであれば"MS Pゴシック"や"メイリオ"、Macは"ヒラギノ"ではなく、ユーザーのPCに存在するフォント以外をWebページで使いたければ画像にするのが常套手段だったのですが、実は画像ではなくちゃんとした「文字」として、自由なフォントを指定する方法があります。

@font-faceとは


@font-faceはCSSでフォントを指定することができる規則です。CSS2.1では一旦廃止され、CSS3で再度定義される予定ですが、実は現在でもかなり多くのブラウザーで使うことができます。そして、この@font-faceでは、ユーザーのPCに存在しないフォントもWeb上のフォントファイルをダウンロードして表示させる、ということが可能です。いわゆるWebフォント、とよばれるものです。

@font-face対応ブラウザー


ブラウザーバージョンサポート
Internet Explorer4.0〜Embedded OpenTypeのみ
Firefox3.5〜TrueType、OpenType
3.6〜Web Open Font Format
Opera10.0〜TrueType、OpenType
Safari3.1〜TrueType、OpenType
Chrome4.0〜TrueType、OpenType

IEが4から対応しているのは意外な事実ですが、IEはEmbedded OpenType、eot形式のフォントでないと表示できないという注意点があります。

@font-face記述方法


@font-face {
font-family: 'フォントファミリー名';
src: url('フォントファイルのurl');
}

@font-faceで指定したフォントを(X)HTMLで使うには次のとおり。
selector {
/*@font-faceで指定したフォントファミリー*/
font-family: フォントファミリー名;
}

また、もしユーザーがそのフォントを既に持っている場合のことも考慮する場合は次のようにします。(持っているならダウンロードする必要はないため)

@font-face {
font-family: 'フォントファミリー名';
src: local('フォントファミリー名');
src: url('フォントファイルのurl');
}

さて、基本的な使い方は以上ですが、やっかいなのは対応するフォント形式がまちまちな点です。表を見れば判るとおり、TrueType、ttf形式、またはOpenType、otf形式が一番ひろく対応していますが、IEはNGです。そのため、クロスブラウザー対応するためには、複数形式での指定が必要になります。ちなみに、Web Open Font Format、woff形式というのは、Firefoxがいちはやくとりいれた形式なのですが、Webフォントに最適化された形式で、軽いファイルサイズが売りです。Webフォントではフォントファイルをダウンロードすることになるため、ファイルサイズは重要な問題なんですね。現在はFirefoxの3.6〜でしか使えませんが、今後は各ブラウザーの対応が進むと思われます。
クロスブラウザー対応を考えて、一番無難な指定順は次のようなかんじではないでしょうか。

@font-face {
font-family: 'フォントファミリー名';
src: url('eotファイルのurl'); /*for IE*/
src: local('フォントファミリー名'), /*ローカルにインストールされている場合*/
local('フォントファミリー名'), /*一応別名で複数していするとより安全?*/
url('woffファイルのurl') format('woff'), /*for Firefox3.6*/
url('ttfファイルのurl') format('truetype');
}


使用上の注意


フォントファイルは別ドメインから読み込むことはできません。CSSファイルと同じドメインに配置しましょう。

また、レンダリングの挙動がブラウザーによって異なります。IE、Firefox、Operaは、フォントのDLが終わるまでデフォルトフォントで代替表示をします。が、Webkit系のSafari、Chromeは、フォントのDLが終わるまで何も表示しません!ので、使いすぎるとユーザビリティを著しく損ねるかもしれません。デザインの自由度がとても高まるので、デザイナー的には使って楽しい技術ですが、用法、用量をよく考えることが大事ではないでしょうか。

流行?のMuseoをつかってみました。

@font-face {
font-family: 'Museo700';
src:local('Museo700') ,
url('Museo700-Regular.otf');
}
h1 {
font-family: "Museo700";
}


するとこんなかんじです。

@font-faceでWebフォントを使う

ヘッダーにつかうぐらいがちょうどいいかもしれません。

では次回もお楽しみに。

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

IE6よさらば【その2】:CSS 3分コーディング

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

はじまりはじまり。

IE6よさらば【その2】


前回に続き、IE6をサポートしないWeb制作の可能性をみていきたいと思います。
前回はIE6では使えないセレクタをご紹介しました。

透過pngの使用


IE6はアルファチャンネルで透過されたpngをサポートしていません。

そのため、背景を透過して表示するために、IEの独自拡張を使う、JavaScriptのライブラリを使う、など色々対応策があります。

現実問題、使わざるをえないケースは多いかもしれませんが、IE6を考慮しなければわざわざそんなことをする必要はありません。透過pngを使うことが出来れば、デザインの幅は非常に大きく広がります。

IE6は透過pngを正しく表示できない

背景に指定した透過png

<div id="box"></div>

#box {
width: 160px;
height: 40px;
background: #999 url(transparent.png) no-repeat;
border-top: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}

font-sizeのpx指定


一般的に、font-sizeはpxなどで絶対的な数値指定をしない方がよいとされています。

これは、font- sizeが絶対値で指定されていると、ユーザーがブラウザで文字サイズを大きくしても大きさが変わらなくなってしまうため、ユーザビリティ上問題があるからです。しかし、モダンブラウザーは文字サイズの拡大縮小ではなく、ページ全体のズームが採用されているため、font-sizeを絶対値で指定しても、画像なども含めて純粋にページ全体を拡大縮小することができます。

IE6は文字サイズのみの拡大で、px指定すると文字の大きさが変わらなくなる。

モダンブラウザーはページ全体のズームで拡大縮小ができる

<h1>font-size: px vs em</h1>
<p><img src="dw_cs4.png" alt="sample" width="70" height="74" />
Lorem ipsum dolor sit amet....</p>

h1, p {
font-family: verdana, sans-serif;
font-size: 15px;
}
img {
float: left;
margin: 5px;
}

属性セレクタの使用


IE6は属性セレクタを実装していません。IE7から使用できる属性セレクタを使えば、「a要素のhref属性が".pdf"で終わっていたら、特定のbackground-imageを表示する」などの汎用的なコーディングが可能になります。

href属性が'.pdf'で終わっていたらアイコンを表示する

<a href="/xxx.pdf">ドキュメントを見る</a>

a[href$=".pdf"] {
padding-right: 18px;
background : url("./file_acrobat.gif") no-repeat right top;
}

このようにIE6を非対象とするだけでデザインの幅、コーディングの汎用性が大きくかわることがわかります。制作者側のメリットばかりのようですが、IE6は頻繁にセキュリティ面での問題も浮上し、最近の中国からと思われるGoogleへのアタックもIE6の脆弱性がねらわれたとか。ユーザーサイドからみてもIE6を使い続ける理由はないでしょう。

IE6ユーザーの方にはアップデート、乗り替えを強く推奨します。

では次回もお楽しみに。

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

IE6よさらば:CSS 3分コーディング

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

はじまりはじまり。

IE6よさらば


既報の通り、Googleは段階的にIE6のサポートを打ち切ると発表しました。

また、欧州では政府機関が公式にIE6からの乗り換えを推奨するなど、IE6のシェアは徐々に低下しています。

日本でもこの流れは同様ですが、企業のサイトなどがサポート外のブラウザーとするにはまだ勇気が必要かもしれません。

しかし、IE6を考慮しないだけでWebサイト制作はガラリと変わります。

IE6の問題点は様々ですが、中でも未実装のセレクタが多数ある点が非常に痛い点です。IE6を考慮しなければ次のようなセレクタが使えます。いずれの方法もIE6をサポートする場合はIE6を考慮するのであれば、対象の要素にclass属性やid属性が必要になります。

親要素 > 子要素 { プロパティ:値 }

子供セレクタ
親要素の直接の子要素を指定します。

例えばこんな使い方。
body > p { font-size: 1.5em }

body直下のpのみを指定しているので、それ以下の入れ子になっているpには適用されません。


前要素 + 後要素 { プロパティ:値 }

隣接セレクタ
前要素の直後の要素を指定します。

例えばこんな使い方。
h2 + p { font-size: 1.5em }

h2の後にでてくるpのみが選択されます。この例では第一段落だけを指定できます。


要素[属性="値"] { プロパティ:値 }

属性セレクタ
要素の属性、または属性の値によりスタイルを指定します。

例えばこんな使い方。
p[lang="en"] { color: #666 }

p要素にlang属性があり、かつenになっている場合、スタイルが適用されます。この属性セレクタは、before疑似要素、after疑似要素(IE7も未実装)と組み合わせると真価を発揮します。

例えばこんな使い方。
a[href="http://m-school.biz"]:after {
content: url("img/m-school.png");
}

a要素のhref属性がhttp://m-school.bizだったら、つまりリンク先がm-Schoolのときのみ、後ろにm-school.pngを表示する、というようなことがCSSのみで可能になります。


要素:hover { プロパティ:値 }

:hover疑似クラス
対象の要素にマウスカーソルが重なった状態のスタイルを指定します。

IE6でも:hover疑似クラスは使えますが、a要素限定という制約があります。仕様上は、どの要素でも:hoverを使うことができます。

たとえはこんな使い方。
tr:hover { background-color: #ccc }

tr要素、つまりtableの行部分にカーソルがかさなると背景色がかわり、見やすくなります。

その他にも透過png画像に関する問題など、IE6を非サポートとするだけで制作の幅は大きく広がります。…というのは理想論で現実はそうはいかない!というご意見もあると思いますが、どこかで見切りをつけていかなければいつまで経っても変わらないのも事実です。

冒頭の通り、事実世界的にIE6の切り捨てが加速していますので、この流れを草の根的に大きくしていくのもWeb担当者の1つの役目かもしれません!

では次回もお楽しみに。

2010/02/17 追記
【その2】を書きました。

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

CSSでリストをグリッド状に並べる:CSS 3分コーディング

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

はじまりはじまり。

CSSでリストをグリッド状に並べる


画像などのボックスをCSSでグリッド(格子)状に並べる方法です。table要素は使わず、CSSのみで実現します。

完成品はこんな感じ。
CSSでリストをグリッド状に並べる(完成品)
これは、CSSを適用する前はこうなっています。
CSSでリストをグリッド状に並べる(CSS適用前)
XHTMLはこんな感じ。
<div id="grid">
<ul>
<li><img src="box.jpg" width="80" height="80" /></li>
<li><img src="box.jpg" width="80" height="80" /></li>
<li><img src="box.jpg" width="80" height="80" /></li>
<li><img src="box.jpg" width="80" height="80" /></li>
....
</ul>
</div>

「一覧表示」という意味では、やはりリストでマークアップするのがしっくりきます。

以前、「CSSでリストを横並びのメニューにする」という記事で、リストを単純に横に並べるテクニックを紹介しました。

この記事ではdisplayプロパティを使ってliの表示をインライン要素に変えています。

今回もそれが使えそうですが、「インライン要素には上下のmarginが設定できない」ため、配置をこまかく調整しようとした際に不便です。

そこで、今回はfloatプロパティを使ってli要素を横並びに表示します。

ポイントは「親要素の幅を固定して、1行あたりに表示されるli要素の個数を決める」です。
3mincss27_grid_list.png
* {
margin: 0;
padding: 0;
}

#grid {
width: 450px;
}
li {
margin: 5px;
float: left;
list-style: none;
}

今回はdiv要素を用意して幅を固定しましたが、ul要素で幅を固定してもOKです。

親要素の幅と、li要素の幅+marginを割り算して、1行あたりにli要素をいくつ表示するかを計算します。

グリッド状に表示する写真ギャラリーのようなものも簡単に作ることができますね!

では次回もお楽しみに。

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