[contact-form-7 id="1781" title="ご意見・ご要望・お問い合せ"]

Columns

サイトをリニューアルしました。

2012.12.14

更新頻度がとても少ない当サイトですが(^^);、先日、久々にサイトをリニューアルしました。その際に心がけたポイントをまとめてみました。

HTML5/CSS3でコーディング

今回は随分前からやってみたかったHTML5/CSS3で構築しました。HTML5で新しく追加された要素で、header、footer、navは粗方仕様は想像できるものの、article、section、asideなど、最初は中途半端な知識でコーディング。途中で使い方が間違っていることに気付き、また作り直し、てな感じでした。HTML5のコーディングでよく参考にしたのは、下記のサイトでした。

HTML5で新しく追加された要素の説明が個人的にはかなりわかりやすかったです。ページのサイドバー、「HTMLでつくってみよう」のところにHTML5の要素の具体的な説明へのリンクがあります。

レスポンシブデザインで様々なデバイスに対応

レスポンシブデザインとは、パソコンに加えて最近急増中のスマートフォン、タブレットなど様々なデバイスに対応できるWebデザインのことです。どのデバイスでも見やすくするためにレスポンシブデザインには不可欠な、メディアクエリという機能を利用しました。メディアクエリとはCSS3から追加された機能で、デバイスの画像解像度やウインドウの幅、向きに応じてCSSを切り替えることが出来るものです。

実際、レスポンシブデザインでつくってみると、幅の変化でレイアウトが変わるのが有機的で楽しいです。また、「デバイスにかかわらず、サイトのイメージを損なわない」というところがレスポンシブデザインのメリットのひとつでもありますね。

IEへの対応

IEへの対応はリニューアル前は7以降でしたが、今回のリニューアルで8以降としました。しかし、IE8はHTML5/CSS3未対応。なんてこった!…ってわかってることですが(笑)、対応させるために今のところ以下のライブラリを使用してます。

確認してみると、テーマを変えたことで、まだあちこちに不具合が見受けられますが、ご勘弁。おいおい修正していきますので。今後ともよろしくお願いします。