web制作 | プログラマーズ雑記帳

web制作カテゴリ記事

HTML5 Please 読み方ガイド 2012-03-05
フォントの埋め込みと Google Web Fonts 2012-03-10
IE を実際のバージョンで動作させるサイト側の指定方法 2012-07-21

HTML5 Please 読み方ガイド

HTML5 CSS3 ガイド web制作使い方

Web 制作などで、非常に役に立つ HTML5 Please というサイトがあります。
このサイトの紹介と、ぱっと見は何が書いてあるのかわかりづらいところもあるので、読み方ガイド的なものを書いてみました。
英語のサイトですが、用語の意味さえ分かっていれば、英語があまり分からなくても、ある程度使えるのではないかなと思います。

どんなサイト ?

"HTML5 Please" は「 HTML5 をどうぞ」とか「 HTML5 をどうぞ使ってください」ぐらいの意味でしょう。要するに HTML5 を薦めているサイトです。 HTML5, CSS3 といった新機能に対して、メジャーなブラウザ(IE, Firefox, Crome, Safari, Opera)の対応状況を元にその機能をもう使っていいのか、まだやめておいた方がいいのかといった情報がコンパクトにまとめてあります。

このサイトでは機能のリストの一覧が表示されています。
このリスト項目をクリックすると各機能の説明が表示されます。ただし、利用に関する説明で機能自体の説明は書かれていません。 あらかじめ使いたい機能があって、それが使っていいのかチェックする という使い方になると思います。

さらに説明内の [View browser share %] のリンクをクリックするとブラウザごとの対応状況の一覧も表示されます。

use, caution, avoid

まず、大きく use, caution, avoid で分けられます。
use, avoid はわかりやすいでしょう。ブラウザが対応しているので、使ってもいいというのが use で、未対応のブラウザが多いので、まだ使わないほうがいいというのが avoid です。

では、 caution は何だろうというと、使ってもいいけど、使うのには注意が必要 という機能です。
たとえば、 caution になっているものに box-shadow という機能があります。これはボックスに影を付ける機能で、このブログではサイドバーの各要素の囲みに使っています。
この機能の説明では、あまり大きな領域に対して使うとパフォーマンスが落ちるので、気をつけた方がいいですよという但し書きが付いています。

ただ、 use でも注意しておいた方がいい点もあります。
それは基準が各ブラウザの最新バージョンで対応済みであれば、 use になるということです。
Windows XP だと IE 8.0 までしかアップグレードできないので、まだシェアは高いと思いますが、 IE 8.0 で使えない機能も use で表示されます。

また、理由はよく分かりませんが、 IE 9 で対応済みとされている機能が実際には対応していないということも多いです。
たとえば、境界線の角を丸く表示する border-radius という機能があります。これはこのブログでもナビなどのボタンやサイドバーの各要素の囲みに使っているのですが、私の環境の IE 9 では丸く表示されていません。
先ほどの box-shadow も同様に IE 9 では機能していません。

追記 2012-7-21

IE が IE7 のレンダリングモードで動作してるのが原因でした。
IE9 で動作するように指定すれば、 border-radius, box-shadow ともにちゃんと機能するようになりました。

IE を実際のバージョンで動作させるサイト側の指定方法 | プログラマーズ雑記帳

polyfill, fallback

use や caution の後に with polyfill や with fallback がついているものがあります。この polyfill, fallback とはなんでしょうか。

polyfill

polyfill というのは web 関連の造語で、ブラウザがまだ対応していない機能を提供する JavaScript やアドオンなどを指しています。ある機能に対応していないブラウザがあったとしても、その機能を実現する polyfill があれば、すべてのメジャーブラウザで機能を使えるようになります。
例えば、<canvas> という html 上に図を描画する機能は IE 9 ではまだ対応していませんが、 polyfill を使えば、 IE でも canvas が使えます。

HTML5 Please ではお勧め polyfill もリンク付きで紹介されています。

polyfill なんていう便利なものがあるなら、ブラウザが対応していなくても、新しい機能をどんどん使っていけばいいやと思う方もいるかもしれません。
しかし、この polyfill は大抵 JavaScript で無理やり実現させたもので、スクリプトのロード時間もあり、ブラウザで対応されている方が処理速度は速いです。
実現しようとする機能によっては、 JavaScript でやろうとすると著しく時間がかかってしまうものもあります。実は caution で紹介した box-shadow にはもう一つ但し書きがあり、そこには box-shadow の polyfill は遅くなってしまうので、使わない方がいいよと書かれています。

