マウスオーバー時に画像が半透明になるように
CSSを記述したところ画像が透過（ドット欠け？）してしまう
という現象がおきたので覚書です。

続きを読む

今回は、HTML5, CSS3 を使ってウェブサイトをつくる際の助けになる JavaScript ライブラリ Modernizr をご紹介します。

HTML5, CSS3 では便利な機能が多数追加されましたが、ブラウザによって対応状況はまちまちです。

Modernizr を使うとブラウザの HTML5, CSS3 対応状況を簡単に調べることができるので、個々の状況にあわせたコードを比較的容易に書けるようになります。

バージョンの古い Internet Explorer 等に対応する際、コンディショナルコメントやいわゆる CSS セレクターハックを使用することがありますが、それらと同様のものと考えると分かりやすいかもしれません。

それではごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。（バージョン等は記事執筆時点のものです。変更になっている場合があります。）

続きを読む

今週末、3月30日のタイムライン移行では、
ウォールだけでなく、Facebookページ（iframeタブ）も変わります。

※ウォールの変更点に関しては、以下にまとめました。
>> 移行直前！タイムライン対応まとめ（ウォール編） 続きを読む

今週末、3月30日にFacebookの画面が大きく変わります。
今までの「ウォール」が「タイムライン」という名前に変わり、
見た目も変わってしまいます。

すぐに変更した方がいい部分に絞って、簡単にまとめました。

　
　
※Facebookページの変更点に関しては、以下へアップしています。
>> 移行直前！タイムライン対応まとめ（Facebookページ編） 続きを読む

■Webフォントとは
Webフォントは、CSS3から新たに追加された仕様で、サーバーにアップロードしたフォントデータをCSSで呼び出して利用するので、ユーザーの閲覧環境に依存せず、誰が見ても同じフォントで表示されるようになります。
見出しなど、特殊なフォントが使われていて画像化せざるを得なかった文字情報も、テキストのまま公開できるので、コピー&ペーストも自由にでき、SEO対策としても有利になります。
また、CSSによるカラーやサイズの指定が自由にできます。

 

■ブラウザ対応
IE、Firefox、Safari、Chrome、Opera、iOS、Andoroidなど、ほとんどのブラウザは対応していますが、データ形式がブラウザやバージョンによって異なります。

 

ブラウザごとのWebフォント対応状況

	TrueType （.ttf）	OpenType （.otf）	EOT （.eot）	WOFF （.woff）	SVG Font （.svg）
IE4～	×	×	○	×	×
IE9～	×	×	○	○	×
Firefox 3.5～	○	○	×	×	×
Firefox 3.6～	○	○	×	○	×
Safari 3.1～	○	○	×	×	○
Chrome 4～	○	○	×	×	○
Chrome 6～	○	○	×	○	○
Opera 10～	○	○	×	×	○
Opera 11.10～	○	○	×	○	○
iOS 4.0～	×	×	×	×	○
iOS 4.2～	○	○	×	×	○
Android 2.2～	○	○	×	×	×

 

フォントデータはTrue TypeやOpen Type形式が一般的ですが、IEでは読み込めません。
IE8以下ではEmbedded Open Type(以下、EOT)という独自規格しか対応していませんので、EOT形式のファイルを別途用意し、同じフォントでも複数の形式を設定する必要があります。

 

IE8以下にも対応するには、@font-faceを以下のように定義します。

@font-face {
	font-family: 'sample';/* 任意のフォント名 */
	src: url('../font/sample.eot?') format('eot'),/* for IE6-8* /
  	url('../font/sample.woff') format('woff'),
  	url('../font/sample.ttf') format('truetype'),
}

font-familyにフォント名を指定し、formatにフォント形式を指定します。
srcプロパティで複数の形式(urlとformatの組み合わせ)をカンマで区切って指定できます。
優先度は記述順になっています。

 

IE 8以下は複数の形式指定も、formatの記述も対応していませんが、最初に指定して、ファイル名の後に”?”を付けることで、”?”以降を読み込まないようにしています。

 

また、フォントデータを変換するWebアプリケーションを使用する方法もあります。

 

上記のサイトはTrueType形式のフォントをEOT形式にコンバートしてくれるWebアプリケーションです。

 

■フォントの著作権に注意
フォントデータは著作物ですので、Webフォントとして用いるには著作者の許諾が必要となりますので、
著作権処理には充分な配慮が必要です。
フォントデータのプロパティを確認すれば著作権者がわかります。

 

 

 

■Google Web Fontsを使って導入してみる
Google Web Fonts （http://www.google.com/webfonts/） はGoogleでホスティングされているリソースサイトです。
アカウントも不要で、すべてのフォントがオープンソースとして提供されています。また、自分でフォントデータをアップロードしたり、@font-faceなどを記述する必要もありませんので、他のフォント提供サービスと比較してとても簡単に利用できます。
いまのところアルファベットのフォントばかりですが、現在400以上のWebフォントを無料で使うことができます。

 

基本的な使い方
まず最初の画面で「Start choosing fonts」をクリックします。

 

利用したいフォントを以下の画面から選び、「Quick-Use」をクリックします。

 

導入手順通りに「3.Add this code to your website」にかかれたコードをそのままHTMLのhead要素に記述し、フォントを読み込ませます。

<link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'>

 

次に「4.Integrate the font into your CSS」のfont-familyの内容を適用したいセレクタに設定します。

h1{
	font-family: 'Prosto One', cursive; /* 4.の内容をそのまま設定 */
}

 

以上で、とても簡単に導入できます。

 

 

 

■日本語のWebフォント
2011年7月に日本語フォントを揃えたWebフォントサイト「フォントプラス」 （http://webfont.fontplus.jp/）がオープンし、現在「フォントワークス」「モトヤ」「白舟書体」「イワタ」の日本語フォントが400以上使用できるようです。
日本語フォントは、データサイズが大きく、表示速度が遅いなどのデメリットがありました。しかし、「フォントプラス」のシステムでは、サイト内の文章を自動で解析し、使われている文字だけを抽出したフォントデータを自動で作成できるので、ダウンロードの時間を短縮できるようです。

 

 

 

 

■参考サイト

• 第4回 CSS3のWebフォントを使ってみよう | Think IT
  （http://thinkit.co.jp/story/2011/08/18/2233）
• Webフォントについてのまとめ（前編）- Tips*Blog
  （http://www.coprosystem.co.jp/tipsblog/2012/01/31.html）