このサイトの使い方

目次

• 1. 概要

  • マニュアルの目的

• 2. 基礎知識

  • 2-1. 参考書籍

    • ブラウザごとの表示違いを把握しよう。
    • コーディング中に横に置いておきたい本
    • もう一歩踏み込んだ知識を。
    • ある程度知識がついてきたら・・・。
    • はじめに読む本

  • 2-2. 用語集

    • DOCTYPE宣言
    • ボックスモデル
    • CSSハック
    • クロスブラウザ
    • DOCTYPEスイッチ
    • 後方互換モード
    • 標準準拠モード

• 3. コーディングガイドライン

  • 3-1. 環境設定

    • ローカルテスト環境の構築
    • WinMergeの環境設定
    • Dreamweaver8の環境設定

  • 3-2. コードフォーマット

    • (X)HTML、コードフォーマット
    • スタイルシート、コードフォーマット
    • スタイル名の付け方ガイド
    • "id"と"class"の使い分け

  • 3-3. サイト・ページの構想

    • 外部ファイルの管理方法
    • ページを構想する
    • テンプレートを作ってメンテナンス性アップ

  • 3-4. レイアウトの組み方

    • 2カラム・サイドナビゲーション（リキッドタイプ）の組み方
    • 3カラムの組み方
    • 2カラム・サイドナビゲーションの組み方

  • 3-5. パーツの作り方

    • 3-5-1. テキスト装飾

      • backgroundを利用したテキスト装飾 [約3分]

    • 3-5-2. 回り込みテキスト

      • background で回り込みテキスト[約3分]
      • float で回り込みテキスト[約2分]

    • 3-5-3. 複数列

      • display で複数列
      • float で複数列[約10分]

    • 3-5-4. ボックス

      • ボックスを作るときに気をつけること
      • background を使ったボックスの作り方 - 要素が一つだったら - [約6分]
      • background を使ったボックスの作り方[約6分]

    • 3-5-5. メニュー

      • display: inline を使った簡単な横並びメニュー
      • メニューの作り方
      • float で複数列[約10分]

    • 3-5-6. ロールオーバーボタン

      • JavaScriptでロールオーバーボタン[約3分]
      • CSSのみのロールオーバーボタン[約5分]

    • 3-5-7. Flashテキスト（sIFR）

      • Flashテキスト（sIFR）の使い方[約15分]
      • Flashテキスト（sIFR）とは

  • 3-6. 各ブラウザへの対応法

    • 崩れない、ブラウザごとに違いが出ないコーディングのまとめ（まだ下書き）
    • 条件付コメント
    • よく使うCSSハックの紹介
    • 各ブラウザのデフォルト設定を壊す
    • 「後方互換モード」と「標準準拠モード」それに関わるIE6のバグ

  • 3-7. テスト

    • 総合テスト

