HTMLコーディングのノウハウ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

CSS3で簡単にボタン風バナーを作る

Mon, 26 Dec 2011 22:12:02 +0900

CSS3から背景にグラデーションをつけたり、ボーダーを曲線にすることができるようになりました。それを用いて、画像を使わず簡単にボタン風のバナーを作成するテクニックです。

[CSS]CSSスプライトで容量を節約しつつロールオーバーを実現する

Mon, 05 Dec 2011 21:47:55 +0900

ロールオーバーの指定の仕方はこれまで何度かご紹介しましたが、今回はそのロールオーバーの指定の中でも、CSSスプライトと呼ばれる方法をご紹介したいと思います。

[HTML]たった1行でアイコン付きの要素を右寄せにするテクニック

Thu, 17 Nov 2011 18:13:36 +0900

アイコンなどをbackgroundで指定した要素を右寄せにしたいとき、みなさまはどのようにスタイルを指定しているでしょうか。text-alignを使って要素を右寄せにしても、背景は動かないため、背景ごと動かさなければなりません。また、background-positionで直接位置を指定するのも、あまりよい方法とは言えません。今回は、そんな状態をたった一行で解消するテクニックを紹介します。

[jQuery]簡単に作れるスライド式メニュー

Fri, 11 Nov 2011 17:42:24 +0900

jQueryを使うと、アニメーションをさせながらメニューの開閉が行えたり、要素を移動させたりすることが可能です。その中で、今回はスライドしながら開閉するメニューのサンプルをご紹介します。

あなたはどれを使う？スマートフォンの呼び方一覧

Tue, 26 Jul 2011 22:02:57 +0900

スマートフォンのシェアも広がり、「スマートフォン」という存在がかなり身近になってきたのではないでしょうか。しかしその「スマートフォン」という呼び方にも、いくつかバリエーションがあるようです。そこで今回は、それらについて調べてみました。

■スマートフォン
■スマートホン
■スマフォ
■スマホ
■smartphone

現在は上記の5つの呼び方が一般的でしょうか。
特に、略さない場合の呼び方は「スマートフォン」、略した時の呼び方は「スマホ」が傾向として多いようです。「スマートフォン」と「スマフォ」ではなく、「スマートホン」と「スマホ」でもなく、「スマートフォン」と「スマホ」。不思議な組み合わせですね。

ちなみに、中国語ではスマートフォンのことを「智能手机」と言うそうです。

今後、「スマートフォン」に対するこれまでと全く異なる斬新な呼び方が生まれてくるかもしれません。スマートフォン業界の今後と共に、呼び方の行く末も気になるところです。

[HTML]今さら人に聞けない「左・右・中央寄せが出来ない時の対処法」

Sun, 22 May 2011 17:04:15 +0900

今回もコーディング初心者向けのテクニックです。要素の位置を寄せたいとき、「スタイルで指定しているのにできない！」という時があるかと思います。その解決法です。

CSSは必要なし！ onmouse属性を使った簡単なロールオーバーの作り方

Sun, 22 May 2011 16:12:18 +0900

バナーなどでロールオーバーした際に画像を変化させる方法はいくつかありますが、今回はonmouse属性を使ったロールオーバーの方法をご紹介します。

ソースを見やすくするためのスタイルシート・コードフォーマット

Mon, 16 May 2011 21:02:20 +0900

スタイルシートを作成するときに、ただスタイルを羅列していくだけでは、後から見てどこに何が書いてあるのかわからず、メンテナンス性が非常に悪くなってしまいます。そこで、今回はスタイルシートを書くときに気を付けたいことをご紹介します。

今さら人に聞けない「idとclassの使い分け」

Mon, 09 May 2011 20:51:26 +0900

5月もゴールデンウィークを過ぎてしまいましたが、この4月から新たな生活を始めた方もいらっしゃるのではないかと思います。「これからコーディングの仕事を始めるよ！」という方もいらっしゃるかもしれません。そこで、今回は、基本に立ち返って、idとclassの使い分けについて考えます。

CSS3で新たに追加されるプロパティと各ブラウザの対応状況まとめ

Tue, 08 Mar 2011 21:05:11 +0900

CSS3で新たに追加されるプロパティは多岐に渡りますが、今回はそれらのうちから色に関するプロパティの説明とサンプル、そして各ブラウザの対応状況をご紹介します。

ゼロから始めるガラケーコーディング DOCTYPEとCSS編

