photo
photo
  1. トップ
  2. Webデザイン
  3. HTML div styleとは?HTML初心者でも5分でわかる事例解説

HTML div styleとは?HTML初心者でも5分でわかる事例解説

HTMLの学習で、div styleというソースコードを目にしたことはありませんか?

では、HTMLのdiv styleとは何なのでしょうか?

今回はHTML div styleについて、HTML初心者でも理解できるように、具体的なHTMLコードを用いてdiv styleを丁寧に解説していきます。

たった5分間この記事を読めば、HTML div styleについての知識が身に付き、HTML div styleの使い方を完璧に理解できるでしょう。

ぜひ最後まで読んでHTML div styleをマスターして下さい。

HTML div styleとは?

ここでは、HTML div styleの全体像を理解して頂くため、HTML div styleとは何かについて丁寧に解説していきます。

HTML div styleとは、簡潔に言うと、外部のCSSファイルを、HTMLファイルに埋め込むことなくCSSを記述するためのものです。

このことを、divとstyleを別々に考えて詳しく解説します。

※divについては過去に詳しく解説した以下の記事があるので本記事では割愛させて頂きます。以下を参考にしてください。

HTMLのdiv classとは?5分でわかる事例付き解説

styleについて

では、HTML div styleのstyleについて解説していきます。

例えば、WEBページをHTML/CSSを使って制作していくことを考えてみます。

一般的には、CSSファイル(スタイルシート)をHTMLファイルに埋め込むという過程を通じてHTMLにCSSを適用していました。

HTMLファイルの<head></head>に記述する以下のソースコードですね。

※HTMLについてまだ理解できていない人は、HTMLとは?これを読めば初心者でも必ずHTMLが書ける!をご覧ください。

<link rel=”stylesheet” href=”hogehoge.css”>

しかし、div styleを使えば、CSSファイルをHTMLファイルに埋め込むことなくCSSを適用できるのです。

以下がdiv styleの書き方です。

※ここからはCSSの知識が必要です。CSSについては、CSSとは?これを読めば初心者でも必ずCSSが書ける!をご覧ください。

<div style=”プロパティ:値;”></div>

div styleに、2つ以上styleを指定したい時は、以下のようなソースコードになります。

<div style=”プロパティ1:値1;  プロパティ2:値2;”></div>

1つ目のstyleと2つ目のstyleにスペースを空けるときれいなソースコードになります。

以上より、HTML div styleは、外部のCSSをファイルをHTMLファイルに埋め込むことなくCSSを記述するためのものということがお分かり頂けたかと思います。

 

HTML div styleの使用例(基礎編)

ここでは、上記で学習したHTML div styleをもとに簡単なソースコードを書いてみます。

<p>Hello div style!!</p>

というHTMLコードを、div styleを使って文字の色を緑色にしてみましょう。

上記に基づくと、以下のようになりますね。

<div style=”color:green;”>

<p>Hello div style!!</p>

</div>

【結果】

Hello div style!!

では、次はstyleを2つ適用してみましょう。

文字の色を青色にして、文字の大きさを20pxにしてみましょう。

<div style=”color:blue;  font-size:20px;”>

<p>Hello div style!!</p>

</div>

【結果】

Hello div style!!

20pxですので文字が少し大きくなりました。

 

HTML div styleの使用例(実践編)

ここでは、実践的なdiv styleの使い方を1つ紹介します。

<p>Hello World</p>というコードをdiv styleで以下のようにしてみましょう。

[ 完成イメージ図 ]

HTML div style具体例イメージ画像

 

 

 

 

 

※背景色は#90ddb4とする。

イメージ図より、

文字の色は青色・背景色は#90ddb4・paddingは30pxということがわかります。

これをdiv styleで記述すると、

<div style=”color:blue; background-color:#90ddb4; padding:30px; display:inline-block;”>

<p>Hello World</p>

</div>

となりますね。

display:inline-block;を使うと、background-colorの幅を調整することができます。CSSでは頻繁に使うので覚えておきましょう。

いかがでしたか?

今回でHTML div styleについて深く理解できたのではないでしょうか。

HTML div styleは、CSSファイルなしでCSSを適用できるので便利です。ぜひこれを機にHTML div styleをマスターしてください。

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。

イラレの基本~実践的なテクニックを学ぶ

【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?

Photoshopの技術を身につける

最新Photoshop CC 23時間の動画と演習でPhotoshopの全てを完全マスター 初心者がプロを目指すコース
最新Photoshop CC 23時間の動画と演習でPhotoshopの全てを完全マスター 初心者がプロを目指すコース

初心者レベルの方でもWEB、出版などのデザイナーとしてスタートできるスキルを持つことができます。

動画編集をマスターしよう!

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。