鈴木智子のホームページのアクセスアップ コーディング講座 制作からSEO・SEM・広告戦略まで、Webサイトのノウハウを公開!

コーディングする

ホームページの中身の設計と外見の設計が終わったら、いよいよコーディングです。

ここまで来れば、あとは、2~3ページ作ってしまえば、単純な流し込みの作業になります。もうひと踏ん張りです。

コーディングにも作法があり、その作法に則った記述をする事をお勧めします。

正しいブラウザともっとも使われているブラウザ

CSSハックについて」でも説明しますが、ホームページを見るためには、ブラウザが必要です。
コーディングをする上で気をつけなければいけないのが、各ブラウザの挙動です。
スタイルシートを使ってデザインしていると、大抵のブラウザでは正しく表示されるにもかかわらず、なぜか、特定のブラウザでは表示が崩れるということがあります。
よって、ここから先は、もっとも正しい動きに近いFirefoxというブラウザで話を進めます。
当然、もっともユーザー数の多いInternet Explorer対応も最後に行います。

以下のブラウザの普及率の表は、私が経営する「株式会社西新宿ドットネット」とその顧客に訪問するユーザーエージェント(ブラウザ)の統計データの平均値です。(2009年1月現在)

ブラウザの普及率(2009年1月現在)
ブラウザ名 普及率 備考
Internet Explorer
71.27%
シェアNo.1、Windowsの開発元のMicrosoft製品
Firefox
19.85%
W3Cにもっとも忠実、コーディングの際のデファクトスタンダード
Safari
5.29%
Macの開発元のApple製品、Windows版有

マークアップ

文書の構造はhtmlで、見た目はcssで制御することが推奨されています。

cssとは、Cascading Style Sheets(カスケーディング・スタイル・シート、カスケード・スタイル・シート)のことで、htmlの要素をどのように表示させるか指定し、文書の「構造」と「見た目・体裁」を分離させるためのものです。つまり、「構造のhtml」と「見た目・体裁のcss」、2つのファイルの組み合わせでホームページは完成するのです。

htmlとcssはマークアップ言語と呼ばれる同じカテゴリの言語ですが、書き方が若干異なります。
両方を覚えるのは大変ですが、SEOには必要不可欠ですので頑張りましょう。

デザイン講座」で作ったデザインを見ながら、「ホームページ企画講座」で作成したhtmlのドラフトを修正する作業が最初の作業です。

htmlは、あくまでも文書の構造をコンピューターに理解させるための印付けの言葉です。

すべてのテキストを<p></p>(段落を示すタグ)で挟むだけでもhtmlになりますが、適切なタグを指定することで、「大見出し」の部分、「リンクが設定されている部分」など、的確にコンピューターに提示することができるようになります。

これは、SEOの面でも非常に有利に働きます。

それでは、具体的に「htmlを仕上げる」を説明しましょう。

follow me

鈴木智子のホームページのアクセスアップ講座