コーディングの基礎!HTMLでdivタグを使う方法【初心者向け】

デザイン初心者向けにHTMLでdivタグを使う方法について解説しています。divタグはHTMLでコーディングする上で基礎的な内容です。Webサイトを作る上では必須の知識なので、ぜひ書き慣れておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで書くdivタグの使い方を解説しています。

コーディングする上で基礎の基礎にあたるので、HTMLを身につけようと思っている人は必須で覚えておきましょう。Webサイトを作る上では大事な知識になります。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合は、ぜひご覧ください。

よく使われるタグ from TechAcademy on Vimeo.

 

divタグとは

divタグとは、構造上必要なひとかたまりを示します。目的は、divタグで挟んだ文字をひとかたまりのブロックにするものです。そのため、divタグ単体では特に色が変わったり文字の太さが変わったりといった効果を持ちません。

また、divタグは他の要素では適当ではない時に、とりあえず多用することは良くないという建前があります。

しかし、実務上では、どの要素で指定するか困った際はdivタグを多用しています。

divタグにidやclassを付加してCSSでそれらのidやclassに加工することで、そのdivタグ内の色を変えたり文字の特性を変えたりすることができます。

 

Sectionタグとの比較

sectionタグは文書上のひとかたまりを示すと考えるといいかと思います。

sectionタグは、文書としてのまとまりを示すために使われるものです。

文章には 章 節 項というまとまりがあると思います。

この、章 節 項という考え方のように、sectionタグはそれ単体を取り出した場合、意味が通じないことが多いまとまりです。

新聞記事でも、章 節 項だけ切り抜いても記事全体としての意図が通じることは無いと思います。

この様に、sectionタグはdivタグと違いデザインのために利用されるのではなく、文章としてのまとまりを意味するために使用されます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

divタグの書き方

divタグは次のように書きます。

<div>あいうえお</div>

上述の通り、divタグはidやclassを付加することで役立ちます。idやclassの付け方は次のとおりです。

<div id="id名">あいうえお</div>
<div id="class名">あいうえお</div>

ところでidとclassって

ところでidとclassとは一体何でしょうか。idとclassは属性と呼ばれるもので、idはID番号といったもののイメージの通り、同じid名のものはそのページ内で1度しか使えません。

逆に言えば、1度しか使わないものに対してid属性を使います。

 

一方で、class属性は同じページ内に何度でも使うことができます。「この部分とこの部分は同じ色」といった指定をしたい場合には、class属性を使います。

もちろん、1度しか使わない場合でもclass属性は使えます。

 

実際に書いてみよう

それでは実際に書いてみましょう。まずdivタグで囲んだだけの結果を見てみます。

idやclassには、それぞれの名詞の色の名前を指定しています。

以下のソースコードを書いたdiv.htmlを作成し、ブラウザで開いてみます。

div.html
--------------------------------------------
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="red">りんご</div>
    <div class="blue">空</div>
    <div class="yellow">バナナ</div>
    <div class="blue">海</div>
    <div class="yellow">タンポポ</div>
  </body>
</html>
--------------------------------------------

ブラウザで開いた結果は以下のとおりです。

ただ名詞が表示されているだけです。これらをCSSで背景に色をつけてみます。

div.html
--------------------------------------------
<html>
  <head>
    <meta charset="utf-8" />
    <style type="text/css">
      #red {
        background-color: #FF0000;
      }

      .blue {
        background-color: #0000FF;
      }

      .yellow {
        background-color: #FFFF00;
      }
    </style>
  </head>
  <body>
    <div id="red">りんご</div>
    <div class="blue">空</div>
    <div class="yellow">バナナ</div>
    <div class="blue">海</div>
    <div class="yellow">タンポポ</div>
  </body>
</html>
--------------------------------------------

再度、ブラウザで開いてみます。

背景に色がついているのがわかります。classは同じものを複数指定することも確認できます。

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。