HTML入門の手引き：基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】

ウェブサイトを作ってみたいな。

まずは何から勉強したらいいんだろう？

HTML？難しそうだな…

だれか初心者の僕にもわかるように教えてくれないかな？

本記事ではウェブサイトを作ってみたい方向けにHTMLの基礎を解説します。

本記事を読めば基本的な書き方とタグの使い方を理解することができるようになりますので、最後までご一読ください。

少し長い記事で内容のボリュームも多いため、最初から全てを理解するのは難しいかもしれません。

HTMLの練習をしながら、わからないことがあれば本記事を見直す、という動作を繰り返せるよう、HTMLに必要な基礎知識を徹底的に解説していますので、いつでも見直せるようにしておくとプログラミング学習に役立つはずです。ぜひブックマークしていただければ幸いです。

本記事を読むとわかること

HTMLの基礎知識：難しいツールは必要なし。今すぐできるHTMLコードサンプル付き。

HTMLの書き方：ファイルの作り方、構成とコードの意味、よく使うタグを解説。

CSSとの連携：属性とまとまりを作って、CSSで上手にカスタマイズする方法を解説。

上記の内容を、HTML完全初心者にもわかるように丁寧に解説します。

スポンサードサーチ

【キホン情報】HTMLとは？

HTML（エイチティーエムエル）とは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略でして、ウェブサイトの土台を作るための言語です。

HTMLを書くときは、サイトに表示したい文章や情報をタグではさみながら書いていきます。

MEMO

「タグ」= 正式名称：HTMLタグ

「HTMLタグ」とは、その間に挟まれた文字列がHTML文書であることを指定するタグです。タグは「ここからここまではHTMLの記述です」という宣言をする役割を担っています。

と言われても、これからウェブ制作を始めたいという方にとっては正直なんのことか分からないと思うので、本記事でひとつずつ詳しく解説します。

ウェブ制作で避けては通れない部分なので、はじめは少し難しいかもしれませんが、基本情報からじっくり読み進めてみてください。

HTMLはウェブサイトの土台

インターネットに公開されているほぼ全てのウェブサイトはHTMLで土台が作られています。

どんなサイトを作る場合もHTMLの知識なしでは不可能でして、ウェブサイトに掲載されている「文章」も「写真」も全てHTMLで書かれています。

そのため、HTMLを学ばないと、ウェブサイトに文章を書くことも写真を表示することもできません。

HTMLだけではウェブサイトは完成しない

HTMLはあくまでもウェブサイトの土台を書くための言語です。

HTMLのみではウェブサイトの骨組みしか作ることができないので、ウェブ制作では ①HTMLで土台を作り、②CSSで装飾していくというステップが基本です。

HTMLで作った土台にCSSで装飾を加えることで、文字の色を変えたり、背景に模様を加えたりすることが可能になります。

このあたりの流れは「【WEBサイトの仕組みとは】作成から公開までの流れを解説【初心者向け】」にて解説していますので、あわせて読んでいただけると理解が深まると思います。

CSSの詳しいカスタマイズ方法は「CSS入門の手引き：スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】」で、本記事と同じくらいのボリュームでしっかり解説しています。HTMLをひと通り理解したらCSSの学習に進みましょう。

HTMLはこうやって書く

HTMLは下記のようにアルファベットや記号を使うのが基本でして、日本語の文章を表示したい場合もアルファベットで書かれたタグの間に書いていきます。

HTMLのサンプルコード

<!DOCTYPE html>
  <html>
    <head>
      <title>「アラサー男子がアメリカで生き抜けるか」を検証するブログ</title>
    </head>
    <body>
      <h1>HTMLのキホンを学ぼう</h1>
        <p>HTMLを学ぶとWebサイトの土台が作れるようになります。</p>
    </body>
  </html>

たぶん、これだけを見てもわけわからないですよね？

複雑に見えますが、タグの意味をひとつひとつ押さえておくと、全然難しくありません。

本記事の後半で、ぞれぞれのタグの意味も解説しますので安心してください。

ブラウザでHTMLを表示してみよう

実際にHTMLを触ってみると理解も早いので、基本的な勉強をする前に少しだけ触れてみましょう。

ここではHTMLファイルをブラウザで表示する仕組みを理解するために下記の2ツールを使います。

必要なツール

テキストエディタ：Sublime Text（サブライムテキスト）

ブラウザ：Google Chrome（グーグルクローム）

