コーディングの基礎！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は同じものを複数指定することも確認できます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
この記事を監修してくれた方
|
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。
小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
また、TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。
独学に限界を感じている場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