Fri, 17 Dec 2010 19:24:27 +0900

前回は初歩の初歩ということで、携帯サイトのコーディングに関する基礎的な事項についてご紹介しましたが、今回はもう少し踏み込んだ、DOCTYPE宣言とCSSの使用可否について考えます。

携帯サイトにおけるDOCTYPE宣言

そもそもDOCTYPE宣言とは、そのHTML文書がどういったバージョンで記述されているかを宣言するものであり、携帯サイトをコーディングする際にもDOCTYPE宣言は必要です。そこで、キャリアごとのDOCTYPE宣言について、ご紹介します。

■docomo

※x.xにはiモード対応XHTMLのバージョンが入ります。iモード対応XHTML 1.0ならば、

となります。バージョンの差異については、以下のリンクをご覧ください。
http://www.nttdocomo.co.jp/service/imode/make/content/browser/xhtml/about/

最後のmetaタグはMIMEタイプを指定するもので、Docomo機種でXHTMLを使う際は、metaタグのcontent属性を「application/xhtml+xml」としなければなりません。これはauやSoftBankの機種では必要なく、DocomoのFOMAのみの仕様となります。
また、Docomo機種でXHTMLを使用する場合、DOCTYPEを省略したり、記述の間違いなどがあると、ブラウザがXHTMLモードにならないので注意が必要です。

■au

■SoftBank

上記は全て文字エンコードがShift-JISの場合の例ですが、各キャリアではShift-JIS、あるいはUTF-8のどちらかを使用可能です。また、SoftBankではそれ以外にも、ISO-2022-JPとEUC-JPの2つが使用可能です。しかし、実状としては、一般的にShift-JISが使われます。

■3キャリア共通
3キャリア共通のDOCTYPE宣言も行うことは可能です。

XHTML 1.0のTransitionalでDOCTYPE宣言をします。
ただし、こちらのやり方だと、各キャリア独自の仕様などに対応できないので注意する必要があります。

CSSの使用可否について

各キャリアとも、第3世代...いわゆる3G携帯以降であれば基本的にCSSには対応していますが、それぞれ対応状況が異なります。以下にその特徴を記載します。

■docomo
・XHTMLのみでCSSが有効です。
・基本的にインラインのみに対応しています。つまり、

このような形でのみ使用可能です。
・内部参照については、a:link、a:focus、a:visitedのみに対応しています。
・外部参照については対応していません。
・class/id指定は無効です。

ただし、iモードブラウザ2.0以降が搭載されている機種では、外部参照を含むCSSに対応しています。

■au
・HTML/XHTML共にCSSが有効です。
・インライン、内部参照、外部参照にすべて対応しています。
・class/id指定に対応しています。

■SoftBank
・HTML/XHTML共にCSSが有効です。
・インライン、内部参照、外部参照にすべて対応しています。
・class/id指定に対応しています。

ただし、au、SoftBank共に一部の機種にてid指定には対応していない模様です。

最後に、キャリアごとにDOCTYPEを振り分けるスクリプトをご紹介いたします。

<?php
	$agent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match("/DoCoMo/", $agent)) {
		print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
		print("<!DOCTYPE html PUBLIC \"-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/x.x) 1.0//EN\" \"i-xhtml_4ja_10.dtd\">\n");
		/* x.xにはiモード対応XHTMLのバージョンを入れてください */
		print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
		print ("<head>\n");
		print("<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=Shift_JIS\" />");
	}