ツールの準備の仕方は「【無料でHTMLとCSSを勉強する】学習に必要なツールを揃えよう【2つだけ】」の記事内で解説していますのでこちらからご確認ください。

【3ステップだけ】HTMLのブラウザ表示を試してみよう

ツールの準備ができたら、さっそく練習です。

HTMLの練習は、3つの手順で簡単に試すことができます。

①：コードをSublime Textにコピペ

まずは下記のコードをコピーして、Sublime Textに貼り付けます。

HTMLのサンプルコード

<!DOCTYPE html>
  <html>
    <head>
      <title>「アラサー男子がアメリカで生き抜けるか」を検証するブログ</title>
    </head>
    <body>
      <h1>HTMLのキホンを学ぼう</h1>
        <p>HTMLを学ぶとWebサイトの土台が作れるようになります。</p>
    </body>
  </html>

②：ファイルの拡張子を「.html」で保存

Sublime Textにコピペしたファイルを保存します。このとき、拡張子を「.html」にしてください。

③：Google Chromeにドラッグ

Google Chromeを開いて、保存したHTMLファイルをドラッグすると <head> などのタグが消え、タグで囲まれた文字列だけが指定された形で表示されているはずです。

このように、HTMLで書いたコードをブラウザ上にドラッグするだけで、実際にどう見えるかがわかるので、最初のうちはサーバーなどの契約をしなくても練習することができます。

アラサー男子 in L.A.

HTMLファイル内の文字列を書き換えたりして、何パターンかを練習してみてください。

ここはまだ基礎中の基礎ですが、まずはなんとなく感覚を掴むことが大切です。

スポンサードサーチ

HTMLの基本的な書き方

HTMLがどのようにウェブブラウザで表示されるかのコツをつかんだら、次はゼロから自分でコードを書いてみましょう。

ここからはHTMLの書き方のキホンを解説します。現時点で全て覚える必要はないので、流し見しながら必要な箇所をピックアップしながら読み進めてください。

アラサー男子 in L.A.

HTMLを自分で書けるようになっても「こういう骨組みにしたいな」というときは、ググりながら新しい情報を探します。

ウェブデザイナーやプログラマーもコード全てを暗記しているわけではありません。

なので、はじめから全部を暗記しようとしなくてOKです。

そこは安心して、できるところから覚える。わからなかったら本記事を見直す。を繰り返して少しずつできることを増やしていきましょう。

HTMLキホンの書き方 ①：タグで囲む

さきほどコピペしたHTMLのサンプルコードを開いてみてください。すると、 <〇〇>〜〜〜</〇〇> というカッコ書きが多用されていますよね。

この <〇〇> や </〇〇> を「HTMLタグ」と呼びます。

HTMLを書くときは、このように <タグ名> と </タグ名> で文章や画像などをはさむのが基本でして、タグはそれぞれ「開始タグ」と「終了タグ」と呼ばます。

タグには様々な種類があり、それぞれのタグに応じて、タグの中身がブラウザ上でどのように表示されるかが決まります。

つまり、タグの役割とはタグの中身がブラウザ表示されたときにどう見えるかを指定するということですね。

また、開始タグから終了タグまでのひとつのカタマリを「要素」と呼びます。

HTMLはこのようにタグで囲まれた要素のカタマリで構成されています。

ここで、さきほどのサンプルコードをもう一度よくみてみましょう。

<h1> と </h1> で囲まれた「HTMLのキホンを学ぼう」と、 <p> と </p> で囲まれた「HTMLを学ぶとWebサイトの土台が作れるようになります。」がありますね。

さきほどGoogle Chromeで表示した時に文字の大きさが違って見えたのは、それぞれのタグが違うからでして、<h1タグ> は「大見出し」を、 <pタグ> は「段落」を表しています。

このようにHTMLはタグを使いつつ、文字や画像に役割を割りあてながら書いていきます。

タグを使って、ひとつひとつに役割を割りあてることで、読者にとって見やすく、Googleにとっても内容を認識しやすいウェブサイトを作ることができる仕組みです。

HTMLキホンの書き方 ②：タグの中に別のタグを書く

HTMLではタグの中に別のタグを書くことがあります。

タグの中に別のタグを書くことを「入れ子構造」と呼びまして、タグの種類によって入れ子構造にしてOK、NGというルールがありますが、今は「入れ子構造がある」ということだけを頭に入れておいておくだけで大丈夫です。

