1. ホームページ作成の最初のステップ。
    1. 「テーマ」を決める。
  2. HTML文書とスタイルシートの関係。
    1. ホームページの正体。
    2. スタイルシートの重要性。
    3. ホームページの “ レイアウト崩れ ”
    4. ホームページの文字コード


ホームページ作成の最初のステップ。

「テーマ」を決める。

「テクニックや知識があれば、ホームページはすぐ作れる、」と思うのは少し認識不足です。 最も重要な要件は、技術的な問題よりも、「そのホームページの「テーマ」を決める」ことです。

たまたま目にしたサイトのトップページが、真ん中に大きな写真が1枚貼られて、その下に小さなボタン 「入口」があるだけで、内容の説明もなくて、タイトルバーの表示も「私のホームページ」などと なっていたら、「入口」ボタンを押して中を見てみようとする人は、余程のヒマ人か物好きな人だけだと 思います。
 ネット上のテンプレートを見れば分かる事ですが、「そのページが何のページか」ということが 何か所にも、くどいほど記述されています。訪問者に「次のページ」に興味を持ってもらう為の重要な ポイントでもあるのです。

テーマがいい加減だと、更新するための資料も集まりにくいし、又、更新意欲もわいて来ません。 結局、何年たっても最初の公開時のまゝで、アクセスして呉れる客も無く「ネット上のゴミ」になるだけです。 又、多趣味の人によくあることですが、テーマを欲張り過ぎて、どれも中途半端に終わっているサイトも 見かけます。 やはり、「自分の最も興味を持っている事。」「長年やって来て、今後も続けたい事。」などに 絞ってテーマを決めるべきです。これなら更新の資料も自然に集まり、更新の意欲が衰える心配も ないはずです。

テーマさえしっかり決められていれば、極端な話が、技術・知識がなければ、持っている人に頼んで 作ってもらい、あと、更新するための勉強をする。という方法さえあります。
又、最近は利用しやすい無料テンプレートもネット上に多数公開されていますので、こういうものも 利用しながら、徐々にスキルを高めて行くのも堅実な方法の一つです。

参考サイト「テーマや内容などを決める。」


ページトップへ戻る

HTML文書とスタイルシートの関係。

ホームページの正体。

ホームページ(Webページ)の本質は「HTML」というテキスト文書で、これをブラウザ (Webページを閲覧するためのアプリケーションソフト)で開くと、様々にデザインされた ページとして表示されるわけです。

「HTML」は基本的にはWebページの構造(骨格)を規定するだけのもので、文字、画像、 などをその中に表示させます。 これらの文字、画像などの「表示位置」、「大きさ」、「色合い」などの装飾的要素は、 「スタイルシート」によって表現するのが基本とされています。

HTML文書
(ページの構造)

← 両者を連携 →

スタイルシート
(ページのデザイン)


今、仮に次のような「HTML文書」がページ内に書かれていたとします。
 <p><img src="image/abc.jpg" alt="写真abc" width="600px" height="450px"></p>

この文書(ソース)の意味は、「"image"という名前のフォルダーの中の、"abc.jpg"という画像を、 横幅600px高さ450pxの大きさで、標準段落<p>の中に表示しなさい。」という指示です。
ブラウザは、これを読み取って解釈し、ページに「abc.jpg」という画像を、指示通りに表示してくれるわけです。
但し、このままでは画像の水平方向の表示位置は「左端」になります。この位置を「中央」にしようと思えば、 段落<p>の中に「align="center"」という“属性”を挿入すれば実現できますが、この属性は「非推奨」に なっていますし、上でも書いたように「装飾的要素」はスタイルシートを利用するのが標準とされています。


※ HTMLファイルの中に「構造」と「装飾的要素」が混在することのデメリット。
  1. 行数や行の長さが増えて見通しが悪くなる。
  2. 同じ書式を複数の箇所で適用しようとすると、全部の箇所に書く必要がある。
  3. 後で修正しようとすると、多くの場所で変更が必要になる。
  4. 複数のページでデザインを統一するのが面倒になる。

スタイルシートの重要性。

近年、採用するウエブサイトが増えて来た新しい「HTML5」では、このような役割の分担が 厳密になっていて、従来の「HTML4」で許されていた「HTML」の中での装飾的要素の使用 が、殆ど禁止になっています。

このため、ホームページ(Webページ)を制作するには、スタイルシートの利用は欠かせない ものになりました。

又、ネット上に掲載された無料の「テンプレート」を利用すればホームページは作れますが、その場合 でもその「テンプレート」で使用されているスタイルシートの一部を編集するケースが出て来るので、 スタイルシートの習得は必要不可欠です。

ホームページビルダーを利用してホームページを作成する場合でも、ビルダーに付属の テンプレートを利用すると、必ずそのテンプレートに付属のスタイルシートの一部を編集する場面が 生ずると思います。
 ところが、ホームページビルダーのスタイルシートの編集は、 初心者に解かりやすいものとは云えません。多分、「シキイが高いな」と感じると思います。

これは私見ですが、本気でスタイルシートの勉強をしようと思うのならば、 むしろ、ビルダーを離れて他の「入力支援機能が充実したHTMLエディター」を利用することを お勧めします。その方が無理なくスタイルシートを使いこなせるようになると思います。


