日: 2023年2月9日

2023年2月9日 コメントする

2月9日（木）－HTML基礎①基本構造の理解

Webページ開発ツールについて

Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。

・先生は個人ではサクラエディタを使用されているが、授業では学校指定のTeraPadを使用とのこと
・最近では「VSCode」（Visual Studio Code）が流行っているとのこと

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ソース」といいます。

★コードは公開され誰でも見えるようになるので、きれいに書く（就職時にも見られる可能性がある）
・ページ右クリック→「ページのソースを表示」でHTMLコード、「検証」でCSSが見える

文字コードについて

日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。
理由：現時点では、「UTF-8」だとBOM（先頭？に記入される文字）が不要物（ゴミ）と判断されてしまう場合もあるため、「UTF-8N」が良いとのこと

ファイルのパス指定について

ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。

【要参考】HTML-CSS の勉強を始める前に | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※「L1.3 ファイルのパス指定」以下が分かりやすい

・サイトを移転する際など、自己ファイルも絶対パスにしているとすべて書き換えが必要になってしまうので、なるべく自己ファイルは相対パスにする

【相対パス】
・自己ファイルと同じ階層のファイル
→基本「style.css」等のように、そのままファイル名を入れる
あえてフォルダ名を書く場合もあり、その場合には「./style.css」等のように「./」とピリオドを”1個”とスラッシュを入れる

・自己ファイルの上位階層のファイル
→「../index.html」等のように、「../」（ピリオド”2個”とスラッシュ）を先頭に付ける
【補足】2個上の階層指定するときは、「../../」というように、2回記入する

・自己ファイルの下位階層のファイル
→「images/photo.jpg」「sub/index.html」等のように、下位階層のフォルダに格納されているファイルを指定する

・サイトルートからの相対パス
「/index.html」「/sub/index.html」等のように、ドメインのトップからのファイルのパスを指定する

HTMLの基本構造について

タグの構造

<要素名 属性=”属性値”>

【要素名】
タグの種別を指定します。タグ名とも言われます。

【属性】
要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。

【属性値】
属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します

HTMLの基本構造

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<!–　（コメント）　–>
<body>
　　（文書の本体を記述）
</body>
</html>

!DOCTYPE 宣言（ドキュメントタイプ宣言）
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば記述します。
・!DOCTYPE 宣言は閉じタグ不要

HTML 要素（HTML の文書）
html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。

HEAD 要素（文書情報）
head 要素は、この文書のメタデータを記述します。例えば、タイトルタグでその文書のタイトルを記述することができます。

コメント（自分用メモ）
webページには表示されないが、ソース表示で見えてしまうので、内容は気を付ける。
（※ページ公開時には消す必要ありそう？）

BODY 要素（文書本文）
body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

doctype宣言とは？

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に と記述することで標準モードとなります。

【注意】
楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。

【参照】
・HTML-CSS の勉強を始める前に | HTML-CSS 入門講座 | 情報デザイン工房 濱屋
・HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋

メモ

◆httpとhttpsの違い
http →暗号化されていないページ
https→暗号化されたページ　（”s”はセキュリティ）
⇒httpでログインが必要になるようなサイトは危険なのでパスワードやカード情報は入れない