-本日のアジェンダ-
1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について
2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について
3限目
学科 HTML/CSS基礎①
HTMLの基本構造について
4限目
学科 HTML/CSS基礎①
文章情報と文書本文について
5限目
学科 HTML/CSS基礎①
本日の講義のまとめ
本日のテーマ
Webサイト制作の手順を理解しましょう
【まとめサイト】
- HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/
Webサイト制作の流れ
１、依頼をもらう
２、提案をする（企画書・サイトマップ・見積 ※場合によりワイヤーフレームの用意）
ーOKがでたら制作スタートー
３、デザインに必要な素材の作成（ロゴ・ピクトグラム・マップ・写真（加工/撮影/収集）・原稿・その他（SNSやjQueryの素材など）
４、デザインラフの作成 ※PCだけでなくスマホ・タブレットの素材も用意
５、コーディング＝HTMLとCSSのコードを書くこと。
コーディングの手順① 素材の確認
② マークアップ
③ CSSでデザインする
④ サーバーにテストアップ
⑤ 納品 ※納品後も運営というサポートがある。
ＨＴＭＬ （右クリック⇒ページのソースを表示で見れる）
文章の内容。
検索エンジンのため。HTMLは単体でも動く。このサイトには何が記述してあるということをマークアップするための言語。
ＣＳＳ （右クリック⇒検証で見れる）
HTMLの見た目を整える。
単体で動くことはない。CSSはHTMLありき。見た目を作るための言語。
ポイントは整理整頓することと、概要を理解すること。
コピペ・検索していい。こうすればこうなるかなと検索して出来るようになればOK。
今自分がどこを触っているのか理解しながら作業する。
使わないウィンドウは閉じる。しっかり名前をつけてファイルする。
コピペようのサイトを作ると整理がつきやすい。
バックアップはこまめに！！
参考サイト
Webサイト（ページ）の構成要素について
- HTML（HyperText Markup Langage）：Web ページ内の各要素の意味や文書構造を定義します。
- CSS（Cascading Style Sheets）：レイアウトデザインや各要素の装飾（色・サイズなど）を定義します。
- JavaScript / jQuery：動きを付けたり計算などの処理を行います。
参考サイト
- 【初心者向け】HTML、CSS、JavaScriptの違いと役割について
- HTMLとCSSとJavaScriptそれぞれの役割について考えをまとめてみた。
- 【初心者向け】 HTML、CSS、Javascriptの基本を理解しよう
Webサイト（ページ）の開発フォルダについて
Webサイト（ページ）を作成する時は、開発用のフォルダを作成して、その中にHTMLファイル、CSSファイル、JavaScript / jQueryファイル、画像ファイルなどを格納するようにしてください。開発用フォルダには多くのファイルが格納されることになりますのでファイルの整理整頓が重要です。ファイルが迷子にならないようにサブフォルダの作成も含めてわかりやすく管理してください。また、開発用フォルダには、Webサイト（ページ）の表示に不要なファイル（イラストレータのaiファイル、フォトショップ用のpsdファイルなど）は、格納しないようにしてください。
ワンポイントアドバイス
Webサイトを作成するには、HTML、CSS、JavaScript / jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。
開発用のフォルダ
Webサイトを作るときはまず開発用のフォルダを作成する。
HTMLファイル・CSSファイル・画像ファイルをいれる。
※不要なファイルは入れない！aiやpsdファイルは入れない！（イラレ・フォトショで開くためのファイルでWebサイト制作に関係ないから）
とにかく整理整頓！
Webページ作成ツールについて
Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。
参考サイト
Webページ作成ツール
terapad / chrome
文字コードについて
日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。
参考サイト
文字コード
UTF-8で統一する。
ファイルのパス指定について
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。
参考サイト
絶対パスと相対パスの違いをイラストを使って解説！
ファイルのパス指定
ファイルを読み込む道順のこと
HTMLの基本構造について
タグの構造
この書式を覚える！
<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>
（例）
<p class=”hello”>こんにちは</p>
- 要素名
タグの種別を指定します。タグ名とも言われます。要素の種類によって終了タグ（</要素名>）の有無が決定します。 - 属性
要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。 - 属性値
属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。
HTMLの基本構造
ルール・お作法として毎回これで始まる。コピペ使用でOK。
<!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 ページとして表示されます。
参考サイト
ワンポイントアドバイス
HTMLは、SGML（Standard Generalized Markup Language）という文章（マニュアルや論文など）を記述する言語を元にしてWebでの文章定義を目的に開発されました。このため、文章の見出し、文章本文、リスト（箇条書）、図形などの定義が重要な機能になっています。
HTMLの基本構造については、以下サイトも合わせて参照してください。
・htmlの記述【基本タグ】
特殊文字について
HTMLを記述する時に、画面に表示したい文字を、そのまま記述できない場合があります。例えば「<」を画面に表示しようとして、そのまま記述するとタグの開始との区別ができなくなります。「<」を画面に表示する場合は、「<」と記述することで画面に「<」と表示することが可能になります。このような文字を特殊文字と呼んで特別な記述が必要になります。代表的な特殊文字には、「”」→「"」、「&」→「&」、「<」→「<」、「>」→「>」、「（スペース）」→「 」、「©」→「©」、「®」→「®」などがあります。
参考サイト
※そのままだとタグとして読み込まれてしまうのでコンピューターが間違えないように違う表記で書く。
インデンテーション（字下げ）について
HTMLの記述では、可読性の向上が求められます。インデンテーション（字下げ）を意識して記述してください。
参考サイト
- 字下げしてHTMLを見やすく！HTMLインデントの使い方【初心者用】
- 【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう
- HTMLインデントで綺麗なコードに見せるテクニック！【初心者向け】
入れ子の構造になっている
開始タグ＜○○○○＞←親
＜○○○○＞←子
＜○○○○＞←孫
＜○○○○＞←子
閉じタグ ＜○○○○＞←親
インデントを揃える。 整理整頓スキルのひとつ！
本日の感想
初めてのコーディングの授業ということで、名前だけ聞いたことはあったけど何のことなのかまったくわからなかった単語の意味や役割がなんとなく分かった。明日実際にやってみて、より理解を深めていきたいと思う。
コメントを残す