HTML
Date.2022.1.13
サイト制作 基本の｢き｣
Webサイトの仕組み
Webサイトとはインターネット上で利用するサービスの一つです。
｢クライアントサイド｣と｢サーバーサイド｣という2つが一つになって、Webサイトが成り立っています。
｢クライアントサイド｣とは、私たちがよく見ているサイトやブログなど、ユーザーが見たり触れたりできる部分のことです。もちろんこのページもクライアントサイドです。
｢サーバーサイド｣とは、ユーザー側が見たり触れたりすることができない裏側のことを指します。
Webサイトはコンピュータ用の言葉（コード）で作られているため、人間がそのまま理解することはできません。
そのため、人間にわかるように、翻訳してくれるのがブラウザと言われるソフトです。
主なWebブラウザ例
- Google Chrome*おすすめ。理由は後述します。
- Safari
- Microsoft Edge
- Internet Explorer※2022年6月にサポート終了しMicrosoft Edgeへ移行
- Firefox
Webサイト制作に必要な言語とは
Webサイトは複数の言語で成り立っています。
その代表となるものがこの3つです。
- HTML → Webサイトの土台を作る
- CSS → HTMLで作った土台に装飾を加える
- JavaScript(jQuery) → クリックしたら〜する、などの動きをつける
それぞれが別の役割を持っていて、書き方も違います。
作業環境について
WEBサイトは高価なソフトを購入しなくても標準搭載されている「メモ帳(Windows。Macではテキストエディット)」と「WEBブラウザ」があれば作成することができます。
とはいえ、見やすく色分けしてくれたり入力を補助してくれる「テキストエディタ」があると便利です。
エディタソフトにはさまざまなものがありますので、いくつかのソフトを使って、自分にあったものを探しましょう。
ここでは、シンプルで動作も軽いTeraPadを使用します。
TeraPad公式ダウンロードサイト
WEBブラウザにはさまざまなものがありますが、サイト制作に欠かせない機能(デベロッパーツール)が豊富で使いやすく、使っている人が多い(=ネット検索で使い方を学びやすく、解決策も見つけやすい)Google Chromeがおすすめです。
Google Chrome公式ダウンロードサイト
Google Chromeデベロッパーツールについて
デベロッパーツールはその名の通り開発者のためのツールで、例えば以下のようなことができます。
- デザイン変更テスト
- WEBページのHTMLとCSSを仮に変更して、ブラウザでどう表示されるかをチェックすることができます。 WEBページの修正をする時通常はテキストエディタで修正してブラウザで確認しますが、頻繁にブラウザとテキストエディタを行き来しなければいけないため、かなり手間と時間がかかってしまいます。デベロッパーツールを使えばブラウザ上で編集した部分だけをテキストエディタにコピーすれば短時間で編集が可能になります。
- 他のウェブサイトのコードをチェック
- 他のWEBサイトのコードがどのように書かれているのかを確認することができます。めちゃくちゃ勉強になります。
- 複数サイズでの表示チェック
- PCだけでなくタブレットやスマートフォンなど、様々な画面サイズでどう表示されるかのシミュレーションすることができます。
他にも便利な機能がたくさんあります。何よりブラウザの機能の一部なので、WEBサイトの制作においては必須のツールです。
サイトの構成(ファイルの構造)を考える
WEBサイトを作る場合、HTMLやCSSだけでなく画像もたくさん使います。
それが全部一つのファイルにごちゃ混ぜに入っていたら必要なファイルを探すだけで時間を浪費してしまいます。
そうならないためには適切なフォルダを作成してデータを管理することが必要になります。
実務ではサイトを後任者に引き継ぐこともありますので、誰が見てもわかりやすい構造にする必要があります。
このようにカテゴリーごとに分類して格納しておけばどこに何があるか一目瞭然です。
ファイルの指定方法-相対パスと絶対パス
リンクを指定したり画像などのファイルを読み込んだりするとき、そのファイルがどこにあるのかを記述する必要があります。
- 絶対パス
- サイト全体を会社として例えると、会社名(http://〜)と部署名(フォルダ名)と名前(ファイル名)で指定する方法です。
主に外部サイトにリンクする場合などはこちらを使います。
<a href="https://minato_industrial.co.jp/company/index.html">TOPページ</a> - 相対パス
- ビルの中の現在地を基準として「この部屋を出たら一つ上の階へ行って、○○部の△△さん」というふうに相対的に指定する方法です。
主にサイト内のページや画像にリンクする場合に使います。
- 同じフォルダ内にリンクする場合はファイル名のみ
- <a href="support.html">
- 同じフォルダの中にあるフォルダのファイルにリンクする場合はフォルダ名をつける
- <a href="a/index.html>
- 上の階層のファイルにリンクする場合は../をつける
- <a href="../index.html">
- 別のフォルダのファイルにリンクする場合は../フォルダ名をつける
- <a href="../company/index.html">
ファイル名をつけるときの命名ルール
- 拡張子をつける
- 拡張子とは、そのファイルの種類を表すものです。
拡張子がないと何のファイルなのか認識されません。- .html … HTMLファイル
- .css … CSSファイル
- .jpg … 画像ファイル
- など
- ファイル名やフォルダ名に使えるのは半角英数字のみ
- 実は全角文字や日本語でも命名はできるのですが、文字化けしたりWEBサーバーが認識しなかったりする場合があります。
その場合画像が正しく表示されなかったり正しくリンクできなかったりするので、全角文字や日本語は避け半角英数字で命名しましょう。 - アルファベットは小文字に統一する
- 手元にあるPCでは大文字小文字は区別しませんが、WEBサーバーは大文字小文字の区別があります。
ファイル名そのものに大文字は使えるのですが、HTMLに記述するときに小文字で記述してしまうとリンク切れになり読み込んでもらえません。 - 使える記号は-(ハイフン)と_(アンダースコア)だけ
- \,":;<>*/などはファイル名には使えません。
スペース(空白)を入れることもできません。
TeraPadの事前設定
TeraPadを使用する前に、いくつかの設定が必要です。
- タブの文字数設定
- タブ（Tab）キーでのインデンテーション（字下げ）を4文字単位に設定します。
- 特殊文字の表示設定
- 特殊文(tabやスペースなど)の入力状態を確認できるようにするために特殊文字の表示設定を行います。
TeraPadで新規ファイルを作成する
- 編集する言語設定
- 編集する言語に合わせて言語設定を行います。
- 文字/改行コードを指定してファイルを保存する
- ファイルを保存する時は文字コードを「UTF-8N」に設定します。（HTML・CSSの指定に合致させます）
日本語を扱える代表的な文字コードについて
- シフトJIS/SHIFT-JIS/SJIS【charset="Shift_JIS"】
- PC(Windows)で広く使われている文字コード体系です。英数カナ文字は1バイトで表現し、それ以外の文字は2バイトで表現します。
- EUC【charset="EUC-JP"】
- EUC(Extended Unix Code)は、サーバー用OSであるUNIXで広く使われている文字コード体系です。英数カナ文字は1バイトで表現し、それ以外の文字は2バイトで表現しますが、英数とカナとそれ以外の文字を切り替えるためにコード体系の切り替えコードが挿入されます。
- UTF-8(UTF-8 BOM有り)【charset="UTF-8"】
- UTF-8(UCS/Unicode Transformation Format 8)は、インターネットの世界で広く使われている文字コード体系です。英数は1バイトで表現し、それ以外は2～6バイトで表現します。日本語の文字は基本的に3バイトで表現されます。
- UTF-8N（UTF-8 BOM無し）【charset="UTF-8"】
- UTF-8と同じコード体系ですが、UTF-8ではファイルの先頭に文字コード体系を示すBOM(Byte Order Mark/16進数で「EF BB BF」)が挿入されます。
UTF-8NはBOMが挿入されず実際に格納されている日本語の文字コードを見て判断します。
HTMLファイル、CSSファイルを作成する時はUTF-8Nがお勧めです。
HTML/CSSのチェック
正しいHTMLやCSSの文法で書かれているかどうかを検証することを、バリデーション(validation)またはバリデート(validate)と言います。
以下のようなサイトでチェックすることができます。
- HTML
- CSS → W3C CSS 検証サービス
- Chrome拡張機能 → HTMLエラーチェッカー