HTMLのdiv styleとは!タグと属性の使い方を解説【メンターが回答】

「HTMLのdiv id、div styleとspan classとspan styleの違いを教えてください。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。それぞれのタグと属性の違いについてぜひ理解しておきましょう。

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

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

HTMLのdiv styleとはだね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

div idとspan classの使い方が分かりません。

これらを入力するとどのように表示されるのか分かりません。

また、div id、div styleとspan classとspan styleの違いを教えてください。

 

メンターからの回答

混乱されるお気持ちお察しします。

前提として「div, span」は「HTML 要素」で、「id, class, style」は「HTML 要素の属性」です。
「div, span」には「id, class」を自由に指定することが可能で、<div id=”my_id”>、<div class=”my_class”> も、<div id=”my_id” class=”my_class”> のように指定することができます。(span に対しても同様です)

おそらくはこれらの使い方に疑問を持っているかと思います。使い方の違い、という面で説明します。

基本的にスタイリングする方法は 2 つの方法があります。

  1. html 要素の style 属性に直接記述する
  2. セレクタを使って html 要素を特定して間接的に記述する

1. の方法は <div style=”color: red”></div> などと1つのあまり使いまわさないスタイリングするときに使用できます。

2. の方法は一般的な方法で、「こういった class, id, html 要素に対してはこのスタイリング」という汎用的なルールを作成する方法です。

場合に応じて使い分けてください。

 

div styleとは

上記でも説明していますが、通常はCSSを適用する場合、CSSファイルを作成し、HTMLに適用する形が多いですが、div styleを使用することでHTMLに直接CSSを適用することができます。

CSSファイルなしでスタイルを指定することができるので、効率は良いでしょう。

 

以上、HTMLのdiv styleとはについて解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

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

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

HTMLのdivやspanタグ、id・style・classの違いについて解説したよ。

大石ゆかり

要素や属性や疑似クラスなど難しいですよね。

田島悠介

実際に色々試してみないと中々覚えられないよね。

 

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

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

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