このあたりは、書いていくうちにルールがわかるようになります。

現段階でとりあえず情報を入れておきたいという方は、 <htmlタグ> 、 <headタグ> と <bodyタグ> は入れ子構造にしてOK。<hタグ> と <pタグ> はNGと覚えておきましょう。

HTMLキホンの書き方 ③：タグの中には「属性」も書く

開始タグには「属性」を書くこともあります。

この「属性」は、タグにプラスアルファの情報を示すときに使います。

例えば <aタグ> は要素をリンク化するタグですが、この場合、<a href="リンク先URL">ほにゃらら、ほにゃらら</a> のように開始タグのなかにリンク先のURLを記載します。

これが「属性」です。これにより、ブラウザ表示されたときに「ほにゃらら、ほにゃらら」という文字をクリックすると指定したURLへジャンプする仕組みを作ることができます。

aタグを使ってリンクを書いてみよう

サンプルとして、僕のブログトップにジャンプするリンクを作ってみましたので、下記のコードをSublime Textにコピペしてhtmlファイルをブラウザで開いてみてください。

aタグのサンプルコード

<!DOCTYPE html>
  <html>
    <head>
      <title>「アラサー男子がアメリカで生き抜けるか」を検証するブログ</title>
    </head>
    <body>
      <h1>aタグはこうやって書きます</h1>
        <a href="https://ksonoda.com">ここをクリックすると僕のブログトップに飛びます。</a>
    </body>
  </html>

【HTMLでよく使うタグ】まずは7つ覚えよう

HTMLの基本的な書き方を理解したら、よく使うタグを覚えておきましょう。

HTMLでよく使うタグ一覧：bodyタグ内に使う

① pタグ <p>〜〜</p>：段落を作る

② hタグ <h1>〜〜</h>：見出しを作る（h1からh6）

③ aタグ <a href=”リンク先URL”>〜〜</a>：リンクを作る

④ imgタグ <img>：画像を貼る

⑤ ul / ol / liタグ：箇条書きを作る

⑥ brタグ：改行する

⑦ コメントアウト <! — メモ –>：ブラウザには表示させないメモを残す

とりあえずは、上記7つを覚えておけば大丈夫です。ひとつずつ解説するので順番に意味を理解していってください。

① pタグ <p>〜〜</p>：段落を作る

HTMLで最もよく使うタグがこの <pタグ> です。

Paragraph（パラグラフ）、つまり段落を表すタグでして、本文を書くときは必ずこの <pタグ> で囲みます。

<pタグ> を使うと、ひとつの要素がひとつの段落になります。下記の通り。

pタグの使い方

<p>ここに文章を書きます。</p>
<p>ひとつの<pタグ>で囲まれた要素がひとつの段落。</p>
<p>このサンプルコードは3つ<pタグ>で構成されていますね。つまり、3段落で構成されているということです。</P>

<pタグ> で囲んだ方がいいもの

<pタグ> は段落を作る時に使うものです。

これから解説しますが、基本的に <hタグ> 以外は全て <pタグ> で囲むことできれいなHTMLを書くことができます。

② hタグ <h1>〜〜</h>：見出しを作る（h1からh6）

<hタグ> は見出しを作る時に使います。

<h1> から <h6> までの6つの大きさで見出しを作ることが可能でして、記事のタイトル見出しを <h1タグ> 、各段落の見出しを <h2タグ> 、さらに細かい段落分けを <h3> 〜 <h6> で作っていくのが一般的です。

見出しに関しては「【hタグのSEO効果】見出しタグの有効な使い方【h1 h2 h3の順番は大事なの？】」の記事で詳しく解説しています。

③ aタグ <a href=”リンク先URL”>〜〜</a>：リンクを作る

<aタグ> は属性の解説でも少し触れましたね。

リンクを作るときは、<a href="リンク先URL">ほにゃらら、ほにゃらら</a> のように <a href="リンク先URL"> の開始タグと </a> の終了タグで囲みます。

また、<aタグ> で囲むのは文字だけでなくてもOKです。画像もリンク化できるので、下記のサンプルコードを参照してください。

aタグ（画像をリンク化）のサンプルコード