fallback

fallback は日本語ではいざという時の予備品，代替物といった意味になります。
これが付いている機能はブラウザが対応していないときの備えをしてから、使おうということになります。

例えば、 fallback になっている機能に gradient という CSS の機能があります。これはグラデーションをかけて色を付けることが出来る機能で、このブログでは記事タイトルなどに使っています。

この機能はグラデーションのついた画像を背景に使うことで代用することが出来ます。ただし、画像の方が遅くなりますし、長くなって 2 行になった場合などではきれいに表示できません。
HTML5 Please では画像を使う方法や単一の背景色を指定することで、対応していないブラウザに備えておくことが推奨さています。

ちなみにサイトでは理由までは説明さていませんが、 gradient に関しては border-radius や box-shadow と違い、対応ブラウザの備えとして背景色の指定はやっておいた方がいいです。
というのも、 gradient に対応していないブラウザでは、背景色が描画されないためです。正確には、 <body> などのベースとなる要素の背景色になるのですが、背景色が期せずして使われると、情報を伝えるというところにも影響を与えることがあります。例えばその背景色が白で、文字色も白に近い色だった場合、コンテンツの内容が読めなくなってしまいます。

また、 gradient の説明にはベンダープレフィックスを付けるように薦められています。
ベンダープレフィックスというのは仕様の確定していない機能に対して、ブラウザごとの書き方をするものです。詳しくは以前の記事に書いたので、そちらを見てみて下さい。

ブラウザとレンダリングエンジン#ベンダープレフィックス

    background-color: #F5F5F5; /* 代用色 (gradient に対応していないとこの色になる) */
    background: linear-gradient(top, white, silver);
    background: -moz-linear-gradient(top, white, silver);
    background: -o-gradient(top, white, silver);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(silver));

polyfill か fallback か

未対応のブラウザがある機能を使う場合、 polyfill か fallback かということになります。 HTML5 Please ではこれはどのように選択されているのでしょうか。

この選択の説明の前にまず、最近 web 制作で主流になりつつある プログレッシブエンハンスメント という考え方について説明しておきます。
これは 高機能なブラウザではかっこよく、そうでなくてもそれなりに という考え方です。モダンなブラウザを使っている人には新しい技術を取り入れた高度な見せ方で提供して、そうでない場合でも、見え方はシンプルになるけど内容は損なわないようにしようということです。

クロスブラウザはもう古い！ HTML5 ＋ CSS3 時代のプログレッシブ・エンハンスメント - @IT

いままでに紹介した border-radius や box-shadow などは角を丸くしたり、影を付けたりするだけで機能していなくても、中身に影響はないので、どんどん使っていくべきです。
それに対して <canvas> といった新しいタグを使うと解析に失敗したりするなどして表示自体できなくなったり、内容を損なったりします。こういった場合は polyfill を使うか、まだ使用を避けるということになるでしょう。

HTML5 Please もこういった思想を元に作られているようです。
基本的に表示の装飾だけに関係するものは fallback になっていて、 機能しないと困るようなものは polyfill というようになっています。
また、 JavaScript で作られた polyfill だと処理速度がかかるので使わない方がいいという情報や、逆に fallback でもお勧めの polyfill がある場合には、その polyfill へのリンクが紹介されています。

フィルター

最後にフィルター機能について紹介したいと思います。
ページの上部にあるテキストボックスやリンクで表示内容をフィルタリングすることができるようになっています。テキストボックスのフィルターも便利なのですが、リンクも use だけ、 css だけといった感じでフィルタリングができ、知りたい情報をピックアップしてみることが出来ます。
中でも便利な 2 つのフィルターをあげておきます。

IE8+: まだシェアの広い IE 8 から対応している機能のみを表示します。
prefixes: CSS のベンダープレフィックスが必要な機能のフィルタリングです。

スポンサーサイト

フォントの埋め込みと Google Web Fonts

web制作 html css 使い方

ブログなどの web 制作をしていると巷にあふれているかっこいいフォントを使ってみたいと思ったことはありませんか ? そんなときに使うフォントの埋め込みと Google Web Fonts についての紹介したいと思います。

フォントの埋め込み、 WebFont

