前回の記事“たまにはhtml5+CSS3について。”で触れたように、近年HTML5 CSS3でのコーディングが増えてきている。

このサイトもそうだが、ボクはこれまでずっとXHTML 1.0 Strictにこだわってコーディングを続けてきた。

予備校の一化学講師(ボクね)が“ビョーキ”になり、授業ができなくなったことでいきなりウェブ担当となったのだが、何を隠そう我が家にはいわゆる“ネット環境”なるものがなかったため、インターネットなるものにもほとんど触れたことがない人間がHTMLもCSS(当時はCSSなんてほとんど使わず、テーブルレイアウトが主流だったが)なんてものが分かるはずもなく、前任者が残したソースの“日本語部分”をただ書き換えるだけ、ってなカンジで遣り繰りすること数か月、これじゃイカンということで一年勃起もとい一念発起してネットの記事や書籍を読み漁り、どうやらこれからの時代はXHTML+CSSの時代だと悟り、それならばXHTMLを究めてやるということで半年ほど独学で勉強しまくり、ウェブ担当となって1年が経とうという頃にXHTML+CSSでこれまでのサイトを完全リニューアルし、HTMLとCSSは大体身に着いたから次は何だろうと考えたときに当時の各種申込フォーム(これまた前任者がperlで書いたもの)がなんだかショボかったため、そうだこれを何とかしようと考えてプログラミング言語を調べたところphpというものの存在を知り、perlよりもhtmlとの親和性が高く初心者にも習得しやすいというところに惹かれてphpを独学で勉強しまくり申込フォームを作り直し、その後マイページを作るということになってphpでのコーディングに没頭し、ほぼ完成間近というところで“ビョーキ”が再発し、約1年の休職期間を経て今度は別の会員制サイトを手掛けることとなり、phpとMySQLとの連携もほぼ身に着いた辺りでそれが最近ようやく一段落ついたため、改めて世間の動向を調べたところどうやらいつの間にかにXHTMLの時代は去りつつあり、HTML5+CSSの時代が到来していることに気が付いたのだが、ボクのこの仕事の原点は“XHTMLを究める”ということだったし、特に以前市場のシェアが高いIEがHTML5の実装にかなり遅れをとっているということもあり、いやいやまだHTML5は早かろうと自分自身に言い聞かせ、まだしばらくはXHTMLで十分でしょうと考えていたのである。(お疲れ様)

しかし、この“ギョーカイ”は驚くほどに進化が早い。

“まだ早い”とタカをくくっているうちに、気が付けば“らっという間”にその進化に取り残されてしまう。

若ければまだしも、40手前のおっさんはなおさらである。

たとえばこの先、予備校業界からIT業界への“転職”なんていう“ご乱心”がもし仮に万が一ボクの心に芽生えたとしても、どこにも相手にされなくなってしまう。

そもそも“40のおっさん”の時点で相手にされないと思うが、“ギョーカイ”がどこであれウェブ制作に身を置いている以上、常にアンテナを張って先端の技術には興味を持っておかなくてはいけない。

と、いうワケで、まずは手掛けている会員制サイトを実験台に(失礼極まりないが)、HTML5 CSS3でのコーディングを始めてみた。

しかし、htmlのソース自体に手を加えるのは少し怖いので、まずはCSS3から始めることにした。

CSSなら、万が一の時にCSSファイルを差し替えたらいいだけだからね。

前置きが超長くなったが、まずは手始めにボックスの角丸からやってみよう。

まずは基本から。

ボックスの角丸には、“border-radius”というプロパティを用いる。

box {
  border-radius: 30px;
}

“30px”というのは角丸の半径であり、当然のことながらこの値が大きいほど“丸く”なる。

因みに二次元のボックスには角が4つあるが、CSS3ではこれらの角丸の大きさを個別に指定できる。

box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 40px;
}

ってな具合。

でも、ここでは事情により(理由は後述)これについては忘れてもらう。

話を戻して、基本的にはこれでOK、と言いたいところであるが、現状このままではほとんどのブラウザで角丸は表現できない。

というのも、現在CSS3はW3C的には“草案段階”であり、正式にリリースされる(“勧告”になる)までは各ブラウザは“独自仕様”というカタチで“先行実装”しているにすぎないのである。

従って、各ブラウザで正しく角丸を表現するためには、独自仕様のプロパティを記述する必要がある。

