HTML-CSS入門講座

濱屋太郎

Lesson-1

Lesson-1
HTML-CSSの勉強を始める前に

目次

1.1 はじめに

1.1.1 概要

1.1.2 HTMLとCSSとは

Webページ = HTML(文書構造) + CSS(レイアウト・装飾)

(1) HTML(ハイパーテキスト・マークアップ・ランゲージ)

HTMLは、Webページ内の各要素の意味や文書構造を定義します。

ハイパーテキスト
Webページから別のWebページへのリンクを作成したり画像、動画、音声などの埋め込みを行います。
マークアップ
文章の各要素が、どんな役割(見出し・段落・表・リストなど)を持っているかの目印を付けます。

(2) CSS(カスケーディング・スタイル・シート)

CSSは、Webページのレイアウトデザインや各要素の装飾(色・サイズ・レイアウトなど)を定義します。HTMLに用意されている装飾タグを使用することである程度の装飾を行うことは可能ですがHTMLは文書構造を定義するためのものなのでWebページの装飾はCSSを用いて行いましょう。

1.1.3 開発フォルダ構成

Webページを作成する時は、開発用のフォルダ(名称は任意)を作成して、そのフォルダ内にファイルの作成・配置を行ってください。

  • 画像ファイルは、ファイル数が多くなりますのでimagesなどのサブフォルダを作成して格納してください。
  • CSSファイルのファイル数が多く場合は、cssなどのサブフォルダを作成して格納してください。
  • JavaScriptファイルのファイル数が多くなる場合は、jsなどのサブフォルダを作成して格納してください。
開発フォルダ構成

1.1.4 Webページ作成ツール

HTMLファイル、CSSファイルを作成するためのエディタとしてTeraPadを使用します。
TeraPadを使用する時は、以下の設定を行ってください。

(1) タブの文字数設定

タブ(Tab)キーでのインデンテーション(字下げ)を4文字単位に設定します。

TeraPad タブの文字数設定

(2) 編集する言語設定

編集する言語に合わせて言語設定を行います。

TeraPad 編集する言語設定

(3) 特殊文字の表示設定

特殊文字の入力状態を確認できるようにするために特殊文字の表示設定を行います。

TeraPad 特殊文字の表示設定

(4) ファイルの保存

ファイルを保存する時は文字コードを「UTF-8N」に設定します。(HTML・CSSの指定に合致させます)

TeraPad ファイルの保存

1.1.5 文字コード

日本語を扱える代表的な文字コードについて記述します。HTMLファイル、CSSファイルを作成する時はUTF-8Nがお勧めです。

(1) シフトJIS/SHIFT-JIS/SJIS(charset="Shift_JIS")

PC(Windows)で広く使われている文字コード体系です。英数カナ文字は1バイトで表現し、それ以外の文字は2バイトで表現します。

(2) EUC(charset="EUC-JP")

EUC(Extended Unix Code)は、サーバー用OSであるUNIXで広く使われている文字コード体系です。英数カナ文字は1バイトで表現し、それ以外の文字は2バイトで表現しますが、英数とカナとそれ以外の文字を切り替えるためにコード体系の切り替えコードが挿入されます。

(3) UTF-8(UTF-8 BOM有り)(charset="UTF-8")

UTF-8(UCS/Unicode Transformation Format 8)は、インターネットの世界で広く使われている文字コード体系です。英数は1バイトで表現し、それ以外は2~6バイトで表現します。日本語の文字は基本的に3バイトで表現されます。

(4) UTF-8N(UTF-8 BOM無し)(charset="UTF-8")

UTF-8と同じコード体系ですが、UTF-8ではファイルの先頭に文字コード体系を示すBOM(Byte Order Mark/16進数で「EF BB BF」)が挿入されますが、UTF-8NはBOMが格納されてなく実際に格納されている日本語の文字コードを見て判断します。

1.1.6 HTML/CSSのチェック

(1) HTMLチェック

作成したHTMLに誤りがないかを以下のサイトを使用してチェックしてください。

(2) CSSチェック

作成したCSSに誤りがないかを以下のサイトを使用してチェックしてください。

1.2 レイアウトデザイン

1.2.1 レイアウトデザインの考え方

HTML・CSSを記述する前に作成するページのデザインを決める必要があります。デザインによっては横幅調整を効率良く記述するためにCSSだけでなくHTMLの書き方も変わってきます。ページデザインを作成するために代表的なサイト構成を確認してみましょう。赤い枠線が横幅を調整する単位となります。

【参考サイト】

1.2.2 ページ構成例(横幅が均一幅)

サイトの横幅が最初から最後まで均一のサイトです。サイト全体を囲むboxを定義して横幅を制御すると容易に開発ができます。

ヘッダー
サイドバー
メインコンテンツ

1.2.3 ページ構成例(横幅が個別幅)

サイトの横幅が部分によって異なるサイトです。部分単位に横幅の制御を行う必要があります。

ヘッダー
サイドバー
メインコンテンツ

1.2.4 ページ構成要素の概要

(1) ヘッダー

ヘッダーには企業ロゴやイメージ画像などWebページのイントロダクションを記述します。

(2) ナビゲーション

ナビゲーションにはメニューなどのサイト全体のページに共通したリンク情報を記述します。設置場所はサイトにより異なります。

(3) サイドバー

サイドバーとは、コンテンツの左側もしくは右側に表示される各ページ共通の内容を記述します。サイドバーは、右や左だけのサイトや左右両方に表示するサイトがあります。また、サイドバーを使用しないサイトもあります。

(4) メインコンテンツ

メインコンテンツにはWebページのコンテンツ(本文)を記述します。

(5) フッター

フッターにはコンテンツに関する情報のことで著者名や連絡先などを記述します。

1.3 ファイルのパス指定

1.3.1 絶対パスと相対パス

(1) 絶対パス


http://sample.com/index.html
https://sample.com/index.html

httpやhttpsから始まるパス指定であり、どこから指定しても同じ位置になります。

(2) 相対パス


about.html
images/photo.jpg

自己ファイル格納位置からの相対位置で指定します。

1.3.2 パス指定の使用例

(1) 画像(imgタグ)

<img src="images/photo.jpg" alt="写真">

画像表示時の画像ファイルを指定します。

(2) リンク(aタグ)

<a href="about.html">〇〇〇〇紹介</a>

ハイパーリンクのリンク先ファイルを指定します。

(3) 外部スタイルシート(linkタグ)

<link href="css/style.css" rel="stylesheet">

外部スタイルシートのスタイルシートファイルを指定します。

(4) 背景画像(background、background-imageプロパティ)


background: url("images/home_bg01.gif");
background-image: url("images/home_bg01.gif");

背景に設定する画像ファイルを指定します。

1.3.3 パスの記述例

TeraPad

(1) 自己ファイルと同じ階層のファイル


style.css
./style.css

自己ファイルと同じフォルダに格納されているファイルを指定します。

(2) 自己ファイルの下位階層のファイル


images/photo.jpg
sub/index.html

自己ファイルの下位階層のフォルダに格納されているファイルを指定します。

(3) 自己ファイルの上位階層のファイル


../index.html
../style.css

自己ファイルの上位階層のフォルダに格納されているファイルを指定します。

(4) サイトルート相対パス


/index.html
/sub/index.html

ドメインのトップからのファイルのパスを指定します。