依頼をいただいた
提案
デザインの必要な素材の作成
デザインラフの作成
コーディング
大浜先生作の参考サイト
html-css.hamaya2020.com
スペースは半角にしないとバグることがある。
このためTERA PADで半角と全角のスペースの区別ができるように設定する。
表示⇒オプション⇒表示タブで下記のようにスペースを全部チェックする。
L1.1.5 文字コード
日本語を扱える代表的な文字コードについて記述します。HTML ファイル、CSS ファイルを作成する時は、UTF-8N（UTF-8 BOM 無し）を使用してください。
(1) シフトJIS/SHIFT-JIS/SJIS（charset=”Shift_JIS”）
PC（Windows）で広く使われている文字コード体系です。英数カナ文字は 1 バイトで表現し、それ以外の文字は 2 バイトで表現します。
JIS第一水準 ３０００文字以上
JIS第二水準 ４０００文字以上
shift-jisは第一水準までしか表せないという欠陥がある。
(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 が格納されてなく実際に格納されている日本語の文字コードを見て判断します。
TERA PADのファイルメニューで下記のように設定する。
L1.1.6 HTML/CSS チェック
HTML や CSS を手入力すると間違った入力してしまう場合があります。間違いの内容によってはブラウザで正しく表示されることもありますが検索エンジンが評価を低くすることが考えられます。HTML や CSS の入力後は、文法のチェックサイトを利用して入力コードのチェックを実施してください。
(1) HTML チェック
作成した HTML に誤りがないかを以下のサイトを使用してチェックしてください。
(2) CSS チェック
作成した CSS に誤りがないかを以下のサイトを使用してチェックしてください。
レイアウト
ページ構成要素の名称は、Web サイト開発時に部位の名称として使用されます。
(1) ヘッダー
ヘッダーには企業ロゴやイメージ画像など Web ページのイントロダクションを記述します。
(2) ナビゲーション
ナビゲーションにはメニューなどのサイト全体のページに共通したリンク情報を記述します。設置場所はサイトにより異なります。
(3) サイドバー
サイドバーとは、コンテンツの左側もしくは右側に表示される各ページ共通の内容を記述します。サイドバーは、右や左だけのサイトや左右両方に表示するサイトがあります。また、サイドバーを使用しないサイトもあります。
(4) メインコンテンツ
メインコンテンツには、Web ページのコンテンツ（本文）を記述します。
(5) フッター
フッターにはコンテンツに関する情報のことで著者名や連絡先などを記述します。
L1.3 ファイルのパス指定
L1.3.1 絶対パスと相対パス
(1) 絶対パス
http://sample.com/index.html
https://sample.com/index.html
Copy
http や https から始まるパス指定であり、どこから指定しても同じ位置になります。
(2) 相対パス
about.html
images/photo.jpg
Copy
自己ファイル格納位置からの相対位置で指定します。
L1.3.2 パス指定の使用例
(1) 画像（imgタグ）
<img src="images/photo.jpg" alt="写真">Copy
画像表示時の画像ファイルを指定します。
(2) リンク（aタグ）
<a href="about.html">〇〇〇〇紹介</a>Copy
ハイパーリンクのリンク先ファイルを指定します。
(3) 外部スタイルシート（linkタグ）
<link href="css/style.css" rel="stylesheet">Copy
外部スタイルシートのスタイルシートファイルを指定します。
(4) 背景画像（background、background-imageプロパティ）
background: url("images/home_bg01.gif");
background-image: url("images/home_bg01.gif");
Copy
背景に設定する画像ファイルを指定します。
L1.3.3 パスの記述例
(1) 自己ファイルと同じ階層のファイル
style.css
./style.css
Copy
自己ファイルと同じフォルダに格納されているファイルを指定します。
(2) 自己ファイルの下位階層のファイル
images/photo.jpg
sub/index.html
Copy
自己ファイルの下位階層のフォルダに格納されているファイルを指定します。
(3) 自己ファイルの上位階層のファイル
../index.html
../style.css
Copy
自己ファイルの上位階層のフォルダに格納されているファイルを指定します。
(4) サイトルートからの相対パス
/index.html
/sub/index.html
Copy
ドメインのトップからのファイルのパスを指定します。
L2.1 はじめに
L2.1.1 概要
- HTML（Hyper Text Markup Language：ハイパーテキスト・マークアップ・ランゲージ）は、Web ページ内の各要素の意味や文書構造を定義します。
- ハイパーテキストとは、Web ページから別の Web ページへのリンクを作成したり画像、動画、音声などの埋め込みを行います。
- マークアップとは、文章の各要素が、どんな役割（見出し・段落・表・リストなど）を持っているかの目印を付けます。
- マークアップでは、目印を付けるために < >（小なり大なり）の記号で囲ったタグを使用します。
- HTML は文章を書くものでありスタイル（見栄え）を定義するものではありません。
- HTML では基本的に（意識して書く場合を除いて）空白や改行は無視されます。
- 初期状態ではタグによってブラウザが決めたスタイルが設定されています。（ブラウザによって異なります）
- タグには、大きく分けて「領域の種類を定義（セクション分類タグ）、文章の種類を定義（コンテンツ分類タグ）、文字の種類を定義（テキスト分類タグ）」があります。
- タグには、インライン要素（文章内）、インラインブロック要素（文章内で横並び）、ブロック要素（レイアウト・サイズ調整）の属性があり表示される形態が異なります。（内容は、CSS の項で説明します）
タグは下記の構成になります。
<要素名 属性="属性値">Copy
(1) 要素名
タグの種別を指定します。タグ名とも言われます。タグの終了（閉じタグ）を示す場合は、要素名の前にスラッシュ（/）を指定することで終了タグを定義することができます。
(2) 属性
要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。
(3) 属性値
属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。
L2.2 HTML の基本構造
L2.2.1 HTML の構造
注意事項
- タグを別のタグで囲むことを入れ子といいます。入れ子構造を作成することで親子関係を明確することができます。囲っている側を親要素、囲われている側を子要素と呼びます。
- HTML の記述を行う場合には、子要素は、親要素に影響を受けることがありますので親子関係を理解して記述することが必要です。
- 入れ子構造を作成する時に開始タグと終了タグ（閉じタグ）がクロスしないように注意してください。
- 入れ子構造を作成する時に囲っても良いタグと囲ってはいけないタグがあります。例えば、h1 タグを div タグで囲うことはできますが、h1 タグを p タグで囲うことはできません。
L2.2.2 HTML 例
下記コードパターンは、テンプレートとしてコピペしてHTML作成の際に、常時使用するとよい。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キーワード">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web ページのタイトル</title>
<link href="スタイルシートファイルのパス名" rel="stylesheet" type="text/css">
<link href="ファビコンファイルのパス名" rel="icon">
</head>
<body>
Web ページの内容を記述
</body>
</html>
Copy
(1) !DOCTYPE 宣言（ドキュメントタイプ宣言）
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
(2) html 要素（HTML の文書）
html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
(3) head 要素（文書情報）
head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。
(4) body 要素（文書本文）
body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。
コメント