サイトをコーディングする準備。

サイトをコーディングする準備。

コーディングする作業は、すでにサイト構築の作業では後半に位置する作業です。

この記事は　私が忘れそうになった時に見返すメモです。間違っていることも書いてるかもしれませんしまとまってないかもしれませんが、どうぞお見逃しください。

コーディングの事前準備

1. 画像ファイルを準備する。

   任意のデザイン（自分で作ったサイトのラフ画像など）から画像を書き出しする。

   このとき デザイン時 CSSのbackgraoundプロパティーで表示するのか？　イメージタグで表示するのか？

   事前に考えておくとよい。たとえば、スワップイメージなどを使うときjavascriptを使うのか？
   
   擬似要素:hoverを使うのか。スワップするときのイメージ画像も用意しておく。

2. 作成するhtmlファイルをDwなどで作る前に。

   フレームワークを確認しサイトのフォルダを作っておく、必要なライブラリなどもフォルダに入れておこう。 Dwでサイトで新規サイトの定義をしてフォルダを指定する。
   

   （余談）大規模サイトの場合

   Dwテンプレート で共通のデザイン部分（ヘッダー Áフッター  サイドメニュー  グローバルナビゲーション）を先にコーディングすることを考えよう。  ドリームウィーバー  テンプレートは教科書に詳しい操作方法が載っています。

   DWテンプレートの使い方:http://www.dougamanual.com/blog/61/
   

   サーバーに上げないファイルやフォルダはクローク設定しておこう。 教科書Part12  376ページ

3. Dwを立ち上げて　HTMLをコーディング

   1. 新規ファイルで 共通（Common.html もしくはcommon.dｗｔ）ファイルを作る。共通のファイルを作っておいてindex.html以降を組んでいくと作業効率が上がる。
   2.  環境設定でHTMLのヴァージョン エンコーディング「"utf-8""shift_jis""EUC-jp"」などを設定。
   3.  サイトの定義でフォルダを指定する。
      

      要らないファイルやフォルダは入れない。また別のサイトを定義していたファイルの直下に新規サイトを定義しないこと。

   4. まずは　基本的な＜head＞＜/head＞タグ内のコードをかく。　閉じタグ忘れずに　（/　＞）書こう。 　

      ＜meta＞＜title＞＜link＞＜script＞

      など。まだ決まってない内容があっても空でいれておくとよい。（後で編集できる）
   5. 必要なCSSファイルを作りリンクしておく。
      

      後に読み込むほうが上書きしていくのでリンクの順番に注意
      
      reset_mini.css clearfix.css を最初に書き込んでいく。
      
           reset_mini.css
      
           clearfix.css
      
           common.cssの順番
      
      で指定する
      
      
      
      ただし英数半角で命名すること。

   ★ bodyタグ内の記入

   1. サイトのラフを確認し幅,高さなどを確認しあらかじめDIVタグで各範囲を区切ってマーキングしておく。
   2. 固定幅のサイトでブラウザの中心にサイトを表示する場合　＜div id="wrapper"＞等で囲み幅を指定する。
      

      idはHTMLファイル内には同じ名前は付けれない。英数半角小文字でA～Zのアルファベットから指定しましょう。
      
      なお数字はアルファベットの後ならOKです。 全体を慣れないうちは＜div id="wrapper"＞で固定しよう。

   　ワッパーの中に

   • header（ロゴ サイトの題名 グローバルメニュー 検索フォーム サマリー など固定情報　重要情報を入れるのがSEO的によい）
   • main_contents この中に主な情報を入れる。カラムレイアウト(縦に２行　３行)などの場合さらに カラム（行）の数だけ ＜div＞ タグを事前に 入れておくき。終了タグ部分にコメントを入れておくとタグが複雑になってきたとき探し出しやすい。

     ＜!-- id="side_menu"終わり --＞

     など
   • footer コピーライトやサブ的なリンクなどいれてユーザビリティ（使いやすさ）の配慮が必要。
     
     あんまり重要ではないからシンプルデザインのサイトもあるが ecサイトの場合ここに電子商取引の説明、サイトの管理人の名前　サイトマップ　サイトポリシーなどがリンクされている。
   1. style.cssやcommon.cssに基本的な設定を記入しておく。 サイトに共通なスタイルはbodyセレクタに記入しておく。

      body{
        font-size:87.5%;/*ベースの文字の大きさ例）14px */
        font-family:"メイリオ";*/字体の設定/*
        line-height:160%;/*行間*/
        color:#333333;/*文字色*/
      }
      --------------------------------------------
       h1{ 
       font-size:200%;
       }
      
      h2{
       font-size:180%;
       font-weight:bold;
       }
       
       a:link{}
       a:visited{}
       a:hover{}
       a:visited{}
      ------------------------------------------------
      

      などなど 必要に応じて bodyタグぐらい設定しておいたほうが見栄えがイメージしやすい。

   2. 各＜div＞に幅,floatなど,位置 場所が分かるように仮に背景色を入れておくと分かりよすい。 全体の大きさを見えるようにしておくとブラウジングしたときにわかりやすい。 CSSを新しく記入したらすぐに上書き保存して　各ブラウザで見え方を豆にチェックしましょう。 各divの要素の間隔（余白は）paddingで設定しよう。(パディングを設定した分widthを小さく設定)

   ★ bodyタグ内の記入

   ★ 各Divの中に素材をコーディングしていく。

   1. 必要な要素を先に全部いれていってもよいが・・・慣れないうちは header部分mein_contents部分 footer部分と順番に記入し誤認しないようにする。
      
      内容を入れたら各要素をタグで囲んでいく。

      一番重要なサイトのタイトルやLogoは＜h1＞文字は基本＜p＞ 同意義リストは＜ul＞＜li＞ 定義リストは＜dl＞＜dt＞＜dd＞ 順位リストは＜ol＞＜li＞など 適切なタグでマークアップしましょう。 わからない時は辞書やインターネット検索を検索してみる。

      とくに大事な表題的文章やタイトル宣言部分は　h2～h6を入れよう。 h1 h2の複数のマークアップはタグ重要度を薄れさせるのでhtmlファイル内にはh3 h4を複数入れておこう。

      　重要な文字 太字は＜strong＞見栄えだけなら＜span class="redFont"＞などで設定
   2.  フロートして配置するタグは ＜div＞で囲み clearｆixをかけてフロートをクリアする。
   3.  ボックス要素を利用して 「要素の見栄え」「左右上下の余白」「背景を指定する。」
   4.  
      

      デザインが再現できないとき

      • 見た目が再現できない場合、高さ　幅を計算し直す。
      • 文字の大きさやボーダーの幅で子孫要素が押し出してカラム落ちしたりはみ出たりしてないだろうか？
      • 無用なdivはなるべくつけないほうがよいが 見た目のためにdivをで囲むことも仕方がない。依頼主の見た目デザインを優先しましょう。
   5. 細かな部分の見栄えに入ったらのCSSには一番子孫のタグにwidthやheight設定し。内包する親タグにはボックスモデルのプロパティ（width height）を掛けない。子孫にふくらまさせる。
      
      
      

      ieの場合　背景画像やpaddingを指定している場合は height:1%;を入れて表示させる。(haslayout)

      haslayautoについて詳しいブログ http://coliss.com/articles/build-websites/operation/css/143.html