直接CSSを書き込む方法
本日の教材動画はこちら
CSSについて勉強した際、CSSの書き方は3種類あることがわかりました。今回はその中の1つ目の方法「(style属性を利用して)直接タグの中にCSSを書く方法についてみていきたいと思います。
<style属性>をタグの中に使う
直接CSSを書き込むには、タグ内にstyle属性を追加する必要があります。使い方は利用したいタグ内に style="CSSの指定" を記載します。
また、下記の理由でhead内に一言CSSを使いますよ!という一文を記載したほうがいいようです。
文書内で使用されるスタイルシートがCSSによるものであることをブラウザなどに知らせるために、 <head>要素内に<meta>要素を記述してスタイル言語の値にtext/cssを指定します。多くの場合、この指定をしなくてもブラウザによって自動的に判断されますが、誤動作を避けるためにも記述したほうが良いでしょう。
<CSSの指定>の仕方
CSSを書くには「どこに」「なにを」「どうするか」の指定が必要であることは勉強しましたね。今回直接指定したい箇所に書き込むため、「どこに」は不要となり、残りの「なにを」「どうするか」の指定が必要になります。
なので直接CSSを書く場合の書き方は「style="プロパティ値:値;"」となります。例えばh1の文章を青色にしたい場合は、<h1 style="color: blue;">〇〇〇</1>と書けばOKです。
メリットとデメリット
直接CSSを書く方法は、部分的にスタイルを優先指定する際などに便利です。(シンプルかつ、適応も優先されるため)ただ適応の都度書く必要があるため面倒なのと、スタイル管理が煩雑になりがちなのがデメリットといえます。そのため必要がある場合のみ直接CSSを書き込み、その他はheadや外部ファイルで管理するのが一般的とのこと。
HTMLで直接指定してはダメなのか?
遥か昔私が趣味でホームページを作っていた頃、フォントサイズや色の指定は<font size="大きさ"> や <font color="色名"> で指定していた気がします(勿論当時からCSS指定もできましたが、簡単なので私はタグで直接指定していました)
今回CSSで文字色や大きさを指定する方法を勉強したが、今までやったみたいにHTMLタグから直接指定しちゃだめなのかしら??と思って調べてみたところ、どうやらHTML4ではHTMLで直接指定できたが、HTML5ではそれが廃止されてしまったようです。
なのでフォントの色やサイズを指定する場合はCSSで!が今の原則のようです。ちなみにタグで直接書いてもページ内反映されたため、タグで直接書く方法が完全に死んだわけではないようですが、環境やブラウザによっては適応されないなどがあるんでしょうね。
【参考サイト】