<!DOCTYPE html>
  <html>
    <head>
      <title>「アラサー男子がアメリカで生き抜けるか」を検証するブログ</title>
    </head>
    <body>
      <h1>aタグで画像のリンク化をするとこうなります</h1>
        <p>
          <a href="https://ksonoda.com"><img src="https://ksonoda.com/wp-content/uploads/2020/03/アラサー男子-in-LA-.png" alt="アラサー男子 in L.A." /></a>
        </p>
     </body>
  </html>

画像をリンク化するとこうなります

上記のコードを表示すると画像をリンク化させることができます。

僕の顔をクリックするとブログトップページにジャンプしますよ。

<img タグ> の書き方は次の項目で解説します。

④ imgタグ <img>：画像を貼る

HTMLでは <imgタグ> を使うことで画像を貼り付けることができます。

なお、 <imgタグ> は少しだけ特殊でして、使うときの注意点が3つほどあります。

<imgタグ> 3つの注意点

その①：終了タグを使わない

その②：JPG / PNG / GIF 以外は貼り付けられない

その③：タグ内に属性を書ける

上記の通り。他のタグとは少し違うのでしっかり理解しておくことが大切です。

こちらもひとつずつ解説するのでなんとなく頭に入れておいてください。

① 終了タグを使わない

通常、HTMLでタグを使うときは、開始タグと終了タグで挟むのが鉄則というのは前述の通りです。

ですが、 <imgタグ> では終了タグを使いません。

② JPG / PNG / GIF 以外は貼り付けられない

<imgタグ> で貼り付けられるのは、JPGとPNG、GIFの画像形式ファイルのみです。
（※SVGも貼り付け可能ですが、ブログではあまり使わないので割愛します。）

PDFや動画ファイルを貼ることはできないので注意しましょう。

③ タグ内に属性を書ける

<imgタグ> の中にも属性を書くことができます。その代表が代替テキストですね。

imgタグのサンプルコード

<img src="画像URL.jpg" alt="代替テキスト" />

こんな感じでして、src=" " の中には画像のファイル名と保存場所を書き、その後ろにある alt=" " の中には代替テキストを書きます。

代替テキストとは、画像がうまく読み込まれない時に表示される文章のことでして、画像を認識してくれないクローラーに「この画像はこういう意味ですよ」という画像の内容を伝えるためにも重要な属性要素になります。

この辺りも、現段階では少しむずかしい話なので、「ふーん。そうなんだ。」という感じで頭に入れておいてもらえればOKです。

<imgタグ> を閉じる時はスラッシュを書いて終了します。スラッシュは終了タグを使わない時に「これでタグは終わりだよ」というのを示すためのものだと覚えておいてください。

ということで、<imgタグ> を使うときは、①画像のURL、②alt属性（代替テキスト）、③スラッシュ の順番で書くと覚えておけば大丈夫です。

⑤ ul / ol / liタグ：箇条書きを作る

HTMLのタグには箇条書き用のコードも用意されています。

箇条書きコードは目的に合わせてセットで使う

箇条書き用のコードは下記のタグをセットを、それぞれの目的で使います。

その①：<ul> と <li> のセット　→　ポッチの箇条書き

その②：<ol> と <li> のセット　→　数番号の箇条書き

<ul> と <li> のセットでポッチの箇条書きを作る

ポッチ（・　←これ）の箇条書きを作りたいときは <ul> と <li> で作ります。コードは下記を参照してください。

ポッチの箇条書き

<ul>
  <li>ひとつめの箇条書きコンテンツ</li>
  <li>ふたつめの箇条書きコンテンツ</li>
  <li>みっつめの箇条書きコンテンツ</li>
</ul>

このコードで書くと、下記のように表示されます。

ポッチの箇条書き

ひとつめの箇条書きコンテンツ
ふたつめの箇条書きコンテンツ
みっつめの箇条書きコンテンツ

<ol> と <li> のセットで数番号の箇条書きを作る

ポッチの代わりに、数字の番号が振られた箇条書きを作ることもできます。（下記参照）

数番号の箇条書き

<ol>
  <li>ひとつめの箇条書きコンテンツ</li>
  <li>ふたつめの箇条書きコンテンツ</li>
  <li>みっつめの箇条書きコンテンツ</li>
</ol>

このコードで書くと、下記のように表示されます。

数番号の箇条書き

ひとつめの箇条書きコンテンツ
ふたつめの箇条書きコンテンツ
みっつめの箇条書きコンテンツ

箇条書きの数を増やしたいときは、<li>〜</li> の数を増やしましょう。簡単ですね。