ページトップへ戻る

ホームページの “ レイアウト崩れ ” の問題。

自宅でホームページを制作してアップロードし、制作に使用したパソコンのIEで 開いたら、ちゃんと正常に見えるのに、出先のパソコンでIEで開いたら、レイアウトが完全に 崩れていた。と云うようなトラブルに出会うことがあります。

これの大きな原因の一つは、「ブラウザ」の種類やバージョンによって、 スタイルシート(CSS)への対応状況の差や解釈の違いが存在するという事です。
又、ブラウザの表示モードの違い(標準モードと互換モード)も影響します。
完全にCSSによってレイアウトされたページを、「互換モード」のIEで開けば、 CSSが適用されず、例えば「横並びのメニュー」は「縦並び」で表示されてしまいます。

このような現象を避けるには、

  1. どのようなブラウザで開かれても「互換モード」にならないようにして置く。
    これは「<head></head>」内の「<meta>」情報を工夫する事で実現可能です。
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 」を追加する。
  2. ブラウザにより対応状況に差があるようなCSS要素の使用を避ける。
  3. ページのレイアウトに<table>を併用する。
    例えば、「5要素の横並びメニュー」は「1列・5行の<table>」を利用して作る。

W3Cの規定では、<table>をレイアウトに利用することは推奨されて いませんし、
<table>は中のデータを全て読み込んでから表示されるので、複雑に“入れ子” になっているものや、サイズが大きい画像が多数組み込まれたものは、表示に時間がかかり、 閲覧者に嫌われる原因となります。

しかし、上の 3.のような使用法ならば、速さには殆ど影響はありませんし、 “崩れ”の防止という観点からは、許容範囲内だと思います。

参考: 「<table>による横並びメニュー」の見本。→ 「見本ページへ」


ページトップへ戻る

ホームページの文字コード

文字にはアナログ文字(例えば、手書き文字)とデジタル文字(例えば、PCの画面に表示される文字)の 2種類があります。特にインターネットのWEBページに表示されている文字は、“画像”として表示されるものを除けば 全てデジタル文字です。

文字をコンピューターで取り扱う為に利用されるのが、文字コードです。コンピューターは“デジタル情報” つまり“1か0か”を使用して各文字をコード化することで初めて「文字として認識」されるようになるわけです。

文字コードの種類。

日本国内で常用されている「文字コード」は次の3種類です。
   Shift_JIS , UTF-8 , EUC-JP

この3つの文字コードは、どれを使用してもほゞ正しい日本語表記になりますが、 それぞれに次のような特徴があります。

Shift_JIS
ウインドウズの内部日本語処理用の文字コードに採用され、以後パソコンの爆発的な普及に伴い、 メジャーな日本語文字コードとなりました。
ウインドウズ付属の「メモ帳」はデフォルトの文字コードが「Shift_JIS」になっています。
欠点は、一部の漢字がコード表の“制御コード”を共用している為に、或る特定の文字を使用すると、 「文字化け」を起こす場合があることです。

UTF-8
世界中で共通に使える文字コードとして制定されたもので、今後普及が進むと思われます。
最新のウエブページ規格である「HTML5」では文字コードとして、この「UTF-8」の使用が推奨されています。

EUC-JP
UNIX系のOS用の文字コードとして企画制定されたものですが、ウインドウズでも使用出来ますし、 文字化けも気にならないようです。
ブログ用のサーバーなどでよく使われていて、「gooブログ」は「EUC-JP」です。
文字コードの設定。

文字コードが正しく設定されていないと、「文字化け」などの不具合が生じることが あります。次のような「設定の決まり事」を守ることが必要です。
 利用者の多い「ホームページビルダー」 を例にして説明します。

  1. 「ツール」→「オプション」→「ファイル」タブ。
    1. 「出力漢字コード」と「METAタグで指定した文字コード」を同じにする。
    2. 「LANG属性を指定する」を「日本語」にする。
    3. 「詳細設定」を開いて、「変更するタイミング」の「ファイルを新規作成」と
      「ファイルを保存したとき」 の2箇所にチェックを付ける。




  2. ページのソースを開いて設定結果を確認する。
    1. <!DOCTYPE・・・ が標準モード(http://・・・付き)になっているか。
    2. 「lang="ja"」になっているか。
    3. <meta ・・ ・・ charset=*****">の文字コードセットが正しく入っているか。
    4. 文字コードセットの行より上に、コメントなどの日本語を含んだ行があると、
      ブラウザはそれを 先に読み込んで、誤ったコードセットをする恐れがある
      ので、それも確認する。
  3. 「外部スタイルシート」を利用している時。
    1. 外部スタイルシートの文字コードもWEBページの文字コードと同じにして置く
      必要があります。
    2. 「エクスプローラ」を開いて、そのサイトの「外部スタイルシート」を選択し、
      「右クリック」→「プログラムから開く」→「ホームページビルダー・CSSエディター」



    3. 文字コードを変更したいときは、
      「ファイル」→「名前をつけて保存」




次ページ → ソース表示に慣れる

ページトップへ戻る