HTML-CSS 入門講座

HTML-CSS 入門講座

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

目次

L1.1 はじめに

L1.1.1 概要

  • 本サイトでは、Windows 環境での Web ページ開発を前提に記述しています。Mac 環境の場合は、本サイトの説明を参考にして使用してください。
  • Web ページを作成・確認するツールとして TeraPad エディタと Chrome ブラウザを前提に記述しています。他のエディタやブラウザでも対応可能ですのでご使用の環境に準じてご使用ください。
  • Windows の初期状態では TeraPad エディタと Chrome ブラウザはインストールされていませんのでインストールを行ってください。

L1.1.2 HTML と CSS とは

Web ページ = HTML(文書構造) + CSS(レイアウト・装飾) + JavaScript/jQuery(動き・処理)

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

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

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

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

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

(3) JavaScript と jQuery

Web ページに動きを付けたり計算などの処理を行うにはプログラミング言語である JavaScript を使用します。また、JavaScript を容易に記述できるようにした JavaScript ライブラリィである jQuery や JavaScript 機能ライブラリィを使用することもあります。

L1.1.3 開発フォルダ構成

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

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

L1.1.4 Web ページ作成ツール

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

(1) タブの文字数設定

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

TeraPad タブの文字数設定

(2) 編集する言語設定

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

TeraPad 編集する言語設定

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

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

TeraPad 特殊文字の表示設定

(4) ファイルの保存

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

TeraPad ファイルの保存

L1.1.5 文字コード

日本語を扱える代表的な文字コードについて記述します。HTML ファイル、CSS ファイルを作成する時は、UTF-8N(UTF-8 BOM 無し)を使用してください。

(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 が格納されてなく実際に格納されている日本語の文字コードを見て判断します。

L1.1.6 HTML/CSSのチェック

HTML や CSS を手入力すると間違った入力してしまう場合があります。間違いの内容によってはブラウザで正しく表示されることもありますが検索エンジンが評価を低くすることが考えられます。HTML や CSS の入力後は、文法のチェックサイトを利用して入力コードのチェックを実施してください。

(1) HTMLチェック

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

(2) CSS チェック

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

L1.2 レイアウトデザイン

L1.2.1 レイアウトデザインの考え方

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

L1.2.2 ページ構成例(横幅が均一幅)

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

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

L1.2.3 ページ構成例(横幅が個別幅)

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

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

L1.2.4 ページ構成要素の概要

ページ構成要素の名称は、Web サイト開発時に部位の名称として使用されます。

(1) ヘッダー

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

(2) ナビゲーション

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

(3) サイドバー

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

(4) メインコンテンツ

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

(5) フッター

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

L1.3 ファイルのパス指定

L1.3.1 絶対パスと相対パス

(1) 絶対パス


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

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

(2) 相対パス


about.html
images/photo.jpg

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

L1.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");

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

L1.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

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

ロケット本体
PAGE
TOP
ロケット炎