⑥ brタグ：改行する

続いては文章を改行させたい場合です。

HTMLのコード内でEnterを押すとコード上は改行されますが、ブラウザ上の見た目は改行されません。

ブラウザ表示で改行させたいときには、<brタグ> を使用する必要があります。

<br> にも終了タグを使わず、それだけで使用します。

なお、<pタグ> を使用するときは、その前後に自動的に改行が入ります。

できたら、改行するポイントを <pタグ> で閉じることが理想ですが、 <pタグ> 内で「どうしてもここで改行したい」というときに使うのは、この <brタグ> を使って開業しましょう。

<brタグ>の使い方

<p>文章を書きつつ、どうしても改行したい場合、<br> ←ここに <brタグ> を挿入します。</p>

このようなコードを書くと、ブラウザでは下記のように表示されます。

文章を書きつつ、どうしても改行したい場合、
←ここに <brタグ> を挿入します。

<br> を入れた位置（「〜〜〜場合、」と「←ここに〜〜〜」の間）で改行されていますね。

とはいえ、<brタグ> を使いすぎると、様々なサイズのスクリーンで見た時に、違和感のある位置に改行が入ってしまうので、できる限り <brタグ> を使わない上手な書き方を身に付けたましょう。その方が、読みやすいウェブ文章を書けるようになり、結果としてサイトを訪れた読者の満足度向上にもつながります。

⑦ コメントアウト <! — メモ –>：メモを残す

ここまでに6つのHTMLタグを解説しました。

情報が多くて大変かもしれませんが、タグ解説はこれが最後になります。

最後はHTML編集に役立つメモ的なタグです。

HTMLのコードでは、ブラウザに表示させないメモを残すことができます。

これを専門用語でコメントアウトと呼ぶのですが、自分用にノートを記しておきたいときに便利な機能でして、コードが長くなると、どこに何を書いたのかを見つけにくくなる時があるので、コメントアウトを使って、後から編集しやすいように印をつけておきましょう。

コメントアウトは下記のように使います。

コメントアウトの使い方

<h1>これはコメントアウトのサンプルです。</h1>
<! --ここから上はタイトル・下が段落 -->
  <p>文章が長くなったり、いろんなコードを書いていくと、どこに何が書かれているかを見つけづらくなるので、コメントアウトを上手に使いましょう。</p>
<! --ここから先が第二段落-->
  <p>これが第二段落です。この上に書いたこコメントアウトはブラウザで表示されません。すきなように書いてOKです。</p>

メモを残したいところに <! --ここにメモを残す--> を挿入するだけ。簡単ですよね。

コメントアウトせず長いコードを書くと、ぜったい後悔するので、早いうちからコメントアウトする癖をつけておいた方がいいと思います。

以上で、とりあえずタグの勉強は終わりです。お疲れ様でした。
（本記事はまだまだ続きます(￣▽￣)…）

スポンサードサーチ

HTMLの基本構造：構造を覚えると内容を理解できます

HTMLの書き方をひと通り覚えたら、基本構造を理解しておきましょう。

基本構造がわかると、コードを見ただけで内容も理解できるようになります。

ここまでに解説した要素を入れたサンプルコードを用意したので、下記を見ながら進めてください。

HTML基本構造を理解しよう

<!DOCTYPE html>
  <html>
    <head>
      <title>「アラサー男子がアメリカで生き抜けるか」を検証するブログ</title>
    </head>
    <body>
      <h1>HTMLのキホンを学ぼう</h1>
        <p>HTMLを学ぶとWebサイトの土台が<br>作れるようになります。</p>
　　　　<p>
<! --この下画像リンク -->
          <a href="https://ksonoda.com"><img src="https://ksonoda.com/wp-content/uploads/2020/03/アラサー男子-in-LA-.png" alt="アラサー男子 in L.A." /></a>
        </p>
　　　　<p>
           <ol>
             <li>HTMLの基礎知識を学びました</li>
             <li>HTMLの基本的な書き方とよく使うタグも学びました</li>
             <li>ここからは、HTMLの構造を勉強します</li>
           </ol>
        </p>
    </body>
  </html>

HTMLの基本構造

HTMLの基本構造で覚えておくべきポイントは下記の5つのみです。

① 最初に宣言を書く：<!DOCTYPE html>

② htmlタグで全体をはさむ：<html>〜〜〜〜</html>

