閲覧環境で表示がずれてしまう場合の対処方法

この記事は、作成日から10年経過しています。内容が古い可能性があります。またこの記事は、大幅なデザイン変更前に書かれたものですので、レイアウトが崩れている可能性があります。ご了承ください。

ウェブサイトを作成するとき、一昔前は、Internet Explorerとフィーチャーフォンのことを考えて制作すれば、それなりに多くの閲覧者にとって最適に閲覧することができました。しかしながら、近年は、ギークな人(深い知識をもつ人)でも、パソコン上で様々なブラウザを利用するようになり、モバイル環境もフィーチャーフォンではなく、スマートフォンになったことで、より多様性が進んでいます。

すべての端末にゼロから最適化することはかなり困難ですが、あるツールを使うと、深い知識をもたずとも、最大限最適化することが可能です。CSSフレームワークというものです。そもそも、ウェブサイトのページ一つ一つは、一般に、HTML(XHTML)という骨組みを示すコード、CSSというデザインを示すコード、JavaScriptという動作を示すコードの3つ構成されます。閲覧環境を揃えるという意味では、3つとも重要な要素ですが、特にデザインの観点が重要になりますから、CSSに大きな影響を受けます。このCSSをゼロから作って、すべての環境に合わせて整理するのはとても大変ですから、できるだけ多くの環境で表示ズレがないようなテスト済みパッケージを提供してくれるサービスがあります。

この代表的(と冨山が思っているもの)として、BootStrap、Foundation、PureCSSという3つがあります。この3つにはそれぞれ特徴があって、動的なウェブサイトを作りたければ、BootStrap、Foundationが適していて、できるだけ軽量で読み込みが速いものを作りたければPureCSSが適しているかと思っています。いずれのサービスも、一定以上のウェブ制作の知識がなければ、利用するのはなかなか難しい部分がありますが、ここで申し上げたいのは、既存のウェブサイトをこれらのパッケージに合わせる形で移行することで、将来的に閲覧環境が増えても、パッケージ側がバージョンアップで対応できる可能性が高いということです。また、パッケージのバージョンアップに合わせて、ウェブサイトに手を入れればいいので、ゼロから考えるよりもずっと楽になります。長期的なメンテナンス性の観点からもおすすめできる手法です。

ちなみに、当社のサイトはすべて2013年秋にPureCSSベースになっています。オフィシャルウェブサイトは、デザインを一新して新規に制作。私のブログと妻のブログは、既存のデザインをほぼそのままにPureCSSに移植しました。軽量なので、当社のウェブサーバ(nginx)とも相性がよく満足しています。

  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次