elseif(preg_match("/KDDI\-/", $agent)||preg_match("/UP\.Browser/", $agent)) {
		print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
		print("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML Basic 1.0//EN\" \"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd\">\n");
		print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
		print("<head>\n");
		print("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
	}

elseif(preg_match("/J\-PHONE|Vodafone|MOT\-[CV]980|SoftBank/", $agent)) {
		print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
		print("<!DOCTYPE html PUBLIC \"-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN\" \"xhtml-basic10-plus.dtd\">\n");
		print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
		print("<head>\n");
		print("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
	}

else {
		print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
		print("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
\n");
		print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
		print("<head>\n");
		print("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
	}
	print("</head>");
	print("<body>");
	print("<p>Sample Text</p>");
	print("</body>");
	print("</html>");

携帯サイトのコーディングにおいて、DOCTYPE宣言とCSSの扱いはPC用サイトのコーディング手法と大きく異なる点の一つです。これらの差異を把握し、携帯サイトのコーディングに挑戦してみてください。

意外と知らない？ ol要素で箇条書きの開始番号を指定するテクニック

Wed, 15 Dec 2010 19:05:10 +0900

順序付きリストであるol要素ですが、例えば1～3番目の要素を記述して、その間にテキストや画像などを挟み、またそれまでの番号から続けようとolを新たに記述すると、箇条書きの番号がまた1から始まってしまいます。そういった場合に、箇条書きの開始番号を指定してリストを作成する方法です。

HTML

サンプルページ

ポイントとしては、開始番号を指定する要素の最初のliにvalue属性を指定することです。value属性が指定されたリストは、その数値から箇条書きの番号が開始されるようになります。

検証ブラウザ：IE6～8、Firefox3.x、Safari5.x、Opera10.x、Google Chrome 8.x

ゼロから始めるガラケーコーディング初歩の初歩編

Thu, 09 Dec 2010 18:35:36 +0900

現在、スマートフォンが爆発的な流行を見せていますが、一方で日本独自の携帯、いわゆるガラパゴス・ケータイの勢いが衰えることはありません。そこで、今回から数回に渡り、「ガラケー」向けのコーディングについて、考えていきたいと思います。

一般のHTMLとは何が違うのか？

基本的には、一般的なHTMLをコンパクトにしたものと考えても差し支えありません。しかし、キャリア...すなわち携帯電話会社ごとに独自仕様のHTMLが用いられていたり、携帯電話ならではの機能（例えば、数字キーごとにリンクを割り当てられたり、文字を点滅・スクロールさせるなどのグラフィカルな要素が追加されていたり）が盛り込まれていたり、絵文字を使用できたりと、PC用のサイトを構築するのとは違った趣向があります。

また、携帯電話の画面はPC用ディスプレイよりも遙かに解像度が低いため、一画面に表示できる情報が限られている、ブラウザのキャッシュサイズに制限があるなどという、携帯電話ならではの注意点も抱えています。

携帯電話は新機種が出るサイクルが早く、また機種ごとに仕様が異なる場合もあるため、新機種が発売されたらきちんとサイトが表示されるか、常に確認する必要があります。各キャリアの公式サイトに現時点での仕様が掲載されているので、コーディングを行う際は参考にするとよいでしょう。

・Docomo
http://www.nttdocomo.co.jp/service/imode/make/content/browser/index.html
・au
http://www.au.kddi.com/ezfactory/tec/index.html
・SoftBank（会員登録が必要）
http://creation.mb.softbank.jp/

XHTMLについて

いわゆる第3世代と呼ばれる機種以降では、携帯用のXHTMLとも言えるXHTML Basicを使用することが可能です。DocomoではFOMA端末、auではWIN端末、SoftBankでは3GC端末がそれらにあたります。

やはりキャリアごとに多少の差異はあるものの、基本的な規格に準拠していれば、どのキャリアからでもサイトを見ることが可能です。

画像の対応状況について

画像についても、キャリアごとにかなりの差異があります。

・Docomo
iモードブラウザ1.0：JPEG・GIF
iモードブラウザ2.0：JPEG・GIF・BMP
・au
JPEG・GIF・PNG
・SoftBank
JPEG・GIF・PNG

基本的には、JPEGあるいはGIF形式の画像ファイルを使用するとよいでしょう。

次回以降は、具体的なコーディングの方法とキャリアごとの仕様について、まとめていきたいと思います。

通常のスタイルとは別に、印刷時のみに有効となるスタイルを作成する方法

Fri, 03 Dec 2010 19:51:09 +0900

通常、何も意識せずに記述したCSSは、画面表示時と印刷時で同じように適用されます。しかし、メディアタイプを指定して記述することで、それらを別々に分割することが可能です。

■CSS内に直接記述する方法

「@media print」という記述以降に書かれたスタイルは、印刷時のみ有効になります。例えば、

この場合だと、画面表示時はフォントサイズが14ptに指定されますが、印刷時には12ptに指定されます。

注意点として、古いMac IEではバグにより@media type { ～ }でくくられた部分の記述が無視されたます。そういった古いブラウザもサポートする場合はご注意ください。

■外部CSSを読み込む際にmediaを指定する

link要素にmedia属性を指定することで、印刷時に適用されるCSSを指定することが出来ます。通常では、

このように記述しますが、例えばこの下に、

このように記述することで、print.cssを印刷用のスタイルとして適用させることが可能です。

注意点として、IE5.5以前のブラウザでは、mediaを指定して外部CSSを読み込む際に、その外部CSSで指定した@mediaのキーワードが無視されてしまうというバグが存在します。そういった古いブラウザもサポートする場合はご注意ください。

これら方法を使うことで、例えばサイドバーやヘッダ要素を非表示にしてコンテンツ部分のみを印刷するように設定したり、印刷時に崩れてしまう問題を回避することが可能です。

最後に、サイドバーやヘッダ要素を非表示にして、コンテンツ部分のみを印刷するサンプルを掲載します。それぞれの要素の内容やスタイルは割愛します。

■HTML

■default.css

■print.css

サンプルページ

検証ブラウザ：IE6～IE8、Firefox 3.x

この発想はなかった！高さの異なるボックス要素を揃えるテクニック

Tue, 30 Nov 2010 18:54:47 +0900

ボックス要素を横並びにするときなどに、中の文字列の行数によって各ボックス要素の高さが異なり、見栄えが悪くなってしまうという経験はありませんか？そこで今回は、高さを指定せずとも各ボックス要素の高さを揃えるテクニックのご紹介です。

HTML

CSS

サンプルページ

ポイントは、全体を囲うdiv要素にoverflow:hiddenを適用すること、そして各ボックス要素にpadding-bottomと、それと同じマイナスの値のmargin-bottomを適用することです。これらを適用することで、高さを指定しなくてもそれぞれのボックス要素の高さが揃うようになります。ここでは、paddingとmarginの値に、IEの表示限界であると言われる32768pxを指定しています。

特にボックス要素の中身が動的に変動する場合や、フォントサイズなどが自由に変えられる場合など、高さを指定できないデザインの際に使えるテクニックです。

デメリット

このテクニックを使用する際のデメリットとして、以下の点が挙げられます。
・ボックス内の要素がpaddingとmarginで指定した値以上になると、表示が崩れてしまいます。
・ボックス要素に背景や影、borderを指定するとデザインが崩れてしまいます。
・複数ページにまたがるような長い文章などが入る要素に対してoverflow:hidden;を指定した場合、印刷する際に1ページ目で印刷が切れてしまう可能性があります。
・要素内にアンカーリンクを指定し、他ページからこのアンカーリンクへリンクとして飛んできた場合、正しくリンクが機能しません。

以上の点にお気を付けください。

■追記 2010/12/06
コメントで様々なご指摘をいただきましたので、それを踏まえて以下の点につきまして内容を修正・加筆いたしました。
ご指摘ありがとうございます！

■修正・加筆内容
・padding/margin値の修正
・デメリットの追加

HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

CSS3で簡単にボタン風バナーを作る

[CSS]CSSスプライトで容量を節約しつつロールオーバーを実現する

[HTML]たった1行でアイコン付きの要素を右寄せにするテクニック

[jQuery]簡単に作れるスライド式メニュー

あなたはどれを使う？ スマートフォンの呼び方一覧

[HTML]今さら人に聞けない「左・右・中央寄せが出来ない時の対処法」

CSSは必要なし！ onmouse属性を使った簡単なロールオーバーの作り方

ソースを見やすくするためのスタイルシート・コードフォーマット

今さら人に聞けない「idとclassの使い分け」

CSS3で新たに追加されるプロパティと各ブラウザの対応状況まとめ

ゼロから始めるガラケーコーディング DOCTYPEとCSS編

携帯サイトにおけるDOCTYPE宣言

CSSの使用可否について

意外と知らない？ ol要素で箇条書きの開始番号を指定するテクニック

HTML

ゼロから始めるガラケーコーディング 初歩の初歩編

一般のHTMLとは何が違うのか？

XHTMLについて

画像の対応状況について

通常のスタイルとは別に、印刷時のみに有効となるスタイルを作成する方法

■CSS内に直接記述する方法

■外部CSSを読み込む際にmediaを指定する

■HTML

■default.css

■print.css

この発想はなかった！ 高さの異なるボックス要素を揃えるテクニック

HTML

CSS

デメリット

HTMLコーディングのノウハウ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

あなたはどれを使う？スマートフォンの呼び方一覧

ゼロから始めるガラケーコーディング初歩の初歩編

この発想はなかった！高さの異なるボックス要素を揃えるテクニック