アダプティブレイアウト

アダプティブレイアウトについて調べました。

一昔前だと、PC版、携帯電話版を用意して、それぞれについて最適化をしていたのですが、最近は同じソースに対してCSS3でレイアウトコントロールをできるような技術が使えるようになっているようです。どこへいったXHTML/XMLという感じがものすごくして、世の中の流れというのは非情だということを痛感します。

それはさておき、「ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン」によると、次の手順で作業を進めるのが良いということです。プログラムコーディングもそうですが、HTML/CSSもベース部分は単純でも飾り立てをしていくと、どんどん肥大化していってわけがわからない状態になっていきますね。CSSのライブラリ化みたいな機能があると便利なのですが、スタイルのオーバーロードで頑張るか、JavaScriptによるライブラリ化で頑張るか、どちらかなのかなぁ、と思っているところ。

1. HTML5マークアップ
1.1. 基本マークアップ
1.2. 構造化マークアップ

2. 基本デザイン
2.1. 基本スタイルの指定
2.2. 文字サイズの決定
2.3. 行高やマージンの値

3. アダプティブレイアウト
3.1. 単位をピクセルからemに変換
3.2. フィクスドレイアウトからリキッドレイアウトに変換

4. 検証、HTML5未対応ブラウザ対応
4.1. 対象とするブラウザで検証
4.2. IE7, IE8 をHTML5に対応
4.3. IE7で検証

5. スマートデバイス
5.1. スマートフォンで検証
5.2. ビューポート指定
5.3. ビューポート決定
5.4. メディアクエリ
5.5. CSS3未対応ブラウザ対応
5.6. アダプティブ・ウェブデザインの最終確認

作業について、具体的な内容は項目から大体わかるはずです。詳しく知りたい場合は、参考資料をご覧ください。

マークアップから作業をするというのは、低レベルなところからの作業に感じるので、できるだけテンプレート化していきたいと考えているのですが、なかなかうまくいかないというのが、最近の悩みになります。資産が増えていかないと厳しいと思っているのですが、なかなか資産化できないものですね。

同じタグの記事: CSS
同じタグの記事: HTML
同じカテゴリの記事: Book
関連書籍: CSS