Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@Kobayashi2019

HTML&CSS超入門1:HTML入門編

More than 1 year has passed since last update.

対象読者

これから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>

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

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

ここで説明するのは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>

そうすると、
HTML&CSS2.PNG

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

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

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

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

そうすると、
HTML&CSS3.PNG
本文に文字が!
これだけでいろいろ書けますが物足りないですね。
まだまだ機能はいっぱいあるので見ていきますよ。

改行

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

これで改行してくれと思うんですが…
HTML&CSS11.PNG
御覧の通り、横並びになってしまいます。
改行するには<br>を使います。

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

これで改行されます。
HTML&CSS12.PNG
ほらこの通り!

見出し

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

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>

そうすると、
HTML&CSS4.PNG
これで簡単に見出しを作ることができます。
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>

そうすると、
HTML&CSS8.PNG
リストを作るにはまず<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>

そうすると、
HTML&CSS6.PNG

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

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>

そうすると、
HTML&CSS5.PNG

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

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

最後に

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

次回CSS入門

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Kobayashi2019
大阪工業大学学部4年、専門はロボットなのにプログラミングしかしない男。
techtrain
プロのエンジニアを目指すU30(30歳以下)の方に現役エンジニアにメンタリングもらえるコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?