通常、ブラウザで表示するフォントはそのコンピューターにインストールされたものが使用されます。しかし、ネット上にはデザイン性の高いフォントがいろいろ公開されていて、それらのフォントを使って、自分のサイトをかっこよくしたいということがあります。
こういった場合、サイト上にフォントを置いておいて、閲覧者が HTML ページを表示するときに 一緒にフォントをダウンロードして、表示に使うようにすることができます。これをフォントの埋め込みといったり、そのフォントのことを WebFont といったりします。

ただし、フォントをダウンロードして使用するので、フォントファイルのサイズが問題になってきます。英語のフォントでは大したことはないのですが、日本語用のフォントだとサイズが大きく、ダウンロードに時間がかかってしまいます。そのため、埋め込みに使用するフォントは 英語のフォントのみにしておいた方がいいでしょう。

英語のみといっても意外と使い道はあります。例えば、次のようなところです。

メニュー、ボタン
日付
変数 <var> 、キーボード <kbd> のようなタグ内の文字

このブログでもページ上部のメニューやページナビのリンクに使用しています。

また、フォントをアイコンの代わりとして使用することも出来ます。

自分の好きなフォントを使うには通常のフォントの埋め込み方法と Google Web Font を使う方法があります。お勧めは Google Web Font ですが、まずは基本的なフォントの埋め込みを説明しましょう。

通常のフォントの埋め込み

フォントの埋め込みを行う場合には以下のような手順になります。

フォントをサイトにアップ
@font-face でフォント名を登録
登録したフォント名を利用

フォントのアップロード

まず、サイトで使いたいフォントを見つけて、そのフォントファイルをダウンロードします。
利用可能なフォントファイルは後述しますが、 TrueType フォント(ttf) であれば、まず、問題ないでしょう。

ただし、利用する場合にはフォントのライセンスを必ず確認して下さい。
フリーのフォントでも、製作者名の表示(Credit) が必須というものが多いです。

使いたいフォントを取得したら、それを使うサイトにアップロードします。
FC2 ブログでは通常のファイルのアップロードの方法と同じです。アップロードした後はそのファイルの URL をコピーしておきましょう。

フォント名の登録 @font-face

フォントの指定は CSS 上で行います。この指定にはフォント名を使うので、その前にフォントファイルにフォント名を付けておく必要があります。このフォント名の登録には @font-face を使用します。

@font-face は HTML5 Please では use with fallback になっています。
対応していないときの備えをしてから使っていいよということです。詳しくは以前の記事を見てもらうとして、実際、新しい仕様への対応が比較的遅い IE でも対応しているので、モダンなブラウザであれば、ほぼ利用可能でしょう。

HTML5 Please 読み方ガイド

CSS では通常のスタイル指定とちょっと違う指定を @規則 といって、 @ で始まるキーワードを使います。ただし、 @font-face の場合は通常のスタイルの指定方法と同じ型式です。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.ttf);
}

font-family でフォント名として登録したい名前を指定し、 src の後にフォントファイルを URL パスで記述します。

TrueType フォントであればほとんどのモダンブラウザで対応しているので、一番確実だとは思いますが、他にも指定可能なフォーマットはあります。

識別名	フォントフォーマット	拡張子
woff	WOFF (Web Open Font Format)	.woff
truetype	TrueType	.ttf
opentype	OpenType	.ttf, .otf
embedded-opentype	Embedded OpenType	.eot
svg	SVG フォーマット	.svg, .svgz

この識別名はフォントファイルを指定する際にフォーマット判定のヒントとしてつけます。
また、フォントファイルはカンマで区切って、複数指定することも出来ます。

@font-face {
  font-family: bodytext;
  src: url(ideal-sans-serif.woff) format("woff"),
       url(basic-sans-serif.ttf) format("opentype");
}

使えるフォントファイルはシステムやブラウザによって変わってきます。この例では WOFF ファイルのロードに成功すればそれを利用し、失敗すれば OpenType が使用されます。

フォントの利用

フォントを登録した後は通常のフォント名と同じように使用できます。

p { font-family: Gentium, serif; }

@font-face に対応していないか、指定したフォントファイルのすべてに失敗していると Gentium が有効になっていないので、 serif が使用されます。
この serif やフォントファイルの複数指定が対応していないときの備えです。まぁ、使えなかったとしても、ブラウザのデフォルトが使われるだけなので、それほど気にする必要もないです。

Google Web Font