③ headにページ情報を書く：<head>〜〜〜〜</head>

④ titleにサーチエンジン向け情報を書く：<title>〜〜〜〜</title>

⑤ bodyには画面に表示させたい要素を書く：<body>〜〜〜〜</body>

ひとつずつ詳しく解説します。

HTMLの基本構造①：最初に宣言を書く

ファイルの先頭には <!DOCTYPE html> という表記で、「このファイルはHTMLですよ」という宣言をします。

ファイルの先頭に『宣言』を書く

<!DOCTYPE html>

HTMLは改訂が繰り返されていまして、最新のHTMLはバージョン5になります。ファイルの先頭に書く宣言はバージョンに応じて表記が異なりますが、これからHTMLをはじめる人は、HTML5向けの <!DOCTYPE html> を書いておけば間違いありません。

HTMLを書くときは、決まり文句だと思って、何も考えずにこの宣言を書けばOKです。

HTMLの基本構造②：htmlタグで全体をはさむ

HTMLファイルの宣言をしたら、<html> のタグで開始します。

『HTMLコードです』を伝える

<html>〜〜〜〜</html>

これは「ここから、ここまでがHTMLコードです」ということを表しているので、基本的にはこの <htmlタグ> 内に必要な情報全てを書いていくことになります。

HTMLの基本構造③：headにページ情報を書く

<headタグ> の中は、そのページの情報を書きます。「フォントの種類」や「CSS」などがその例です。

<head>内にはページ情報を書く

<head>
　　・フォント情報
　　・CSSなど読み込みファイルの指定
　　・サイト解析コード、文字コードなど
</head>

HTMLファイルをブラウザ表示させたときに、どのようなカスタマイズにしたいかを記すことにより、白黒で単調なページをデザインすることが可能になります。

なお、<headタグ> に書いた情報はブラウザ上に表示されません。あくまでもそのページの情報を書く場所だと覚えておきましょう。

HTMLの基本構造④：titleに検索エンジン向け情報を書く

<headタグ> 内に書かれた <titleタグ> には検索エンジン向けの情報を書きます。

ここに書かれた情報がブラウザ表示されたときの様々な箇所に表示される仕組みでして、一例を挙げると下記の通りです。

<titleタグ> の情報が表示される場所

・ブラウザタブ

・検索ページのタイトル

HTMLの基本構造⑤：bodyには画面に表示させたい要素を書く

HTMLファイルをブラウザ表示したときに表示されるのは、<body> と </body> で挟まれた部分のみです。

先ほど解説した様々なタグも、全てはこの <bodyタグ> 内に記載するのがルールでして、基本的に1ページにひとつの <bodyタグ> が使われています。

スポンサードサーチ

【属性を理解する】class と id とは

本記事の序盤と<imgタグ> の解説で少し触れましたが、HTMLには「属性」を書くことができます。

属性を上手に使えるようになると、その部分のデザインだけを好きなように変えることができるので、使い方を理解しましょう。

HTMLで使用できる「属性」は2つ。class と id です。

「class / idを書く」とは「タグを管理する」こと

class と id は、タグに管理名をつける役割をします。

<h2 class="in red"> や <p id ="in blue"> など、どんなタグにでも好きなように管理名をつけることができ、CSSと紐づけることで、その管理番号の部分のみをまとめてカスタマイズすることが可能になります。

ここがポイント：CSSとの紐付けに使う

属性を使うときのイメージとしては、①HTMLで各タグに属性を割り振る、②CSSで属性をカスタマイズする。このような流れです。

属性に関してはCSSの講座で詳しく解説するので、まず大まかな意味として、上記を覚えてもらえればOKです。

なお、class も id も、英数字のみが使用可能なので、わかりやすいからといって日本語で名前をつけてはいけません。また、最初の文字は必ずアルファベットである必要があります。数字から始まる属性名もエラーの原因になるのでNGです。

NGな書き方

<p class="いろはにほへと">

このように ” ” の中に日本語を書くのはNGです。

classとidの使い分け

class と id は下記のように使い分けます。

ここが違う：class と id の使い方とルール

class：ひとつのHTMLファイル内で、同じclass名を何回も使うことができる

id：ひとつのHTMLファイル内で、同じid名は一度しか使えない

たとえば、<p id="abc"> というid名を使ったら、同じHTMLファイル内では <h2 id="abc"> は使えません。

