-本日のアジェンダ-
1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について
作成の流れ
⓪依頼を受ける
①提案
企画書・サイトマップ・見積り・ワイヤーフレームの用意など
ー制作依頼を受諾「制作スタート」ー
②デザインに必要な素材の作成
ロゴ・ピクトグラム・アクセスマップ・写真・原稿・その他
③デザインラフの作成
PCデザインだけでなくスマホ・タブレットの素材も用意
ソフトについて
Photoshop,Illustrator ,XD
④コーディング
HTML・CSS
WEBページ 右クリック検証：HTML・CSS見れる
・HTMLは検索エンジンのため
マークアップ言語
・CSSは見た目
2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について
・コーディングの手順
１：素材の確認
これまで作ったもの含め準備しておく
ロゴ・ピクトグラム・写真・原稿・SNS/JQueryなど
２：マークアップ
①骨組みのタグを整える
!doctype html, html, head, body
★重要
②基本タグで原稿・画像をマークアップ
h1-h6, p, il/li, img, a,など
③セクション部分
header, nav, main, section, footer
④デザインに合わせて追加
div, span, id=””,class=””
⑤検証ツールを使う
◆参考サイト
http://www.htmllint.net/html-lint/htmllint.html
３：CSSでデザインする
①リセットCSSの設定
②セレクタの記述を先にする
参考：セレクタ・プロパティ・値とは
セレクタとは
「CSSによるデザイン指定をどこの部分に対して適用するか」を決めるもの
↓セレクタ
body{
color : yellow}
プロパティ↑ ↑値
③プロパティを書く
Dreamweaverなど使う
④メディアクエリを足す
⑤SNS、JQueryの埋込は最後
４：サーバーにテストアップ
５：納品
★学校のタグまとめサイトを参考に
自分専用のまとめサイトを作成するのがおすすめ
・学校のタグまとめサイト
footerの「htmlの記述 body」のページにタグチェッカー載ってる
コード書いたらタグチェッカーにかける
3限目
学科 HTML/CSS基礎①
HTMLの基本構造について
開発フォルダ作る
・index.html
・style.css
をいれる
不要なaiデータやpsdデータなどは入れない。
文字コード
基本 UTF-8N(BOMなし)を使用
その他日本語を扱う文字コード
シフトJIS EUC UTF-8など
4限目
学科 HTML/CSS基礎①
文章情報と文書本文について
＝＝タグの構造＝＝
<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>
（例）
<p class=”hello”>こんにちは</p>
＝＝HTMLの基本構造＝＝
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
代表的な特殊文字
「”」→「"」、「&」→「&」、「<」→「<」、「>」→「>」、「（スペース）」→「 」、「©」→「©」、「®」→「®」など
HTML＝ハイパーテキストマークアップランゲージ
・インライン要素とブロック要素
インライン要素
…文章の一部として扱う要素。要素の前後で改行されない。
ブロック要素
…行全体をまとまりとして扱う要素。要素の前後に改行される。
＝＝基本の構造＝＝
| <!doctype html> <html> <head> 文書のヘッダ情報 </head> <body> 文書の本体 </body> </html> |
| <!doctype html> | DOCTYPE宣言（ドキュタイプ） |
|---|---|
| <html>∼</html> | HTML文書であることを示す |
| <head>∼</head> | 文書のヘッダ情報を表す |
| <body>∼</body> | 文書の本体を表す |
＝head＝
| <meta> | その文書に関する情報（メタデータ）を指定する |
|---|---|
| <title>∼</title> | 文書にタイトルをつける |
| <link>∼</link> | リンクする外部リソースを指定する |
＝body＝
| 記述例 | 属性 | 意味 |
|---|---|---|
| <div id=”main”>∼</div> | id=”” | id名を付ける 1ページ1つ |
| <section class=”tag-html sample-body”>∼</section> | class=”” | class名を付ける 複数利用可 ※半角スペースで複数指定可 |
| <h1>∼</h1> ～ <h6>∼</h6> | 見出しを付ける |
|---|---|
| <section>∼</section> | 一つのセクションであることを示す |
| <nav>∼</nav> | ナビゲーションであることを示す |
| <header>∼</header> | ヘッダであることを示す |
| <footer>∼</footer> | フッタであることを示す |
| <p>∼</p> | ひとつの段落（パラグラフ）であることを表す |
|---|---|
| <hr> | テーマや話題の区切りを表す ウェブページ上で水平な区切り線（ horizontal rule）を引く |
| <ul> <li>∼</li> </ul> | 順序のないリストを表示する ul=Unordered List li=リストの各項目 |
| <ol> <li>∼</li> </ol> | 順序のあるリストを表示する ol=Ordered List |
| <dl> <dt>∼</dt> <dd>∼</dd> </dl> | 定義・説明リストを表すdlタグは必ずdtタグとddタグとセットイメージ dl（Definition List）: 定義リスト全体を囲むタグです。 dt（Definition Term）: 定義される用語（見出し）を表します。 dd（Definition Description）: dt で定義された用語に対する説明文を表します。 |
| <div>∼</div> | ひとかたまりの範囲として定義する |
| <main>∼</main> | メインコンテンツであることを示す |
| ∼</a> | ハイパーリンクを指定する |
|---|---|
| <em>∼</em> | 強勢する（アクセントを付ける）箇所を表す |
| <strong>∼</strong> | 強い重要性を表す |
| <small>∼</small> | 免責・警告・著作権などの注釈や細目を表す |
| <i>∼</i> | 声や心の中で思ったことなど、他と区別したいテキストを表す ※イタリック表示 |
| <b>∼</b> | 文書内のキーワードや製品名など、他と区別したいテキストを表す※ボールド |
| <span>∼</span> | ひとつの範囲として定義する 「SPAN」とは、単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。 グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。 |
| <br> | 改行する |
5限目
学科 HTML/CSS基礎①
本日の講義のまとめ
本日のテーマ
Webサイト制作の手順を理解しましょう
Webサイト（ページ）の制作について
お客様からWebサイト（ページ）の制作を依頼された場合に必要となる作業を工程別に理解しましょう
ワンポイントアドバイス
Webサイトを作成するには、HTML、CSS
、JavaScript / jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。
本日学んだこと
・HTMLだけでも動くが、CSSは単独では動かない
・HTMLはもともと論文を共有するために作られた言語
感想
本日からHTMLに入りました。
私は少しだけ学んだことがあったので復習な部分もありましたが、
HTMLが論文共有のために作られたという点は知らなかったので勉強になりました。
また、タグについてはもう忘れていた部分も多かったので、思い出しつつきちんと使えるようにしていきたいです。