フォントの埋め込みを行う場合はフォントファイルの場所を URL で指定します。そのため、必ずしもフォントを使用したいサイトと同じサイトにフォントファイルを置いておく必要はありません。
どこかにフォントファイルを公開してくれているサイトがあれば、そこへのパスを指定すればいいだけです。そんなサービスを提供してくれているのが Google Web Font です。

フォントのアップロードの手間が省けるだけでなく、次のような利点もあります。

@font-face による登録部分のコードも生成
フォントのロード時間をチェック可能
フリーなライセンス
- すべて Open Source Fonts で商用、個人用にかかわらず、 Credit なしで自由に使える。

フォントの数も 466 個と結構あります。(2012-03-10 時点)
サイトが社内 LAN にあって断然速いという場合や特に何か使いたいフォントがある場合などを除いては Google Web Font を使用する方がお勧めです。

使う手順は次のようになります。

フォントを選択
ロード時間をチェック
使用するためのコードを取得
フォントを利用

フォントの選択(Choise)

まずは使うフォントをリストから選択します。
サンプル文字列は変更することもできるので、メニューの文字列など実際に使う予定の単語で見た方がいいでしょう。
使いたいものが見つかったら、 [Add Collection] のリンクをクリックします。フォントは複数選択することができ、選んだフォントはページ下部のリストに追加されていきます。

ロード時間をチェック

フォントの選択が終わった後は、 [Use] のリンクをクリックします。そうするとフォントを使用するためのページに移動します。

そこでは右上にロード時間の速度メーターが出ているので、まずロード時間をチェックします。
フォントをあまりたくさん選びすぎるとロード時間がかかってしまうので、その場合は [Chose] で戻って、フォントを減らした方がいいでしょう。

使用するためのコードを取得

フォント埋め込みでは @font-face でフォントファイルにフォント名をつけてから使用します。 Google Web Font ではこの部分を記述した CSS ファイルを作成するところまで行うので、その CSS ファイルを取り込めば、フォントが使えるようになっています。

Use のページをスクロールしていくと、 CSS ファイルを取り込むためのコードがあります。

Standard, @import, Javascript の 3 つがありますが、シンプルな Standard, と @import でのやり方について説明しましょう。

Standard のコードは HTML ファイルのヘッダー部(<head> ～ </head>)に記述するための CSS ファイルのリンクです。
これを自分の CSS ファイルのリンクより前に追加します。

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One|Cantata+One|Oswald' rel='stylesheet' type='text/css'>
<link href='http://foo.bar.co.jp/my.css' rel='stylesheet' type='text/css'> <!-- 自分の CSS ファイル -->

@import のコードは使用する CSS ファイルに記述するものです。 @import というのは CSS で他のファイルを取り込むための @規則で、 C, C++ でいえば、 #include にあたります。
取得した行を自分の CSS ファイルの先頭に追加します。
個人的にはフォントの指定を CSS にまとめたかったので、こちらの方を使っています。

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One|Cantata+One|Oswald);
@charset "utf-8";

/* スタイル設定 */

フォントの利用

あとはフォント名を使って、他のフォントと同様に使用することができます。

var {
    font-family: 'Oswald', sans-serif;
}

Google Web Font ではこの font-family による指定の例も記述されています。

IE を実際のバージョンで動作させるサイト側の指定方法

web制作 SNS ブラウザ HTML5 CSS3

タイトルがちょっとわかりづらいと思いますが、実は IE は実際のバージョンよりも古いバージョンで動作する ことがあります。これを本来のバージョンで動作させるようにサイト側から指定する方法の紹介です。

例えば、 IE9 を使っていたとしても、ページによっては、 IE7 としてレンダリングしてしまいます。
この場合、 HTML5 や CSS3 などの標準仕様で、 IE9 や IE8 から使えるようになった機能は対応しなくなります。

HTML5 Please 読み方ガイド | プログラマーズ雑記帳

特に困るのは Google+ などの SNS のシェアボタンで inline-block の機能を使っているものが勝手に改行されて、表示が乱れてしまうことです。
IE7 での表示

自分のページがどのバージョンのレンダリングモードになるかは、 IE で表示し、[F12] で IE の開発ツールを起動させると確認することができます。

IE7 で動作してしまう条件はいろいろあってややこしいです。ただ、実際の IE のバージョンでレンダリングさせるだけなら、以下を html のヘッダー部(<head>..</head>)内に記述すれば対応できます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

参考
- IE8 のレンダリングモードに関するまとめ ? SummerWind
- Google +1 ボタン改行させないようにするには

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30