【Progate初級編-HTML】ヘッダー、メインページ、コンテンツページのテンプレート解説!

プログラミング
スポンサーリンク

プログラミング学習をProgateでやっているけど、なかなか定着しない。

そもそもよくわからないことが多いので、細かく解説してくれるサイトとかあると嬉しいなと思う。

どこかに詳しく解説してくれるサイトないかなー?

としひこ
としひこ

こんばんは。

としひこです。

今回はこのような疑問にお答えしていこうと思います。

この記事を読むことで、

「Progateでプログラミング学習を始めたばかりの人でも内容を理解できる」

ようになります。

プログラミングを始めたばかりだと、右も左も分からないしコードを勉強していてもさっぱり頭に入ってこないと言う経験が私はありました。

このような私の体験談をもとに少しでも理解しやすいコンテンツを提供しようと思い、今回の記事を書いています。

この記事を最後まで読んでいただき、プログラミング学習を継続できる人が増えてくれると嬉しいです。

スポンサーリンク

【初級編】ヘッダーのテンプレートについて

まず最初に、サイトのヘッダーと呼ばれる一番上に表示される部分のコードを解説していきます。

✅画像のところまでのコード

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Progate</title>
   <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body>
   <!-- ここからHTMLを書き始めてください -->
   <div class="header">
     <div class="header-logo">Progate</div>
     <div class="header-list">
       <ul>
         <li>プログラミングとは</li>
         <li>学べるレッスン</li>
         <li>お問い合わせ</li>
       </ul>
     </div>
   </div>
 </body>
</html>

この一連のコードについて、細かく解説を下記のようにしていきます。

ご参照ください。

<!DOCTYPE html>

ここはとりあえず「おまじない程度のもの」だと認識しておくのが楽です。

詳しく説明していくと、

このタグは「HTML」のタグではありません。

DTDという文書を解釈するために必要なタグで、これを書かないと「HTMLの文書ですよ」という理解をコンピュータができないということになります。

ちなみにDTDとは、Document Type Definitionの略称で、文書型の定義の意味になります。

<html></html>

このタグは、「HTMLですよ」ということを宣言するタグです。

HTMLは、HyperText Markup Languegの略称です。

<head></head>

このタグは、文書全体の中の「ヘッダー部分ですよ」ということを指定するものです。

文章構成は、(html)(head)(body)の大きく3つで構成されています。

<meta charset=”utf-8″>

このタグは、「UTFー8」という文字コードをHTM L文書で使うということを宣言したものです。

大体このタグをそのまま使えるので、そのまま覚えておくといいです。

<title>Progate</title>

このタグは、タイトルタグです。

そのサイトのタイトルとして表示される部分になります。

イメージとしては、画像のような検索結果で表示されるところがタイトルタグの部分です。

<link rel=”stylesheet” href=”stylesheet.css”>

この一連のタグは、「HTML文書にCSSというサイトを綺麗に見せるためのコードを反映させますよ」というものになります。

昔は、背景や文字装飾などもまとめて一つのファイルに書いていたそうですが、コードが複雑になりすぎるので、HTMLとCSSを別々のファイルに分けたのが現在の主流です。

<body></body>

このタグは、「文書の本体ですよ」ということを定義するものです。

イメージとしては、実際にサイト作成した時に表示される部分になります。

<!– ここからHTMLを書き始めてください –>

これは、HTML文書の中でメモかきをしたい場合に実際にコードとして読み込まれないようにできる部分です。

<!– –>

このような記号で文字を囲むとコードとして認識されなくなるので、自分がわかりやすいようにメモを残すことができます。

<div class=”header”></div>

このタグは、「div」と「class」という二つのもので構成されています。

「div」は、一つのグループにするためのタグです。

「class」は、「div」タグに名前をつけて区別するためのものになります。

具体例としては、

<h2>赤文字にしたい</h2>
<p>こっちも赤文字にしたい</p>

このようなコードがあった時に、文字色をCSSで赤文字にする場合は、h2タグとpタグの両方に赤文字を指定する必要があるので二度手間になります。

しかしながら、下記のようにすることでグループとして認識させることができるため、一回で赤文字指定できるようになります。

<div>
<h2>赤文字にしたい</h2>
<p>こっちも赤文字にしたい</p>
</div>

こんな感じですね。

続いてclassについてですが下記のように、

<div>
<h2>赤文字にしたい</h2>
<p>こっちも赤文字にしたい</p>
</div>
<div>
<h2>青文字にしたい</h2>
<p>こっちも青文字にしたい</p>
</div>

このような二つがある場合に、divタグだけではそれぞれを区別することができません。

そこで、divタグにそれぞれの名前を持たせることで区別することができるようになります。

<div class=“Red”>
<h2>赤文字にしたい</h2>
<p>こっちも赤文字にしたい</p>
</div>
<div class=“Blue”>
<h2>青文字にしたい</h2>
<p>こっちも青文字にしたい</p>
</div>

このようにするだけで、グループ分けが簡単にできるようになります。

<div class=”header-logo”>Progate</div>

上記で説明した内容と同じです。

