選択されているタグ : CSS

タグを絞り込む : PIE みんビズ セミナー ホームページ作成 情報デザイン

IEをパワーアップするPIE

CSS3がもたらすホームページ作成の未来

現在のホームページ作成はWeb標準に基づく制作が主流です。つまりHTMLで文書を構造的にマークアップし、CSSで見た目をコントロールします。ところが、見た目を制御するCSS(現行版は2.1が最新)では、グラフィックソフトのようなリッチなデザインを施すことができません。

そのためCSSでは見た目のコントロールというよりも、レイアウトのコントロールを行います。見た目のデザイン的な質感については、グラフィックソフトで作成したパーツを画像(前景及び背景)として利用しています。CSS3という新規格が策定中ですが、見た目のデザインを施す機能が大きく強化れるため、実用段階にはいると制作現場の作業も大きく変わりそうです。

FirefoxやSafari/Chromeの最近のバージョンではCSS3の先行実装が進んでいます。ところが最大シェアを誇るIntenet Explorerの実装具合は、まだまだこれからという状況です。これは最新版のCSS3対応度が低いことと、非対応の旧バージョンの利用者も多いことが問題点です。

IEのCSS3対応度を擬似的に引き上げるPIE


「CSS3は使いたい、しかもIEも対応する形で」という状況に、一考の価値があるのがPIEです。PIEはIE6以降のCSS3対応度を引き上げるプログラムで、昔からあるIEの独自機能を利用してCSS3と同じデザインを可能にします。対応するのは「角丸」「ドロップシャドー」「背景グラデーション」「複数背景画像」などです。

利用法はサイトからファイルをダウンロードして適切なフォルダに保存。CSS3を利用したい箇所のCSS設定の最後に「behavior: url(PIE.htcへのパス);」を記述するだけです。角丸を適用するソースのサンプルはこんな感じです。

.hogehoge {
border: 1px solid #696;
border-radius: 8px;
position: relative;
behavior: url(PIE.htcへのパス);
}

使用上の注意

PIEを適用する要素には「position: relative;」を指定

position: relative;を指定しないと、効果が反映されないばかりか背景やボーダーが消えてしまうことがあります。「behavior: url(PIE.htcへのパス);」と position: relative; はセットで指定します。

「behavior: url(PIE.htcへのパス);」のパスはサイトルートからの相対パスが安全

PIE.htcへのパスは、CSSファイルからのパスではなく、CSSファイルがリンクしているHTMLファイルからのパスで記述するようです。そのためHTMLファイルの場所によってパスが変化します。回避策としては、「サイトルートからの相対パス(/hoge/PIE.htcなど)で記述」または「絶対パス(http://huge.com/hoge/PIE.htcなど)で記述」が考えられます。

.htcが使えない場合は、.htaccessファイルに「AddType text/x-component .htc」を追記

.htcはIE独自のプログラムを記述するファイルですが、サーバーによっては認識しない場合があります。その時は、.htaccessファイルに「AddType text/x-component .htc」を追記して.htcファイルを認識できるようにします。.htaccessが利用できない場合は、「behavior: url(PIE.htcへのパス);」を「behavior: url(PIE.phpへのパス);」に変更することで、PHP版が使えるようです。また、JavaScript版を利用する手もあります(詳しくは公式サイトなどを参照ください)。複数の手段があるのがありがたいですね。

印刷時にPIEによるCSS3効果が印刷されないことを理解

非常に便利なPIEですが、どう頑張っても解決できない欠点もあります。PIEによるCSS3効果が印刷されないことが最大のウィークポイントでしょうか。こればかりは今後の開発に期待するしかありません。また、そもそもこういったプログラムを利用することの可否については、慎重に判断する必要があると思います。


PIEを使って、CSS3を利用したホームページ作成を、IEにも対応しながら体験してみてはいかでしょう。ちょっと先の制作現場の姿が想像できると思います。


プロフィール

矢部 靖人(hamnaly)

いくつかの制作会社でWeb制作やDTPから営業まで経験し、2010年に独立。現在はhamnaly(ハンナリィ)という屋号で、Web制作を中心に地元企業のWeb活用を応援する事業を模索中。理想は高く現実は厳しく、下請け制作を中心に生きています。Knock! Knock! 主催。

エントリーリスト

カテゴリーリスト

タグ