nobu417.jp

ブログエントリー

せっかく2013年になったので、久しぶりに・・・いつ以来だろう?恐らく旧デザインは1年半くらい使ったと思うので、サイト全体のデザインを新デザインに移行してやろうと目論んでいる。

一応ウェブで仕事やってますから・・・

デザインを1年半おきくらいに変更したくなるのは理由があって、1年半も時間があると、ユーザーが利用する主たるブラウザのバージョンが上がったりする。そうすると、前のデザインでは画像で表現していた「角丸」みたいな要素だったりも、CSS3 を使ってしまえ!という風に、半ば古いバージョンのブラウザの斬り捨てに出たくなったりするのだ。もちろん、この1年半の間に iPad をはじめ (特にこのサイトは iPad からの閲覧が多い) 、MacBook Pro with Retina display なんかも登場したので、サイト全体をハイレゾに対応したいという思惑もあったりする。

実際、今は移行期間ということもあって、最新の Safari や Google Chrome、Firefox、Internet Explorer 10 と 9 以外では正しく表示されていないようだ。

ほぼ全部入りの IE 以外と制約の多い IE

例えば今回のデザイン変更で、記事ヘッダー部に半透明の黒をアイキャッチ写真の上に重ねたりしているのだが、IE 以外の主要なブラウザは CSS でアルファ値を含む background-color プロパティに対応しているのに対し、IE はまだまだユーザーの多い Internet Explorer 8 では対応していない。background-color プロパティにアルファ値を含ませる場合は以下のように書けばいい。

background-color: rgba(51, 51, 51, 0.8);

これを解決する方法として、IE8 以下の場合には、そこに background-color で指定した色、アルファ値と同じ色とアルファ値を持った透過 PNG を background-image として指定してやる、なんかあるのだが、正直、斬り捨ててしまおうかどうか悩んでいる。

また、background-size プロパティも IE の対応は遅れ気味だ。

実際には IE 自体の対応が遅れているというよりも、IE を主に使っているユーザーの最新版の OS やブラウザへの移行が遅れていることと、IE8 までしか使うことができない Windows XP を使っているユーザーがかなり多くいることに起因している、といった方が正しいかもしれない。

HTML5 と CSS3 を本格採用

今回のリニューアルのもうひとつの目的は、サイト全体を HTML5 でできる限り書き直すことだった (これもあって IE 対応が後手後手になっている) 。近い将来に本格的にレスポンシブ・ウェブデザインに移行して、現状では PC/Mac/タブレット版とスマホ版が別々の HTML として出力されていて、mod_rewrite なんかで Permalink を維持している辺りを改善したいとも思っている。

デザイン移行と同時に記事もちゃんと書きます

実は散々とブログに書くネタはたまっていたりして、消化し切れていない感が自分の中であるので、時間をみつけてはちゃんとブログを更新していきたいと思うので、よろしくお願いします。

この記事へのコメント