このタグは、「header-logo」というdivタグのグループに「Progate」という文字を表示させるものです。

 <div class=”header-list”></div>

上記で説明した内容と同じです。

このタグは、「header-list」というdivタグのグループ名を指定したものです。

<ul></ul>と<li></li>

このタグは、箇条書きのようなリストを作成するためのタグです。

下記のようなコードを書くと、

<ul>
<li>アイウエオ</li>
<li>カキクケコ</li>
<li>サシスセソ</li>
</ul>

下記のような表示になります。

・アイウエオ
・カキクケコ
・サシスセソ

箇条書きを使いたい時によく使うコードなので覚えておいて損はないです。

【初級編】メインページのテンプレート

ここは、ヘッダーの次に表示される部分のコードになります。

サイトのトップに表示されるコンテンツようなイメージになります。

✅画像のところまでの追記したコード(追記部分は赤文字)

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Progate</title>
   <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body>
   <!-- ここからHTMLを書き始めてください -->
   <div class="header">
     <div class="header-logo">Progate</div>
     <div class="header-list">
       <ul>
         <li>プログラミングとは</li>
         <li>学べるレッスン</li>
         <li>お問い合わせ</li>
       </ul>
     </div>
   </div>
   <div class="main">
     <div class="copy-container">
       <h1>HELLO WORLD<span>.</span></h1>
       <h2>プログラミングの世界へようこそ</h2>
     </div>
   </div>
 </body>
</html>

最初に記載しているコードに、メインページのコンテンツを追記した状態のコードです。

新しく出てきたタグなどを解説していきますね。

<div class=”main”>

このタグは、「main」という名前をdivタグのグループに指定したものです。

<div class=”copy-container”>

このタグは、「copy-container」という名前をdivタグのグループに指定したものです。

<h1>HELLO WORLD<span>.</span></h1>

h1タグは、「見出し1」という要素を持っているタグです。

一番文字が大きい表示になります。

Spanタグは、文字を強調したい場合に使うものです。

文字を太くしたりする時に使います。

<h2>プログラミングの世界へようこそ</h2>

H2タグは、「見出し2」とう要素を持っているタグです。

見出し1よりも文字が小さくなります。

サイト作成では、各コンテンツの見出しとしてh2タグを使うことが多いです。

私も自分のブログで使用しています。

【初級編】コンテンツページのテンプレート

ここからは、サイトのコンテンツを紹介するページのコードになります。

ここからはちょっと細かくなってきますので、しっかりと確認していきましょう。

画像のところまで追記したコード

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Progate</title>
   <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body>
   <!-- ここからHTMLを書き始めてください -->
   <div class="header">
     <div class="header-logo">Progate</div>
     <div class="header-list">
       <ul>
         <li>プログラミングとは</li>
         <li>学べるレッスン</li>
         <li>お問い合わせ</li>
       </ul>
     </div>
   </div>
   <div class="main">
     <div class="copy-container">
       <h1>HELLO WORLD<span>.</span></h1>
       <h2>プログラミングの世界へようこそ</h2>
     </div>
     <div class="contents">
       <h3 class="section-title">学べるレッスン</h3>
       <div class="contents-item">
       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
       <p>HTML & CSS</p>
       </div>
       <div class="contents-item">
       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
       <p>PHP</p>
       </div>
       <div class="contents-item">
       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
       <p>Ruby</p>
       </div>
       <div class="contents-item">
       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
       <p>Swift</p>
       </div>
     </div>
   </div>
 </body>
</html>

一気にコードが増えているように見えますが、コンテンツの数だけ増える形になるため、増えたように見えます。

内容的には同じことの繰り返しなので、一緒に確認していきましょう。

<div class=”contents”>

このタグは、「contents」という名前をdivタグのグループに指定したものです。

<h3 class=”section-title”>学べるレッスン</h3>

このタグは、「section-title」という名前をh3タグのグループに指定したものです。

<div class=”contents-item”>

このタグは、「contents-item」という名前をdivタグのグループに指定したものです。

<img src=”https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg”>

imgタグというものは、画像を文章内に表示させるためのものになります。

srcは、画像のurlなどのリンクを指定して表示させるためのタグです。

今回の場合は、「https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg」という場所のリンクから画像を引用してきています。

<p>HTML & CSS</p>

Pタグは段落を指定するためのものです。

例えば、「HTML & CSSHTML & CSSHTML & CSSHTML & CSSHTML & CSS」のような文章があったとして、pタグを使わないとわかりにくい文字列になってしまいますが、「HTML & CSS」をpタグを使って表記すると、

HTML & CSS
HTML & CSS
HTML & CSS
HTML & CSS
HTML & CSS

のようにしっかりと段落わけされて見やすくできます。

いかがでしたでしょうか?

少しでも理解していただけましたでしょうか?

私も勉強途中でわからないことだらけですが、初心者だからこそ勉強を始めた手の人がつまづきやすい部分やわかりにくい部分を理解できると思っています。

これからも勉強をしながら初心者視点でプログラミング情報を発信していきますのでどうぞよろしくお願いします。

タイトルとURLをコピーしました