33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

直接CSSを書き込む方法

本日の教材動画はこちら 

 CSSについて勉強した際、CSSの書き方は3種類あることがわかりました。今回はその中の1つ目の方法「(style属性を利用して)直接タグの中にCSSを書く方法についてみていきたいと思います。

<style属性>をタグの中に使う

直接CSSを書き込むには、タグ内にstyle属性を追加する必要があります。使い方は利用したいタグ内に style="CSSの指定" を記載します。

 

また、下記の理由でhead内に一言CSSを使いますよ!という一文を記載したほうがいいようです。 

文書内で使用されるスタイルシートCSSによるものであることをブラウザなどに知らせるために、 <head>要素内に<meta>要素を記述してスタイル言語の値にtext/cssを指定します。多くの場合、この指定をしなくてもブラウザによって自動的に判断されますが、誤動作を避けるためにも記述したほうが良いでしょう。

HTML文書に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で!が今の原則のようです。ちなみにタグで直接書いてもページ内反映されたため、タグで直接書く方法が完全に死んだわけではないようですが、環境やブラウザによっては適応されないなどがあるんでしょうね。

 

今回勉強した内容

今回勉強した内容

 

出来上がったページ

出来上がったページ

【参考サイト】

HTMLのフォントサイズ指定【CSS|fontの使い方が初心者にもわかる】

<font>フォントの種類・大きさ・色を指定する