box {
  -webkit-border-radius: 30px; /* for Safari and Chrome */
  -moz-border-radius: 30px; /* for Firefox */
  border-radius: 30px;
}

CSS内にコメントでも書いてあるが、独自プロパティの頭にある“-webkit-”はSafariおよびChrome系の、また“”はmozilla系(つまりFirefox)の接頭語で、これを“ベンダープレフィックス”と呼ぶ。

ベンダープレフィックス
http://www.htmq.com/csskihon/603.shtml

CSS3が勧告されるまでには、まだ時間が掛かることが予想されますが、 今後審議を重ねる中で仕様変更・一部機能の廃止・新機能の追加が行われる可能性があります。 ベンダープレフィックスは草案段階の機能を実装する際に付けることが推奨されているので、 これらの機能を利用する際には当面ベンダープレフィックスを付ける必要があるでしょう。

ただし、ベンダープレフィックスは、 草案(Working Draft)が勧告候補(Candidate Recommendation)になったときには外すことが推奨されています。 すでにGoogle ChromeやFirefoxなどのブラウザでは、CSS3の機能の一部がベンダープレフィックス無しで動作するようになっています。 また、新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあります。

ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、 今後の仕様策定の進展やブラウザのバージョンアップに備えて、 ベンダープレフィックス無しの指定を併記しておくほうが良いでしょう。

と、いうワケである(手抜き)。

因みに、Operaは“-o-”、IEは“-ms-”というベンダープレフィックスを持つが、“border-radius”に関してはOperaとIE9はともにベンダープレフィックス無しでレンダリングできるので、わざわざ“-o-border-radius”なるプロパティは記述する必要はない。

どのプロパティにベンダープレフィックスが必要なのか、また必要でないのかは今後ブラウザのバージョンアップに伴って刻々と変化していくと予想されるため、ブラウザのリリース情報に対して常に注意を払っておく必要がある。

で。

問題は。

IE8以下である。

果たしてIE8以下で角丸を表現するためにはベンダープレフィックスが必要なのか?

答えは“ノー”である。

では、ベンダープレフィックス無しでOKなのか?

答えは“ノー”である。

つまり、だ。

IE8以下はそもそもCSS3に対応していない(IE8のみほんの一部実装しているが)ため、角丸表現は“ムリ”なのである。

ここで、IE8以下のような“オールドブラウザ”に関する考え方を二つ紹介しておこう。

一つは、“クロスブラウザ”という考え方。

これは、どのブラウザでも同様の表示を確保しようという考え方である。

少し前の話だが、以前IE6やIE7が世間のブラウザの大きなシェアを占めていた頃、世のコーダーはこの“クロスブラウザ”問題に非常に頭を悩ませていた。

というのも、IE6や7はCSSそのものの解釈に大きな“バグ”を抱えていたからだ。

IE6のバグについては、次のサイトが非常におもしろおかしく紹介してくれている。

CSSで見る、IE7。
http://labs.unoh.net/2006/09/ie7_css.html

まあ、結局IE7になってもバグはなくならなかったんだけどね汗。

つまりは、ボックスの横幅がおかしくなるとレイアウト自体が崩れてしまうし、ボックスの内容が消えてしまう(!←これには本当に泣かされました、、、)なんてことが起こってしまうと、コンテンツ自体の可読性が著しく損なわれてしまうのである。

従って、CSSハックといった“裏ワザ”(CSSの解釈のバグを逆手に取り、特定のブラウザのみに特定のCSSを読み込ませるというもの)を駆使してブラウザ間の表示のズレを吸収し、“クロスブラウザ”を達成させなければならなかった。

一方、もう一つの考え方として“プログレッシブ・エンハンスメント”という考え方がある。

クロスブラウザはもう古い!HTML5+CSS3時代のプログレッシブ・エンハンスメント
http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki15/01.html

Webブラウザや端末などの閲覧環境が多様化してきています。そうなってくると「全てのブラウザ・端末間の見た目や動きを合わせるのが大変だ」と、夜な夜な悩んでいる方も多いのではないでしょうか。

全てのブラウザで同じ表示、同じ挙動をさせるという概念を「クロスブラウザ」と呼びますが、これまでのWeb業界において、クロスブラウザは制作の大前提として立ちはだかってきました。

