コーディングの基礎！HTMLでdivタグを使う方法【初心者向け】
デザイン初心者向けにHTMLでdivタグを使う方法について解説しています。divタグはHTMLでコーディングする上で基礎的な内容です。Webサイトを作る上では必須の知識なので、ぜひ書き慣れておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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タグと違いデザインのために利用されるのではなく、文章としてのまとまりを意味するために使用されます。
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は同じものを複数指定することも確認できます。
この記事を監修してくれた方
|
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。
小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
また、TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。
独学に限界を感じている場合はご検討ください。
