対象読者

これからHTML、CSSを学ぶ人

初めに

ProgateのHTML&CSSレッスン初級編を終了したので復習のために内容をまとめてみました。
初心者なので間違い等あれば是非ご指摘ください。

今回勉強に用いたのはProgate、無料で始められるプログラミング学習サイトです。
難易度は低く、初学者に優しいサイトでした。
今まで知らずにいたのがもったいない…

環境構築

この記事を流し読みするだけでおおよそのイメージはつきますが、
実際に自分で手を動かして学習したいなら環境構築が必要です。
環境構築のやり方については次の記事を参考にしてください。
すごくわかりやすくまとまっています。
Windowsの環境構築(Progate)
Macの環境構築(Progate)
この記事も上と同じ環境で実行しています。

HTML

HTMLの基本

今回はHTMLとCSSを用いてサイトを作成しました。
index.htmlというファイルがトップページになるらしいのでそうしておきます。
次のような状態から少しずつ書き加えサイトを作っていきます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
  </head>
  <body>
    <!--ここにページの本文を書きます-->
  </body>
</html>

カッコがいっぱいある…見づらい。
この状態だとページはまっさらです。

なんのこっちゃ分からないと思いますが一つずつ見ていきましょう。

ここで説明するのはheadとbodyの部分です。

という文字がありますね。

これはコメントといいます。
HTMLでは分の中に書いたものを素直に全部表示してしまうので、
「表示しなくていいよ！」というところはコメントで書いておきます。
メモ書きによく使われます。

タイトルと本文

index.html

<head>
  <!--ここにページの情報を書きます-->
</head>

この部分に注目しましょう。
<head>と</head>、何が違うのか？
実はこれセットで使うものです。
<head>は「ここからページの情報を書きますよ！」
</head>は「ここまでがページの情報ですよ！」
という意味です。
それぞれ開始タグ、終了タグと呼びます。
この書き方はHTMLでは何度も何度も使うので絶対に覚えておくべきところ。
ページの情報として何を書くのかといえば代表的なものはページのタイトルです。
ページのタイトルというのはこのページで言えば「HTML&CSS超入門1:HTML入門編」を指します。
ブラウザのタブに書いてある文字のことですね。
次のように書いてみます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
  </body>
</html>

そうすると、

タブのところの文字が変わったのがわかりますか？

index.html

<body>
  <!--ここにページの本文を書きます-->
</body>

次はこっちを見てみましょう。
さっきと同じように考えればいいでしょう。
<body>は「ここから本文を書きますよ！」
</body>は「ここまでが本文ですよ！」
という意味です。
bodyは本文を意味します。
今書かれているこの文章もbodyの中に書いてあります。
作るページの種類にもよりますが、一番長々と書かれるところです。
実際に書いてみます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    Hello World
  </body>
</html>

そうすると、

本文に文字が！
これだけでいろいろ書けますが物足りないですね。
まだまだ機能はいっぱいあるので見ていきますよ。

改行

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    Qiita最高！
    Progate最高！
  </body>
</html>

これで改行してくれと思うんですが…

御覧の通り、横並びになってしまいます。
改行するには<br>を使います。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    Qiita最高！<br>
    Progate最高！
  </body>
</html>

これで改行されます。

ほらこの通り！

見出し

長い文章を書くときに必須なのが見出しです。
見出しがなければ見づらくてしょうがない。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <h1>h1の見出し</h1>
    <h2>h2の見出し</h2>
    <h3>h3の見出し</h3>
    <h4>h4の見出し</h4>
    <h5>h5の見出し</h5>
    <h6>h6の見出し</h6>
  </body>
</html>

そうすると、

これで簡単に見出しを作ることができます。
h1が最も大きく、h6が最も小さくなっています。

リスト

見出しのほかにもリストを作ることができます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <ul>
      <li>Google</li>
      <li>Apple</li>
      <li>Facebook</li>
      <li>Amazon</li>
    </ul>
  </body>
</html>

そうすると、

リストを作るにはまず<ul>要素を作り、その中に<li>要素を作ります。

index.html

<ul>
    <li>Google</li>
    <li>Apple</li>
    <li>Facebook</li>
    <li>Amazon</li>
</ul>

ここまで読んで気づいた方もいるかもしれませんが、
<>のような要素の中にさらに要素を入れるときは**インデント(字下げ)**をします。
Tabキーを用いるかスペースキーを何回か押すことでインデントをすることになります。

サイトのリンク

今度はサイトへのリンクを貼る方法です。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <a href="https://qiita.com/">Qiitaへのリンク</a>
  </body>
</html>

そうすると、

このような画面が現れ、リンクをクリックするとQiitaのページへ飛びます。

index.html

<a href="https://qiita.com/">Qiitaへのリンク</a>

<a>要素を使ってリンクを作成できます。
hrefのように開始タグに入れるものは属性と呼ばれます。
""の中にurlを書くことでリンクでどこのサイトに飛ぶかを指定できます。

画像の表示

文字ばかりでは寂しいので画像も入れてみましょう。

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--ここにページの情報を書きます-->
    <title>ページのタイトル</title>
  </head>
  <body>
    <!--ここにページの本文を書きます-->
    <img src="https://japaclip.com/files/internet-flaming-laptop.png">
  </body>
</html>

そうすると、

index.html

<img src="https://japaclip.com/files/internet-flaming-laptop.png">

今回も属性を追加していますね。リンクを作成するときはhrefでしたが今回はsrcです。
これも""の中に画像のurlを指定することで画像を表示できます。

最後に

ここまでHTMLの書き方をお見せしました。
主に文字を書いたり、画像を入れたりなど画面の要素を作っていくことが中心でした。
しかし、HTMLだけでサイトを作るとデザインが20年前のサイトみたいになります。
もっとサイトを見やすく作るためにCSSも学んでいきましょう！

次回CSS入門