学科2025.9.19
授業内容
- ファイル管理について
- Webページ制作実践
- 本日の講義のまとめ
習得内容
- ファイル管理について
■ファイル名は半角英数字
ファイル名は半角英数字、半角ハイフン、半角アンダースコア以外の記号やスペースを使用すると誤作動を起こす可能性がある為使用しない。
■ファイルのパス指定について
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法がある。
絶対パスはサイト外のリンクで相対パスはサイト内のリンク
参考サイト https://verse-type.co.jp/column/hp_absolutepath-relativepath/
■ブロックレベル要素とインライン要素について
要素の多くは、ブロックレベル要素とインライン要素に分類される。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっているので、あくまでも性質を持っていると考えておく。
参考サイト https://samplesdl.me/training_html-css/sample-display.html
▢よく使うブロックレベル要素の例
| 用途 | 要素名 |
|---|---|
| 見出し | h1〜h6要素 |
| 段落 | p要素 |
| 箇条書き | ul, li要素 |
| 汎用タグ | div要素 |
▢よく使うインラインレベル要素の例
| 用途 | 要素名 |
|---|---|
| リンク | a要素 |
| 画像 | img要素 |
| 汎用タグ | span要素 |
- Webページ制作実践
参考サイト 大浜先生制作サイト https://html-css.hamaya2020.com
■TeraPadの設定
参考サイト HTML-CSS 入門講座 Lesson-1 HTML-CSS の勉強を始める前に
■Webページ制作実践①
①HTMLの基本構造について
ファイルを新規で作成し、HTMLの基本構造を記述してみる
<!doctype html>
<html>
<head>
文書のヘッダ情報（メタデータ）を記述する場所
</head>
<body>
文書の本体情報を記述する場所
</body>
</html>
ここまでできたら、htmlファイルを保存。
保存の際、文字コードと、htmlの拡張子（.html）指定を忘れずに！
②文書のヘッダ情報について
参考元を確認し、文章のヘッダ情報を記述していく。
htmlファイルを一冊の本に例えると、ヘッダ情報は本のタイトルや、出版社情報、著者情報などにあたる。本体情報は本の中身にあたる。
③本体情報について
文章の本体情報を、タグを使って記述していく。
htmlファイルを一冊の本に例えると、文書の本体情報は本の中身にあたる。
④構造化タグとグループ化タグについて
それぞれのタグを使って、文章のまとまりを作ってみる。
構造化タグ <header>、<main>、<footer>
グループ化タグ <div>
ここまでできたら、htmlファイルを保存し、該当のファイルをChromeで開いてみる。
⑤htmlで画像を表示させる
imgタグを使って該当画像のパスを指定し、htmlで画像を表示させてみる。
□画像サイズの確認方法
⑥htmlで特殊文字を表示させる
htmlで特殊文字を表示させてみる。
□HTMLのチェックサイト
https://www.htmllint.net/html-lint/htmllintl.html#
■トレーニング-１
▢Webページ制作実践で作成したページのキャプチャのやり方
サイトの画面を右クリックし検証を選択
赤い▢部分のアイコンをクリック
サイト表示画面の外枠の縦線２本のところをクリックしながらスライドさせて、赤い線のところの数字を1200にする
赤い▢のアイコンをクリックし、「Capture full size screenshot」を選択する
▢HTMLトレーニング課題
先生が用意してくださったHTML のテンプレートを使用して、半分答えを見ながら制作したWebページ
