HTML & CSSの基礎を学習済みで、
次のステップに進みたい人へ
こんにちは！
ぼくはHTMLに興味がありこの本を買いました。
教科書では教えてくれないHTML&CSS
実はビジネス学校へ習いに行ったのですが、
教材がこの本だったのです。
難易度が中級のコースに知らないで、
入ってしまった物ですから、
1回（4週）の講習では消化不足でした。
以前
これから始めるHTML&CSSの本
この本で一通りのことは学習していたつもりでしたが、
中級コースは一段とレベルが高いのでした。
着いていくのがやっとだったのは
以前書いた記事の”タイピングが遅い”
からでした。
ブラインドタッチ出来る人達にはかないません。
今夜もタイピングゲーム“寿司打”で特訓です。
改めてHTML & CSS中級のコースの
復習をしている最中です。
目次
HTMLコード勉強の仕方
今まではウィンドウズについている”メモ帳”を
使ってHTMLを書いていましたが、
今回はVisual Studio Codeを使ってかいています。
無料です。
なんだか専門家になった気分になります。
HTMLコード勉強にはChatGPTが役に立ちます
本には付録でソースコードが付いてきますが、
眺めているだけでは勉強になりません。
写経をして、意味を確認しながら、
コードを写して覚えます。
そのときに先生がいたら良いな？
と思いませんか。
ChatGPTが役に立ちます。
HTMLコードを打ち込んでChatGPTに聞く
自分でコードを打ってから、
コピペでChatGPTに貼り付けると
丁寧に解説してくれます。
またコードの誤字も指摘してくれるんです！
冒頭の文だけ紹介しますね！！
この記事は【教科書では教えてくれないHTML&CSS】に準拠しています。
教科書では教えてくれないHTML&CSS
HTMLコードの詳細解説
ここからはChatGPTが解説した記事です。
post,html.冒頭の部分について記載しました。
このHTMLコードは、
Webページの構造と基本的な情報を定義しています。
各行の意味を詳しく解説していきます。
HTMLの基本構図
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトタイトル</title>
<meta name="description" content="サイトの概要を記載">
<link rel="stylesheet" href="style.css">
</head>
<body>
コンテンツを記載
</body>
</html>1. ドキュメントタイプ宣言
HTML
<!DOCTYPE html>
これは、HTML5で記述された
ドキュメントであることを示す宣言です。
すべてのHTMLドキュメントの先頭に必要です。
2. HTML要素
HTML
<html lang="ja">
これは、HTMLドキュメントのルート要素です。
lang属性には、ドキュメントの言語を指定します。
この場合は、日本語（ja）です。
3. ヘッド要素
HTML
<head>
これは、ドキュメントのヘッダー部分を表す要素です。
タイトル、メタ情報、リンクなどの情報を含みます。
4. メタチャセット
HTML
<meta charset="utf-8">
これは、ドキュメントで使用される
文字エンコーディングを指定するメタ情報です。
この場合は、UTF-8エンコーディングが使用されます。
5. ビューポート設定
HTML
<meta name="viewport" content="width=device-width,initial-scale=1">
これは、様々なデバイスで適切に表示されるように
ビューポートを設定するメタ情報です。
具体的には、デバイスの幅に合わせた表示と、
初期ズームを1倍に設定します。
6. タイトル
HTML
<title>Tanksaku!-知らない街の｢地元｣の空気に触れたい！ ファーマーズマーケットには情報がいっぱい</title>
これは、ドキュメントのタイトルを表す要素です。
ブラウザのタブや検索結果などに表示されます。
7. スタイルシートのリンク
HTML
<link href="css/nomalize.css" rel="stylesheet">
<link href="css/style.css" rel=stylesheet">
これは、ドキュメントにスタイルシートを適用するリンク要素です。
href属性には、スタイルシートのファイルパスを指定します。
この場合は、css/nomalize.cssとcss/style.cssという
2つのスタイルシートが適用されます。
8. Google Fontsの読み込み
HTML
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400, 700&display=swap&subset=japanese" rel=stylesheet>
<link href="https://fonts.googleapis.com/css?family=Croissant+One&display=swap" rel="stylesheet>
これは、Google Fontsからフォントを読み込むリンク要素です。
family属性には、読み込むフォントファミリーを指定します。
この場合は、Noto Sans JPとCroissant Oneという
2つのフォントファミリーが読み込まれます。
9. 本文要素
HTML
</head>
<body>
これは、ドキュメントの本文部分を表す要素です。
実際に表示されるコンテンツはこの要素内に記述されます。
まとめ
このHTMLコードは、
Webページの基本的な構造と情報を定義しています。
具体的には、以下の情報が含まれています。
- ドキュメントの言語：日本語
- タイトル：Tanksaku!-知らない街の｢地元｣の空気に触れたい！
ファーマーズマーケットには情報がいっぱい - 使用するスタイルシート：
css/nomalize.css、css/style.css - 使用するフォント：
Noto Sans JP、Croissant One
このコードをベースに、さらにコンテンツを追加したり、
デザインを調整したりすることで、
様々なWebページを作成することができます。
補足
- このコードはあくまで一例であり、
実際のWebページではさらに多くの要素や属性が
使用される可能性があります。 - HTMLの詳細については、以下のリファレンスを参照してください。
ChatGPTの解説おわり。
このように自分でコードを書いて確認することで深く理解をすることが出来ます。
ChatGPTはHTMLの学習に役に立ちます
実際には本の記述を参考にしますが、
改めてChatGPTに貼り付けると
もう少し細かく教えてくれます。
今回は<!DOCTYPE html>
から<body>までご紹介致しました。
この調子で
pose.html
index.html
style.cssまで
学習出来ました。
すでに他の人の記事を読むと
ChatGPTの指示だけで
HTML & CSSは書けてしまうのです。
しかし、文法や単語の意味がわからなければ、
それが正しいのか間違っているのか
判断ができません。
文法や単語の意味をあなたが覚えることが重要です。
一度では覚えきれないので、
何度も写経してみてください。
きっとあなたも出来るはずです。
タグ
#HTML,#CSS,#中級,#書籍,#おすすめ,#学習方法,#レビュー,#ChatGPT,#Visual Studio Code,#コーディング,#プログラミング,#Web制作,#挫折,#克服,#完全攻略,#教科書では教えてくれないHTML&CSS #HTMLの基本構図,#学習方法, #ChatGPT活用,#AIコーディング,#オープンソースAI
