ホームページ制作やメンテナンスのすべてを、業者やWebデザイナーへ発注しないことは珍しくなくなりました。
便利なサービスを使えば専門知識がなくてもWord書類のように、自分で編集できるからです。
ただし、基礎知識を身につけた方が、応用やトラブル対処ができるようになるので解説します。
なお、この記事では、「ホームページ」「Webサイト」「ブログ」を、同じ意味に捉えて差し支えありません。
複数ファイルで、１ページができる
例えば、写真を載せたWord書類は、パソコン上で１ファイルです。しかし、ホームページは１ページにつき複数のファイルでできています。
- HTMLファイル：文章・制御
- JPEGやPNGファイル：画像
- CSSファイル：装飾命令
完成からネット公開への流れ
上記の複数ファイルを自席パソコンで作り、完成したらWebサーバへアップロード（複製を移動する）して、ネット公開となります。
WordPressやブログなど、ホームページを簡単に作れるシステムは、アップロードするのは画像のみで、他はネット上で作成します。
文書構造を示すHTML
ホームページに載る文字列（掲載文章）は、HTML言語で書かれています。といっても、表示させたい字をそのまま書くだけです。
大事なのは、各々の文字列が見出し・本文・引用など「役割」が何かを記述するところ（ホームページには非表示）。
これにより、コンピュータへ文書構造を理解させることができるため、SEOになります。
- SEO：Search Engine Optimization
- 検索サイト最適化。検索結果の上位を狙い、自分のホームページへより多く呼び込めるようにすること
HTMLファイルの役目
- 文字列の表示
- 文書構造の指定（文字列の「役割」を示す）
- リンクや画像表示などの制御
HTMLソースコードの例
下にシンプルなソースコード（プログラミング）を載せます。
<h1>映像術</h1>
<p>映像術は、横浜市北部にあるデザイン事務所です。</p>
<img src="office.jpg" alt="オフィス">
<h2>業務内容</h2>
<ul>
<li>画像制作（写真・動画・デザイン）</li>
<li>オウンドメディア運営</li>
<li>IT活用アドバイス</li>
</ul>マークアップ（<h1>などのタグで挟む）して、文字列の役割を指定したり、画像表示の制御をしたりしています。
- <h1>や<h2>：見出し（数はレベル）を示す
- <p>：本文段落を示す
- <li>：箇条書きを示す（全体を<ul>で挟む）
- <img>：画像ファイル呼び出し表示する
上に書いた<img>以外の「src=”office.jpg” alt=”オフィス”」は、属性といい補足データです。
ホームページ制作のひとつは、HTML言語で書いたファイル（HTMLファイルやPHPファイルなど）を作ること。アプリ『メモ帳』などのテキストエディタでも作成可能です。
見出しは６レベルある
見出しを示すタグは、<h1>から<h6>まで６レベルあります。章・節・項と同じように親子関係があります。例えば次のような構造です。
<h1>イタリアン</h1>
<h2>パスタ</h2>
<h3>ペペロンチーノ</h3>
<h3>カルボナーラ</h3>
<h3>ジェノベーゼ</h3>
<h2>ピザ</h2>
<h3>マルゲリータ</h3>
<h3>ペスカトーレ</h3>
見た目を変えるCSS
ホームページの装飾を変えられるのが、CSS（スタイルシート）です。
- 文字の大きさや色
- 文字間隔
- 余白の広さ
- 背景の色
など
CSSソースコードの例
装飾命令をCSSファイルなどへ記述します（「{」前で対象を指定）。
h1{color:blue ; font-size:22pt ; line-height:120%}上の例では、<h1>で挟まれた文字列（h1要素）に対し「青色・22ptサイズ・行間120%」と命令しています。
HTMLとCSSの役割を忘れずに
昔はHTMLで装飾命令していましたが、現在ではCSSが担当します。一括管理に便利ですし、SEO的にも有利です。
HTMLやCSSの分からないことは、ネット検索してほとんど解決できます。
例えば、「html 引用文」「css 行間を広げる」とネット検索すれば、親切な解説サイトが見つかるでしょう。
役立つホームページはアクセスが多い
ホームページ制作で一番難しいのは、コンテンツ（中身）をどうするか。文章や画像によって、分かりやすさが変わるだけでなく、アクセス数も左右します。
現在のSEOは、役立つホームページほど有利になります。分かりやすく伝わりやすいコンテンツにするため、国語力とHTML/CSSの知識が重要です。
公開したら世界中から閲覧できる“状況”になりますが、実際はあまりアクセスがありません。ネット検索の上位に表れないからです。
そのため、アクセス状況や友人知人の声を踏まえて、改良を重ねる必要があります。