- 本日の訓練内容
- L1.3 ファイルのパス設定
- L1.3.3 パスの記述例
本日の訓練内容
教科書・質問受付サイト
- HTML/CSS訓練用WEBサイト公開のためのFTPサーバーパスワードの設定
Lesson-0レッスン（Lesson）について
Lesson-1html-CSS の勉強を始める前に
L1.1 はじめに
L1.1.1 概要
- 本講義では Windows 環境を前提とする。
- テキストエディタは TeraPad を使用する。
TeraPad 以外のテキストエディタでは Adobe Dreamwever や Visual Studio Code (Windows) などが使いやすい。 - Macの標準テキストエディタはリッチテキスト形式が規定となるためファイルの新規作成時にプレーンテキスト形式で保存することに注意する必要がある。
- WEBブラウザは Chrome を使用する。
L1.1.2 HTML と CSS とは
WEB ページ = HTML （文書構造） + CSS （レイアウト・装飾） + Javascript / jQuery （動き・処理）
（1）HTML （ハイパーテキスト・マークアップ・ランゲージ）
- ハイパーテキスト： Web ページから別の Web ページへのリンクを作成したり画像、動画、音声などの埋め込みを行う。
- マークアップ：文書の各要素がどんな役割（見出し・段落・表・リストなど）を持っているかの目印をつける。
WordPressでの投稿で使われる要素と同じもの。
（2）CSS （カスケーディング・スタイル・シート）
WEB ページのレイアウトデザインや各要素の装飾（色・サイズ・レイアウトなど）を定義する。
HTML は文書構造を、 CSS は装飾を定義する。
（6） Javascript と jQuery
WEBページに動きをつけたり計算などの処理を行うために Javascript （プログラミング言語）を使用する。
jQuery は Javascript ライブラリであり、複雑な表現を短いコードで記述することを可能にする。
L1.1.3 開発フォルダ作成
WEB ページを作成するときにはページ開発用フォルダを作成し、そのフォルダ内にファイルの作成・配置を行う。
- 画像ファイルは images などのサブフォルダを作成して格納する。
- CSS ファイルのファイル数が多くなる場合は CSS 用のサブフォルダを作成して格納する。
- Javascript ファイルのファイル数が多くなる場合は Javascript 用のサブフォルダを作成して格納する。
開発用フォルダ構成例
- web-test（開発フォルダ）
- index.html（トップページのHTMLファイル／ファイル名固定）
- sub1.html（HTMLファイル）
- sub2.html（HTMLファイル）
- style.css（CSSファイル）
- images（画像フォルダ）
- photo.jpg（画像ファイル）
- logo.png（画像ファイル）
L1.1.5 WEBページ作成ツール
HTML、CSSファイルを編集するテキストエディタとしてTeraPadを使用するため、以下の設定を行う。
（1）タブの文字数設定
規定のTabキーでのインデンテーション（字下げ）は8文字となっている。
HTMLの階層構造の表現にインデントを使用すると、階層が多くなったときに内容が画面に入りきらない恐れがある。
インデンテーション設定を8文字から4文字に変更することで視認性を上げる。
【表示】→【タブの文字数】→【4】（2）編集する言語設定
編集する言語によって設定を変更する。
【表示】→【編集モード】→【HTML / CSS】（3）特殊文字の表示設定
空白・インデントなど特殊文字が入力されていることが確認できるように設定を変更する。
【表示】→【オプション】→【表示】→【マーク】をすべてチェック→【OK】（4）ファイルの保存
ファイルを保存するときは文字コードを「UTF-8N」に設定する（もしくはHTML / CSSの指定に合致させる）。
【ファイル】→【文字/改行コード指定保存】→【文字コード】：【UTF-8N】→【OK】L1.1.5 文字コード
日本語を扱える代表的な文字コードには以下のようなものがある。
本講義でHTMLファイルおよびCSSファイルを作成する際はUTF-8N（UTF-8（BOM 無し）を使用する。
（1）シフトJIS/SHIFT-JIS/SJIS（charset=”Shif_JIS”）
PC（Windows）でよく使われている文字コード体系。半角カナ数字を1バイト、それ以外の文字を2バイトで表現する
（2） EUC（charset=”EUC-JP”）
Extended Unix Code
UNIXで広く使われる文字体系。英数とそれ以外の文字を切り替えるためにコード体系の切り替えコートをが挿入される。
（3）UTF-8（UTF-8 BOM 有り）（charaset=”UTTF-8″）
( UCS / Unicord Transration Format 8 )インターネットで広く使われる文字コード体系。英数は1バイト、それ以外は2～6バイトで表現される。日本語は基本的に3バイトで表現される。
ファイルの先頭に文字コード体系を示す BOM（Byte Order Mark / 16進数で 「EF BB BF」）が挿入される。
UTF-8N（UTF-8 BOM 無し）（charset=”UTF-8″）
UTF-8と同じコード体系だが、ファイル先頭にBOMが格納されていない。
適用時には実際に格納されている文字コードを見て判断するため、まれに中国語と日本語の混同などが起こる。
WordPressは現在UTF-8Nが使われている。
L1.1.6 HTML/CSSのチェック
（1）HTMLチェック
（2）CSSチェック
L1.2 レイアウトデザイン
L1.2.1 レイアウトデザインの考え方
L1.2.2 ページ構成例（横幅が均一幅）
L1.2.3 ページ構成例（横幅が個別幅）
L1.2.4 ページ構成要素の概要
（1）ヘッダー
企業ロゴやイメージ画像などWEBページのイントロダクション。
（2）ナビゲーション
メニューなどサイト全体のページに共通したリンク情報。
設置場所はサイトにより異なる。
（3）サイドバー
コンテンツの左側もしくは右側に表示される内容。
（4）メインコンテンツ
WEBページの本文。
（5）フッター
WEBページの下部に表示される内容。著者名や連絡先など。
L1.3 ファイルのパス設定
L1.3.1 絶対パスと相対パス
（1）絶対パス
http://sample.com/index.html
http や https から始まるパス指定であり、どこから指定しても同じ位置になる。
- https://~のWEBサイトが保護されているページであることを示す。個人情報などを入力するときにはhttps://~の表示になっていることを確認する。
（2）相対パス
about.html
images/photo.jpg自己ファイル格納位置からの相対位置で指定する。
自身と同一のフォルダに格納されたファイルはそのまま
自身と異なる格納位置の場合は/で格納位置を指定
L1.3.2 パス指定の使用例
（1）画像（imgタグ）
<img src="iamges/photo.jpg" alr="写真">画像表示時の画像ファイルを指定する。
（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");背景に設定する画像ファイルを指定。
background-〇〇で背景に関する様々なプロパティを設定することができる。
https://designerbrg.com/background_css/
L1.3.3 パスの記述例
（1）自己ファイルと同じ階層のファイル
（2）自己ファイルの下位階層のファイル
（
（
トップページ
（Top Page）レッスン
（Lesson）Web パーツ
（Web Parts）付録
（Appendix）
- L0 レッスンについて
- L1 HTML・CSS の勉強を始める前に
- L2 HTML での記述を始めましょう
- L3 CSS でデザインを始める前に
- L4 CSS でレイアウトを作りましょう
- L5 CSS で文字飾りを追加しましょう
- L6 CSS で飾りを追加しましょう
- L7 テーブルを活用しましょう
- L8 フレックスレイアウトを活用しましょう
- L9 グリッドレイアウトを活用しましょう
- L10 CSS アニメーションを活用しましょう
- L11 RWD 対応のサイトを作りましょう
- L12 JavaScript/jQuery で処理しましょう
Lesson-2HTML での記述を始めましょう
L2.1.1 概要
<要素名 属性="属性値">（1）要素名
（2）属性
（3）属性値
L2.2 HTMLの基本構造
L2.2.1 HTMLの構造
<!DOUTYPE html>
<html lag="ja">
<head>
（文書の情報を記述）
</head>
<!-- （コメント）-->
<body>
（文書の本体を記述）
</body>
</html>- ドキュメントタイプ宣言
HTML5で記述されていることを示す - HTML4まではブラウザごとの表示差が多くあった（特にInternet Exproror）
- Microsoftがブラウザの開発から撤退したため、現在はchrome、firefoxが重要
注意事項
L2.2.2 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>
（1）!DOCTYPE 宣言（ドキュメントタイプ宣言）
（２）html要素（HTMLの文書）
head要素（文書情報）
（4）body要素（文書本文）
L2.3 文書情報
L2.3.1 ページタイトル（title）
（1）title 要素（ページタイトル）
<title>Webページのタイトル</title>WEBページのタイトル名。
多くのブラウザではブラウザのタイトルタブに表示される。
L2.3.2 メタデータ（meta）
（1）meta要素（文字コード指定/charset）
<meta charset="UTF-8">文字コードを指定する。UTF-8およびUTF-8Nの場合はどちらも”UTF-8″と指定する。
（2）meta要素（ページの説明文/description）
ページの概要を示す説明文。一般的には検索サイトでページ概要として表示される。
description と実際のページ内容が異なる場合、 google が本文内容から概要を作成する場合がある。
meta 要素（ページのキーワード/keywords）
検索サイト
（4）meta 要素（ページの作者情報/author）
あまり使われない。
（5）meta 要素（ビューポート/viewport）
WEBページの表示領域を指定する。
PC/スマートフォンでの表示切替などに使用する。
L2.3.3 リンク情報（link）
（1）link 要素（外部 CSS ファイルの紐づけ）
（2）link 要素（ファビコンファイルの紐づけ）
ファビコン（WEBページのシンボルアイコンファイル）との紐づけを指定する。
ファビコンは複数サイズのデータが1ファイルにまとめられる。一般的なファビコンファイル名は”favicon.ico”になる。
画像データを作成したのち、インターネット上の変換アプリケーションを利用して .ico ファイルへ変換する。
L2.4 文書本文
L2.4.1 文書本文のタグ分類
- セクション分類タグ
- コンテンツ分類タグ
- テキスト分類タグ
- テーブルタグ
- フォームタグ
注意事項
- タグ（要素）の多くは、ブロックレベル要素とインライン要素に分類されるが、HTML5ではそれぞれの要素の考え方がなくなっている。
L2.5 セクション分類タグ
L2.5.1 セクション分類の構成例
L2.5.2 h1~h6 要素（見出し）
各レベルに従った見出しを指定する。一般的に h1 はページに1つだけ指定する。
メモ
- HTML/CSSは言語のため文法を理解するところから始める
- 就職活動で使うWEBサイトはソースコードデザインも評価基準となる。
WEBページ上で右クリック→【検証】→【Sorces】タブでソースコード確認 - Markdown インライン表示：バッククォート（Shift + ＠）で内容を挟む
- Morkdown コードの挿入：バッククォート3個で「言語：タイトル コード内容」を挟む
言語を指定すればシンタックスハイライト（ソースコードの属性に応じて自動で色分けされる機能）が反映される。
-本日のアジェンダ-
1限目
学科 HTML基礎①
ページのソースとデベロッパーツールについて
2限目
学科 HTML基礎①
文字コードとファイル指定（パス）について
3限目
学科 HTML基礎①
HTMLの基本構造について
4限目
学科 HTML基礎①
HTMLのまとめ
5限目
学科 HTML基礎①
過去の訓練の復習
本日のテーマ
HTMLの基本構造を理解しましょう
Webページ開発ツールについて
Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。
参考サイト
Webページの構成要素について
Web ページ ＝ HTML（文書構造） ＋ CSS（レイアウト・装飾） ＋ JavaScript/jQuery（動き・処理）
HTML（ハイパーテキスト・マークアップ・ランゲージ）
HTML は、Web ページ内の各要素の意味や文書構造を定義します。
- ハイパーテキスト：Web ページから別の Web ページへのリンクを作成したり画像、動画、音声などの埋め込みを行います。
- マークアップ：文章の各要素が、どんな役割（見出し・段落・表・リストなど）を持っているかの目印を付けます。
CSS（カスケーディング・スタイル・シート）
CSS は、Web ページのレイアウトデザインや各要素の装飾（色・サイズ・レイアウトなど）を定義します。HTML に用意されている装飾タグを使用することである程度の装飾を行うことは可能ですが HTML は、文書構造を定義するためのものなので Web ページの装飾は、CSS を用いて行いましょう。
JavaScript と jQuery
Web ページに動きを付けたり計算などの処理を行うにはプログラミング言語である JavaScript を使用します。また、JavaScript を容易に記述できるようにした JavaScript ライブラリィである jQuery や JavaScript 機能ライブラリィを使用することもあります。
ページのソースについて
ホームページのソースとは？ 普段何気なく見ているホームページなどのウェブページは、HTMLやCSSというマークアップ言語からできています。 これらの言語で書かれたファイルのことを「ソースファイル」と呼び、例えばHTMLで書かれたファイルを「HTMLソース」といいます。
参考サイト
文字コードについて
日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。
参考サイト
ファイルのパス指定について
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。
参考サイト
HTMLの基本構造について
タグの構造
<要素名 属性=”属性値”>
要素名
タグの種別を指定します。タグ名とも言われます。
属性
要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。
属性値
属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。
HTMLの基本構造
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
!DOCTYPE 宣言（ドキュメントタイプ宣言）
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
html 要素（HTML の文書）
html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
head 要素（文書情報）
head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。
body 要素（文書本文）
body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。
doctype宣言とは？
HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。
DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。
参考サイト
- 【HTML初心者入門者向け】doctype宣言とは？
- HTML5とHTML4.01 正しいDOCTYPE宣言で仕様に準拠しよう
- !DOCTYPEの宣言 – HTML5/HTML4/XHTMLで正しい指定方法 …
ワンポイントアドバイス
楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。
本日の課題①
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
本日の課題②
過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
