検索窓/search window

HTML & CSS 中級者向け 書籍 レビュー ブログ記事

挫折厳禁！ Web
挫折厳禁！
2024.06.24

HTML & CSSの基礎を学習済みで、
次のステップに進みたい人へ

こんにちは　はじめまして！

【きりもじや】です。

きりもじや

ツイッター　@hanafuji2211/

インスタグラム　@kirimojiya_syodo/

 

元　学校教員

google　月間2,500PV達成


こんにちは！
ぼくはHTMLに興味がありこの本を買いました。

教科書では教えてくれないHTML&CSS

実はビジネス学校へ習いに行ったのですが、
教材がこの本だったのです。

難易度が中級のコースに知らないで、
入ってしまった物ですから、
1回（4週）の講習では消化不足でした。

以前

これから始めるHTML&CSSの本

この本で一通りのことは学習していたつもりでしたが、
中級コースは一段とレベルが高いのでした。

着いていくのがやっとだったのは
以前書いた記事の”タイピングが遅い”
からでした。

【書道とタイピング】　初心者でも簡単に始められる

ブラインドタッチ出来る人達にはかないません。

今夜もタイピングゲーム“寿司打”で特訓です。

 

改めてHTML & CSS中級のコースの
復習をしている最中です。

目次

HTMLコード勉強の仕方

HTML

今まではウィンドウズについている”メモ帳”を
使ってHTMLを書いていましたが、
今回はVisual Studio Codeを使ってかいています。
無料です。

なんだか専門家になった気分になります。

HTMLコード勉強にはChatGPTが役に立ちます

本には付録でソースコードが付いてきますが、
眺めているだけでは勉強になりません。

写経をして、意味を確認しながら、
コードを写して覚えます。

そのときに先生がいたら良いな？
と思いませんか。

ChatGPTが役に立ちます。

HTMLコードを打ち込んでChatGPTに聞く

ChatGPT

自分でコードを打ってから、
コピペでChatGPTに貼り付けると
丁寧に解説してくれます。

またコードの誤字も指摘してくれるんです！

冒頭の文だけ紹介しますね！！

この記事は【教科書では教えてくれないHTML&CSS】に準拠しています。

教科書では教えてくれないHTML&CSS

教科書では教えてくれないHTML&CSS

HTMLコードの詳細解説

ここからはChatGPTが解説した記事です。

post,html.冒頭の部分について記載しました。

ChatGPT

この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

ご自由にご使用下さい

＼最速サーバーです／
PAGE TOP