【挑戦企画】大学生のHTML&CSS入門!基本的な構造を学ぼう〜3日目だよ〜

 

最近勉強にはまっているはらくん(@harakunishere)です!

今回はHTML&CSSに関して学んだことの続きを書いていこうと思います。

 

ちなみに前回は簡単なコード書く練習をしてみましたね。

 

【挑戦企画】大学生のHTML&CSS入門!簡単なコードを書いてみよう〜2日目だよ〜 今週HTML&CSSを勉強中のはらくん(@harakunishere)です! ちなみに前回はHTMLを書いていく準...

 

では_HTML&CSSの勉強を続けていきましょう。

初心者必見!HTMLの構造テンプレート

 

HTMLのコードには

必ず書いておかなければならない または 書いておいたほうがいい

というコードがあります。

またHTML文章は

<html></html>・<head><head>・<body></body>

という三種類のタグを使って表現していきます。

 

そしてそれをテンプレートとして保存しておくことでスムーズにHTMLの文章を作成することが出来るでしょう。

前回作成した「かえるガンクラブ入会申し込み」を例にして説明していきます。

 

もし、まだ前回の記事を読んでいない方はここから下は前回の記事を読んだ後の方がいいかもしれません。

 

【挑戦企画】大学生のHTML&CSS入門!簡単なコードを書いてみよう〜2日目だよ〜 今週HTML&CSSを勉強中のはらくん(@harakunishere)です! ちなみに前回はHTMLを書いていく準...

 

では、学習していきましょう!

 

HTMLのコードを簡単に書いてみよう!前回の復習

前回は

 

こんな感じのページを作りましたね。

ちなみにコードはこんな感じ♬

<h1>かえるファンクラブ入会申し込み</h1>
<p>入会するには以下のフォームにご記入ください!</p>
<p>お名前(あだ名でも大丈夫です。): <input type="text" name="text-name" placeholder="かえる大好きマン"></p>
<p>メールアドレス: <input type="email" name="mymail" placeholder="kaeru@uta.com"></p>
<p>パスワード: <input type="password" name="passcode"></p>
<p><button type="submit">登録する</button></p>
このままでも確かにWebブラウザにはサイトのようなものが表示されるのですが、これはまだきちんとしたHTMLの文章では無いようです。

 

これをきちんとした文章にするためにこれから説明していきます!

<!DOCTYPE html>を一番先頭に書き込もう!

<!DOCTYPE html>というコードを文章の一番先頭に書く癖をつけましょう!

<!DOCTYPE html>でドキュメントタイプを宣言することができます。

したがって、このコードはこの文章がHTMLの文章であることを表しています。

また<!DOCTYPE html>のことをDOCTYPE宣言と言います。

どうやらHTMLの文章では必ずこのコードを書いておいた方が良いみたいです。

例として「かえるファンクラブ入会申し込み」ではどのようになるでしょうか?

<!DOCTYPE html>
<h1>かえるファンクラブ入会申し込み</h1>
<p>入会するには以下のフォームにご記入ください!</p>
<p>お名前(あだ名でも大丈夫です。): <input type="text" name="text-name" placeholder="かえる大好きマン"></p>
<p>メールアドレス: <input type="email" name="mymail" placeholder="kaeru@uta.com"></p>
<p>パスワード: <input type="password" name="passcode"></p>
<p><button type="submit">登録する</button></p>

このように先頭に<!DOCTYPE html>を書いていきます。

htmlの文章全体を<html></html>で囲もう!

HTMLの文章は<html>というタグで囲まないといけません。

ただし先ほど出てきたDOCTYPE宣言は<html>の外(上)に来るようにしましょう。

つまりDOCTYPE宣言をした後に、<html>を書き、文章の最後にも</html>を書いていけば大丈夫です。

例をみていきましょう。

<!DOCTYPE html>
<html>
<h1>かえるファンクラブ入会申し込み</h1>
<p>入会するには以下のフォームにご記入ください!</p>
<p>お名前(あだ名でも大丈夫です。): <input type="text" name="text-name" placeholder="かえる大好きマン"></p>
<p>メールアドレス: <input type="email" name="mymail" placeholder="kaeru@uta.com"></p>
<p>パスワード: <input type="password" name="passcode"></p>
<p><button type="submit">登録する</button></p>
</html>

 

このように<html></html>で囲むことによって、この文章がhtmlで書かれていることが分かるようになっています。

Webで表示されている文章を<body></body>で囲もう!

<body></body>の間には文章の本体となる部分を挟みます。

