前回はCSSをhead内に記述方法をご紹介しました。
今回は記述方法その２としてインラインによるCSSをご紹介します。
この方法はCSSを施したい箇所に直接スタイルを当てるというものになりますので、head内や外部に設置する方法とは若干記述方法が違います。
インラインで使用した場合のhtmlを見てみよう
こちらも説明よりまずは実践です！
以下のHTMLソースをご覧ください。
<p style="color: red;">この文字の色を赤くします。</p>この文字の色を赤くします。
pの中に「style=“color: red;”」という記述をしました。
これで文字色は赤色になります。
文字の色を16進数で表現したい場合は「style=“color: #FF0000;”」となります。
このstyle=“プロパティ : 値 ;”の形でCSSを当てる事が出来ます。
この記述方法はピンポイントでこの部分に直接当てますので、当然その部分にしか反映しません。
CSSを２種類以上当てたい場合
styleを使って複数のCSSを使用したい場合はこの様に書きます。
<p style="color: red; background: black;">この文字の色を赤くして、背景を黒にします。</p>この文字の色を赤くして、背景を黒にします。
「プロパティ：要素； プロパティ：要素；」と追加していく事で、複数の使用が可能になります。
このstyleは「文字色を赤にして、背景色を黒にする」という記述になります。
- color＝文字の色を変える。
- background＝背景の色を変える。
参考動画
まとめ
styleを使う場合は、ピンポイントで部分にCSSを当てる場合に使用します。
ですが、その部分でしか管理もできない為、緊急時以外はあまり利用する事はありません。
CSSコーディングのオススメ本
CSS辞典 第5版 [CSS2/3/4対応]
本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ
予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!
1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
