■タイトル(仮称) MOBILE SITE DESIGN SHOWCASE 「HTML+CSSで構築する、携帯サイトデザインテクニック」 ■本書の概要 ドコモ2009年夏モデルにて、iモードが "iモードブラウザ2.0" へ進化した事により、携帯電話会社の主な3キャリア(ドコモ、ソフトバンク、au) 全てがCSSを使った携帯サイトを構築する事が可能となった事を受けて、3キャリアを対象とした本格的で実践的なCSSデザインのテクニック集。 ■ターゲット層 ・WEBサイト作成経験者 ・携帯サイト作成経験者 ・これから作ってみようという作成者予備軍(作ってみたいという欲求を促すような内容) ■留意点・他 ・マークアップに関する事項は深くは触れない。(HTMLの知識書ではない) ・文書構造はXHTML1.0 Transitionalにてコーディング。(ドコモがXHTMLを使わなくてもCSSが反映できることは触れておく) ・後方互換は最低限においての考慮とする(これを実現するための複雑怪奇なマークアップはやらない) [1] 携帯サイトをCSSでデザインする 1-1 携帯サイトに誤ったHTMLが氾濫したワケ 1-2 CSSレイアウトとは/CSSを使う事のメリット 1-3 CSSの書式 1-4 CSSの指定方法 1-5 後方互換の考慮 [2] 携帯サイトの基本形 2-1 レイアウトの基本 2-2 ユーザビリティを意識したページ作り 2-3 CSSを使ってキャリア/ブラウザによる差異を無くす [3] ヘッダーのデザイン 3-1 サイトのイメージを決定付ける重要な部分 3-2 タイトルのデザイン 3-2-1 文字の大きさ 3-2-2 背景色を変えてみる 3-2-3 罫線を使ってみる 3-2-4 画像を使ってみる 3-2-5 タイトルそのものを画像に置き換える(*) > *対応状況による [4] メニューリストのデザイン 4-1 デザインの前にリンク先を分かりやすく 4-2 リストを使ったメニューの構築 4-2-1 リストマークの形を変える 4-2-2 リストマークを画像に置き換える 4-3 tableタグを使って横並びのメニュー(**) 4-4 画像とリンク先の説明分を入れたメニュー >**auがリストのinline処理に対応していれば内容変更 [5] コンテンツのデザイン(テキストサイトにおけるデザインを中心とする) 5-1 文章を見やすくする一工夫 5-2 画像を効果的に配置する 5-3 ページ上部へ戻るアンカーを配置する [6] フッターのデザイン 6-1 "Footer"「お洒落は足元」から 6-2 フッターに何を置くべきか 6-3 デザイン提案 [7] デザイン集 (3章から6章までの集合体となる部分/様々なレイアウトのデザインの紹介) 7-1 インデックスページ(***) 7-2 作成者の紹介ページ(***) 7-3 コンテンツページ(***) 7-4 リンク集ページ(***) 7-5 メール送信ページ(***) >***いくつか例を紹介 [8] 付録 8-1 キャリアごとのCSS対応プロパティ一覧表