• 4. トラブルシューティング

  • 4-1. レイアウト崩れ

    • float を指定した要素を含む親要素がおかしくなる。[対象：WinIE5.x,6.0]
    • marginがおかしい[対象：全ブラウザ]
    • marginがおかしい（float周り）[対象：IE5.x,6.0]
    • ボックスモデルの大きさがブラウザによって違う[対象：全ブラウザ]
    • レイアウトが崩れる[対象：全ブラウザ]

  • 4-2. 表示されない

    • リストマークがおかしくなる。[対象：WinIE5.x,6.0]
    • リストマークが表示されない。[対象：WinIE5.x,6.0]
    • line-heightが指定された相対配置要素の上ボーダーが消える。[対象：WinIE5.x,6.0]
    • top, leftが指定された要素では right, bottomを認識しない[対象：WinIE5.x,6.0/MacIE5.2]
    • 親要素からはみ出した分だけ子要素が表示されない。[対象：WinIE5.x,6.0]
    • 背景を指定したブロック要素内のfloatを指定した要素が消える。[対象：WinIE5.x,6.0]
    • border-topが1px分消えて表示される[対象：WinIE5.5,6.0]
    • borderが表示されない。[対象：IE5.x,IE6.0]
    • 背景が表示されない[対象：全ブラウザ]

  • 4-3. 表示位置のズレ

    • table要素とcaption要素の間に余白が出来る。[対象：WinIE5.x,6.0/MacIE5.2/Opera9.0]
    • clear を指定した要素の上に10pxの余白が出来る。[対象：WinIE5.x,6.0]
    • 負数のマージン指定が効かない。[対象：WinIE5.x,6.0標準]
    • fieldset の上パディングがおかしい。[対象：WinIE5.x,6.0]
    • 下マージンが効かない。[対象：WinIE5.x,6.0]
    • width が指定されたリスト要素のマージンがおかしい。[対象：WinIE5.x,6.0]
    • li要素の子要素に display: inline 指定をした要素があると余白が出来る。[対象：WinIE5.x,6.0]
    • li要素またはli要素の子孫要素に width を指定するとリストマークの位置がずれる [対象：WinIE5.x,6.0]
    • fieldset要素を親に持つinput要素などにform要素のマージンが適用される。[対象：WinIE5.x,6.0]
    • 絶対位置指定するとき rightプロパティで指定すると位置がおかしくなる。[対象：WinIE5.x,6.0]
    • 絶対位置指定された要素が、後続の要素のマージンを引き継ぐ。[対象：WinIE5.x,6.0]
    • border がずれる、乱れる。[対象：WinIE6.0]
    • :hover を指定したアンカーがずれる[対象：WinIE6.0標準]
    • li要素を親要素としリスト要素（ul,ol,dl）を置くとリストマークがずれる[対象：WinIE5.x,6.0/Firefox]
    • 左border と 四方padding を指定した要素の直後にある要素がずれる。[対象：WinIE5.5,6.0]
    • float で段組をする際に、横のボックスと重ならないように margin を入れて組むと文字がずれる [対象：IE5.5,6.0]
    • marginがおかしい[対象：全ブラウザ]
    • marginがおかしい（float周り）[対象：IE5.x,6.0]
    • 左・中央・右寄せが出来ない[対象：全ブラウザ]

  • 4-4. 文字に関すること

    • 見出し要素（hx要素）が親要素の font-size を継承しない。[対象：全ブラウザ]
    • ブラウザで文字サイズを変更すると大きさがバラバラになる。[対象：WinIE5.x,6.0]
    • table要素にフォントサイズが継承されない。[対象：WinIE5.x,6.0互換]
    • :first-letter擬似要素を相対単位で指定した場合のバグ。[対象：WinIE5.5,6.0]

  • 4-5. その他

    • @importantが効かない。[対象：WinIE5.x,6.0]
    • 継承されないはずのプロパティが継承される。
    • リストマークがおかしくなる。[対象：WinIE5.x,6.0]
    • html要素にスタイルを設定できない。[対象：WinIE5.x,6.0互換]
    • 背景がはみ出す。[対象：WinIE5.0,6.0]
    • hr要素の上下にマージンが出来る。[対象：WinIE5.x,6.0/MacIE5.2/NN7.1]
    • head要素とその子孫要素が表示されない。[対象：WinIE5.x,6.0/MacIE5.2]
    • リンク先へジャンプした後の画面位置がおかしい。[対象：WinIE5.x,6.0]
    • ブロックレベル化したa要素のリンク範囲が子要素の部分だけになる。[対象：WinIE5.x,6.0]
    • 擬似要素に vertical-align が効かない[対象：WinIE5.x,6.0/MacIE5.2]
    • :first-letterが効かない。[対象：WinIE6.0標準]
    • ボックスの幅が内容物に合わせた大きさになる。[対象：WinIE5.x,6.0]
    • ボックスの高さが内容物に合わせた大きさになる。[対象：WinIE5.x,6.0]
    • top, leftが指定された要素では right, bottomを認識しない[対象：WinIE5.x,6.0/MacIE5.2]
    • 連続したbr要素が一つしか認識されない。[対象：WinIE5.5,6.0]
    • img要素にpaddingが効かない[対象：WinIE5.x,6.0後方互換]
    • ボックスモデルの大きさがブラウザによって違う[対象：全ブラウザ]
    • IEが標準準拠モードで表示されない（後方互換モードになる）[対象：WinIE6.0]

• 5. Tips

  • 5-1. (X)HTML・CSS

    • コーディングスピードを早くする

  • 5-2. SEO

    • SEOを意識してコーディングする上での注意点

最近の更新状況

• @importantが効かない。[対象：WinIE5.x,6.0]

  
  2006年08月28日投稿者 kogawa : 4-5. その他| コメント (0)

• 継承されないはずのプロパティが継承される。[対象：WinIE5.x,6.0/MacIE5.2]

  
  2006年08月28日投稿者 kogawa : 4-5. その他| コメント (0)

• table要素とcaption要素の間に余白が出来る。[対象：WinIE5.x,6.0/MacIE5.2/Opera9.0]

  
  2006年08月28日投稿者 kogawa : 4-3. 表示位置のズレ| コメント (0)

• リストマークがおかしくなる。[対象：WinIE5.x,6.0]

  
  2006年08月28日投稿者 kogawa : 4-2. 表示されない | 4-5. その他| コメント (0)

• float を指定した要素を含む親要素がおかしくなる。[対象：WinIE5.x,6.0]

  
  2006年08月28日投稿者 kogawa : 4-1. レイアウト崩れ| コメント (0)