HTMLの学習で、div styleというソースコードを目にしたことはありませんか？
では、HTMLのdiv styleとは何なのでしょうか？
今回はHTML div styleについて、HTML初心者でも理解できるように、具体的なHTMLコードを用いてdiv styleを丁寧に解説していきます。
たった５分間この記事を読めば、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とは？５分でわかる事例付き解説
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に、２つ以上styleを指定したい時は、以下のようなソースコードになります。
<div style=”プロパティ1:値1; プロパティ2:値2;”></div>
１つ目のstyleと２つ目のstyleにスペースを空けるときれいなソースコードになります。
以上より、HTML div styleは、外部のCSSをファイルをHTMLファイルに埋め込むことなくCSSを記述するためのものということがお分かり頂けたかと思います。
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞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を２つ適用してみましょう。
文字の色を青色にして、文字の大きさを20pxにしてみましょう。
<div style=”color:blue; font-size:20px;”>
<p>Hello div style!!</p>
</div>
【結果】
Hello div style!!
20pxですので文字が少し大きくなりました。
HTML div styleの使用例（実践編）
ここでは、実践的なdiv styleの使い方を１つ紹介します。
<p>Hello World</p>というコードを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をマスターしてください。
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中