例として「かえるファンクラブ入会申し込み」を確認してみましょう。

<!DOCTYPE html>
<html>
  <body>
      <h1>かえるファンクラブ入会申し込み</h1>
      <p>入会するには以下のフォームにご記入ください!</p>
      <p>お名前(あだ名でも大丈夫です。): <input type="text" name="text-name" placeholder="かえる大好きマン"></p>
      <p>メールアドレス: <input type="email" name="mymail" placeholder="kaeru@uta.com"></p>
      <p>パスワード: <input type="password" name="passcode"></p>
      <p><button type="submit">登録する</button></p>
   </body>
</html>

ここで一つやりたいのが

段落を作って行くということです。

結構コードを書くとごちゃごちゃして来るので<body><body>タグや<html></html>タグのような大きく囲むタグがあるときは上のように段落を作りましょう。

段落一つ分のことをインデントと言います。

インデントをつけることで

どのタグでどの要素が囲まれているのかが、わかりやすくなりますね。

文章のタイトルをつける!<head></head>を書こう!

 

<head></head>にはどんな文章を作るのか。といった情報を書いていきます。

<head></head>に書いて行くことは決まっているので、順番に紹介します。

<meta charset=”UTF-8″>

 

このめたタグで書かれた要素はこの文章がどんな文字コードで書かれているかを指定するものです。

GoogleChromeではこれを設定しなくても文字化けせずに表示してくれますが、ブラウザの種類によっては文字化けしてしまうことがあるようです。

また検索エンジンによってはこのメタ要素がないために認識してくれず、検索に上がりづらくなることもあるそうです。

<metaname=”viewport” content=”width-device-width”>

 

これはViewportというものの設定で、スマートフォンなんかでの表示に関しての設定のようです。

僕はUdemyで勉強しているのですが、詳しく学びませんでした。

なのでこのViewportについては興味のある方は調べてみてくださいね!

<title></title>

 

<title></title>タグではWebサイトのタイトルを作ることができます。

例えば今回は

<title>かえるファンクラブ入会申し込み</title>

といった風にタイトルをつけます。

 

そうするとこんな風にページタイトルがつきます。

このタイトルは検索エンジンを使って検索した時に表示されるタイトルと同一のものですね。

 

 

では、まとめて例を見てみましょうか。

<!DOCTYPE html>
<html>
 <head>
   <metacharset="UTF-8">
   <metaname="viewport" content="width-device-width">
   <title>かえるファンクラブ入会申し込み</title>
 </head>
 <body>
   <h1>かえるファンクラブ入会申し込み</h1>
   <p>入会するには以下のフォームにご記入ください!</p>   <p>お名前(あだ名でも大丈夫です。): <inputtype="text"name="text-name"placeholder="かえる大好きマン"></p>
   <p>メールアドレス:
<inputtype="email"name="mymail"placeholder="kaeru@uta.com"></p>
   <p>パスワード: <inputtype="password"name="passcode"></p>
   <p><buttontype="submit">登録する</button></p>
 </body>
</html>
はい。これで完成です。
ここまで書いた後のWebページがどうなったか。確認しましょう。
全然一番最初と変わっていませんね。
ただこのようにちゃんとしたHTMLを書くことが重要です。

HTMLの構造をテンプレートとして表示させる方法

先ほどまで、HTMLの構造に関して色々と説明してきましたが、少し面倒だったりするかもしれません。

Visual Studio Codeでは、HTMLの基本的な構造を簡単な操作で表示させることができます。

その方法を説明しますね。

 

まず、アプリケーションを開いたら。

 

名前を付けて保存をクリックします。

 

そして、わかりやすい場所に保存しましょう。

ここまでは1回目でやったコードを書くまでの準備というのと内容は変わりません。

【挑戦企画】大学生のHTML&CSS入門!コードを書く準備

ではコードを書いていくのですが。

 

html:5と書いてEnterキーを押しましょう!

そうすると、、、

 

こんな風にテンプレートとしてHTMLの簡単な構造が出てきました。

先ほど勉強した中にはなかった要素も含まれています。

僕が受けた講義では、6行目のメタタグは消していました。

 

こんな感じで自分で打たなくてもある程度の要素を初めから表示させることができます!

 

お疲れ様でした!今回はこれで終わりです!

次回以降も頑張って学んでいきましょう!

 

 

【挑戦企画】大学生のHTML&CSS入門!CSSの設定をしよう〜4日目だよ〜 どうも!HTMLを勉強しているはらくん(@harakunishere)です! 前回はHTMLで簡単なコードを書いて構造を作...