ところが、classは何度でも使えるので、<p class="abc"> と <h2 class="abc"> をふたつ同時に使うことができます。

また、CSSでカスタマイズするスタイルの適用には優先順位があります。idはclassよりも優先されるので、ケースバイケースでどちらを使った方が良いかを考えながら書く必要があります。

質問してる人

ん？

それなら、id なんて使わないで、何回も使える class だけを使った方がいいんじゃない？

確かにそう思いますよね。

でも、class と id は、しっかり使い分ける必要があります。

このあたりの使い分けは、HTMLとCSSを使ってウェブサイトを作っていくうちに、すこしずつ理解できるようになります。

慣れれば「ここはclassで」「ここはidで」というふうに判断できるようになるので、とりあえず今は「属性」という概念を覚えておいてください。

アラサー男子 in L.A.

“まとまり” を作る：div と span

HTMLには、まとまりを作る <div> と <span> というコードが存在します。

<div>の使い方

<div class="a">
   <h1>これがdivの使い方です</h1>
　 <p>divを使うとまとまりを作ることができます。</p>
</div>
<div class="b">
   <h2>divを使っても、そのままだと見た目は変わりません</h2>
   <p>見た目に変化はありませんが、この"まとまり"がカスタマイズに役立ちます。</p>
</div>

上記のサンプルコードでは、「クラス名a」と「クラス名b」という2つのまとまりができています。

このように <div class="a"> と <div class="b"> を使ってまとまりを作ることで、CSSでカスタマイズした時に、 <div class="a"> の方は背景を青く、白文字で、 <div class="b"> の方は背景を黄色、黒字で、などといったようにまとめてカスタマイズができるようになります。

ここも予備知識として頭に入れておいてください。

div と spanの違いは？

<div> も <span> も「まとまりを作る」という点は同じですが、大きな違いがあります。

<div> で作ったまとまりは前後が改行されるのに対し、<span> で作ったまとまりは改行が入りません。

<div>は改行が入る

<p>divで作ったまとまりは、<div>前後に改行</div>が入ります。</p>

上記のコードをブラウザ表示すると下記のようになります。

divで作ったまとまりは、

前後に改行

が入ります。

<span>は改行が入らない

<p>spanで作ったまとまりは、<span>前後に改行</span>が入りません。</p>

上記のコードをブラウザ表示すると下記のようになります。

divで作ったまとまりは、前後に改行が入ります。

上記の通りでして、<span> のように前後の改行が入らないタグをインライン要素、<div> のように前後に改行の入るタグをブロック要素と呼びます。

文章内で改行をせず、一部だけの文字を変えたいときなどは <span> を使うと覚えておくと便利です。

スポンサードサーチ

【まとめ】とりあえずやってみよう

本記事は以上になります。

かなりボリュームのある内容だったと思いますが、いきなり全部を覚えなくてもOKです。（重要なことなので何度も言います…笑）

HTMLの学習に必要なツールは「Google Chrome」と「Sublime Text」のみ（両方とも無料）です。まずは本記事の内容を参考にHTMLを触ってみましょう。
> 参考記事：【無料でHTMLとCSSを勉強する】学習に必要なツールを揃えよう【2つだけ】

実際に触ってみて、少しずつ感覚をつかむところから始めましょう。

HTMLのコツを掴んだら、CSSでカスタマイズに挑戦してみましょう。CSSの詳しい解説はこちらの記事をどうぞ。

本記事と同じくらいのボリュームで、ゼロからでもCSSがわかるように解説しています。

CSSの基礎から書き方までを学べる記事

CSS入門の手引き：スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】

2020年5月13日CSS入門の手引き：スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】

また、自分でHTMLを触ってみて興味が湧いたら、プログラミングスクールで本格的に学ぶという手もあるので、「ウェブデザインって楽しそうだな」と感じたら、無料相談に申し込んでみてもいいと思います。

プログラミングを学ぶなら

CSSを学ぶなら、CODEGYM Monthly｜コーチング主体のプログラミングスクールがおすすめです。

個別の目標達成に特化したプログラミング学習教室なので、講師の現役エンジニアと相談し目標を設定して、自分専用の学習ロードマップを組むことができます。

相談は無料なので、これからCSSを勉強したい人は、今すぐ行動しましょう。

CODEGYMで個別のカリキュラムに沿って学習すれば、自分の目的に合わせた効果的な勉強ができるはずです。

おわり。