これはブラウザの互換性に焦点を当てた概念ですが、それとは相反する、コンテンツ表現に焦点を当てた制作の考え方が「プログレッシブ・エンハンスメント」 という概念です。

簡単にいうと、「どのユーザーにも同じように情報コンテンツを提供しますが、環境が整っているユーザー(モダンブラウザ利用者)には、よりリッチな見せ方でコンテンツを提供しましょう」という考え方です。

乱暴に言うならば、著しく可読性を損なわない限り“オールドブラウザ”は切り捨てて、“モダンブラウザ”にターゲットを絞ってコーディングしましょう、ってことですわな。

ボックスの角が丸い、丸くないという問題は可読性を損なうような問題ではないので、これらの考え方でいうと“プログレッシブ・エンハンスメント”を採用するのが妥当なラインであると言える。

でもさあ。

できればすべてのユーザーに同じデザインでサイトを閲覧してもらいたいってのが人情ってもんじゃね?

つか、Windows XPに搭載のIEは9にバージョンアップできないから、XPユーザーはIEを使っている限りいつまで経っても“リッチコンテンツ”が見れないんじゃね?

それって可哀そすぎじゃね?

なんとかならね?

、、、と思っている人間は全世界にたくさんいる。

そして、それを何とかしようとする人間がこれまた全世界にたくさんいるのである。

IE8以下でもCSS3を!

そんな願いを叶えてくれるドラ○もん的なライブラリがこの世に数多と存在する。

その中の一つが、“CSS3 PIE”なのである。

CSS3 PIE
http://css3pie.com/

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

ひゃっほい!

なぜだかテンション↑↑である。

このサイトからPIE.htcというファイル(htcは“HTML Component”の略で、外部読み込みファイルのこと。中身はJavaScriptのコード)をダウンロードしてきて、サーバーの適当なディレクトリにポイっと入れて、必要なコードをCSSにちゃちゃっと書くだけで、IE8以下でもCSS3の角丸が表現できるのである。

box {
  -webkit-border-radius: 30px; /* for Safari and Chrome */
  -moz-border-radius: 30px; /* for Firefox */
  border-radius: 30px;
  position: relative; /* ←コレと */
  behavior: url('path/to/PIE.htc'); /* ←コレを記述 */
}

“Documentation”には“border-radius”以外にもPIEで使えるプロパティが記載されている。

  • border-radius
  • box-shadow
  • border-image
  • CSS3 Backgrounds (-pie-background)
  • Gradients
  • RGBA Color Values

角丸の他シャドウやグラデーションなど、ボックス周りの装飾が表現できる。

ひゃっほい!

やはりテンション↑↑である。

ただし、先ほど“角丸を個別に指定できる”ことは一度忘れてもらったが、その理由はコレ。

PIE fully supports the border-radius property as defined in the CSS3 Backgrounds and Borders module specification for IE 6-8. IE 9 and up support border-radius natively.

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Only the shorthand version is supported; the longhand border-top-left-radius etc. properties are not. The shorthand syntax does support different radii per corner, though:

border-radius: 5px 10px 15px 20px; (top-left, top-right, bottom-right, bottom-left).

The rounded corners are applied to the element's background area (including solid background colors, background images, and background gradients), the element's border, and the box-shadow if specified.

Both the standard border-radius property name as well as a custom prefixed -pie-border-radius property name are recognized; if both are present then the prefixed value will take precedence. It is recommended to only use the standard unprefixed property when possible.

正規表現を使った説明、ありがとう。

長々とした引用だが、要は“shorthand”と呼ばれる構文のみサポートしていて、“border-top-left-radius”のような“longhand”な構文はムリぷーということである。

角ごとに異なる半径にしたい場合は“shorthand”構文で“border-radius: 5px 10px 15px 20px;”のように書きなさいってことですが、今のところそんな角丸の使い方はしないので気にしないでおこう。

また、CSS3 PIEを使用するにあたりいくつかの注意点があるが、以下のサイトにまとめられているのでご参考願いたい。

CSS3PIE(PIE.htc)が効かないと思ったら
http://css.microrza.com/csstips/iecss_css3pie/

これで念願の角丸が、、、!

、、、あれ?

一部、角丸にならないぞ?

、、、あれあれ?

グラデーションをかけようと思ったら、IE9でのみ効かないぞ?

、、、あれあれあれ?

なんでやね~~~~ん!!!!!!

to be continued...