XHTML&CSS|基本原則、これだけ。-詳細目次 | デザインってオモシロイ -MdN Design Interactive-
contents

XHTML&CSS|基本原則、これだけ。  



Chapter 01 基礎知識


000 これからWebサイト制作を行うために




Chapter 02 情報整理・設計

001 Webデザインとは、情報を整理してユーザーに提供するということ
002 情報構造を設計することの大切さを常に頭の片隅においておく
003 ターゲットユーザー、ペルソナ、ユーザーシナリオの違いとは
004 多くのユーザーにとって使いやすいWebサイトを提供しよう
005 環境に左右されずアクセスできるWebサイトを提供しよう




Chapter 03 情報のマークアップ ─ 基本編

006 HTMLとXHTML、その違いを把握しておこう
007 自分のマークアップしたWebページにあった文書型を選択しよう
008 これからのWebサイトの文字コードは何を指定すべき?
009 XHTMLの冒頭に含まれる要素も実は重要な部分と考えよう
010 ヘッダに含まれるtitle要素はどのように記述するのか
011 meta要素にはWebページの文書情報などを記述しておく
012 head要素に含まれるlink要素についても理解しておこう
013 link要素をうまく活用して利便性を高める
014 JavaScriptやCSSの記述と現実的な利用方法
015 bodyの中の書き方次第でWebページの価値は変わる
016 文書上における意味を持たせるため、HTMLタグを的確に使う
017 情報構造を明確にし、それをうまく配置することも大事な仕事
018 アクセシビリティの向上とSEOの効果も得られるWeb標準準拠
019 見えない部分での操作性の向上を図ることもときには必要
020 id属性はページ中の特定の要素に名札を付けるものと考えよう
021 class属性は意味的に共通化できる要素にラベルを付けると考えよう
022 属性を用いて内容に意味づけできるmicroformatsの今後にも注目しよう




Chapter 04 情報のマークアップ ─ 応用編

023 ブロックレベル要素とインライン要素
024 サイトIDのマークアップは一貫性を重視しよう
025 ナビゲーションメニューはリストとしてマークアップする
026 見出しのマークアップは適切な意味づけが大事
027 本文のマークアップは文書構造を意味づけするための基本
028 より意味的にテキストや欧文をマークアップするには
029 リンクテキストをマークアップするには
030 特殊文字を使用する場合に気をつけたいこと
031 img要素のマークアップについて
032 必要に応じたイメージの活用とは
033 リスト項目を正しくマークアップするには
034 引用と引用元をマークアップするには
035 サイト運営者の連絡先や情報をマークアップするには
036 フォームに構造を持たせるには
037 テーブルをマークアップするには
038 div要素とspan要素について




Chapter 05    デザインの実装 ─ 基本編

    039    CSS(カスケーディング・スタイル・シート)を使った視覚表現
    040    CSSによるデザインを始めるならモダンブラウザを使う
    041    CSS使用時はWebブラウザのレンダリングモードを確認しよう
    042    CSSをXHTMLに適用する場合、基本は外部スタイルシートにする
    043    メディアタイプを指定すれば、デバイスごとに違うCSSを適用可能
    044    スタイルをXHTML内の要素に適用するために使うセレクタを知る
    045    スマートなCSSを書くにはさまざまなセレクタをうまく使う
    046    さまざまな疑似クラスと疑似要素をうまく利用して表現力をあげる
    047    CSSの継承・スタイルの上書き・セレクタの個別性に注意しよう
    048    ブラウザのレンダリング初期値をうまくハンドリングする
    049    デザインラフをもとにして、XHTML+CSSによる実装を行う方法
    050    デザインラフをCSSで実装するときに考えたいこと




Chapter 06    デザインの実装 ─ レイアウト編

    051    CSSレイアウトの要、ボックスモデルを理解する
    052    CSSを使ったテキスト回り込みの表現
    053    clearプロパティの基本の使い方を理解する
    054    CSSレイアウトの裏技、clearfixとは?
    055    floatとpositionを使い分けてより機能的なレイアウトを実現する
    056    floatを使った基本の2カラムレイアウト
    057    floatを使った3カラムレイアウトの指定のコツ
    058    ネガティブマージンについて
    059    自由なレイアウトを実現するpositionプロパティの活用方法
    060    positionを使ったマルチカラムレイアウト
    061    カラム落ち発生時の対処方法
    062    overflowプロパティを使ってコンテンツのはみ出しによるレイアウトの崩れを防ぐ
    063    iframeを使わないフレーム風ブロック
    064    min-/max-プロパティでレイアウトを制御
    065    ブラウザサイズに合わせて表示幅が変わるリキッドレイアウト
    066    ブラウザの文字サイズによって変化するエラスティックレイアウト




Chapter 07    デザインの実装 ─ 装飾編

    067    テキストの装飾とフォントフェイスの指定方法
    068    フォントサイズの指定は可読性を考慮すること
    069    ボーダーの見え方の違いを理解する
    070    背景に画像を配置して装飾的なデザインを実現する
    071    リスト項目を横に並べるには
    072    a要素のリンク疑似クラスを使ったロールオーバーを作るには
    073    CSSのみでドロップダウンメニューを表現するには
    074    idやclassを利用して特定の要素のスタイルを置き換えるには
    075    リスト項目を装飾する手法のあれこれ




Chapter 08 トラブルシューティング

    076    Internet Explorerに関する代表的なバグについて
    077    Internet Explorer 7で変わったこと
    078    CSSハックの存在
    079    これがあると役に立つ制作時必携のアイテム
    080    制作時の困った!こんなときはどうしたらよい?
    081    ブラウザについて(1)
    082    ブラウザについて(2)
    083    Webサイトはどれぐらいのサイズで作ったらいいの?
    084    携帯電話に対応したWebページは別で用意するべき?





twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

2.11-2.17