インラインCSS

余裕deホームページ制作

インラインCSS

さて、ココではスタイルシートを定義する場所について解説していくわけですが。

スタイルシートってのは定義する方法をつかって、これから解説する定義する場所に定義して、
そこから適用したい場所に呼び出して、はじめて使えるようになります。と言うことだって事は多分もう分かってくれたと思います。

それじゃ、インラインCSSと呼ばれる定義の場所を覚えておいてください。
インラインCSSの特徴は、スタイルシートを適用したい場所に直接定義を書き込むと言うことです。

たとえば、「 <H1>タグを設定したテキストを、赤色で表示したい 」場合、
このように、タグに書き込んでやります。

<H1 STYLE="color: #CC0000"> テキスト </H1>

<H1>タグという適用させたい場所に、直接定義を書き込んであげてるよね?
このインラインCSSという方法は、1箇所のみに設定する方法なので、 たとえ違う場所で<H1>タグを使用しても、 同じようには、反映されないんだよね。

複数の場所でいじりたい場合には向かない方法ですが、ちょっとずつ細かく設定したい人には超便利な方法なんで覚えておいて下さいな。

 

ヘッダーって場所に定義しちゃうぜ!

インラインCSSは、1箇所だけに直接スタイルシートを定義する方法だったけど、複数設定をする場合なんかは一々定義しなければならないので、凄まじく手間が掛かっちゃうんだよねぇ。

ってな訳でスタイルシートをヘッダーに定義して使う方法を解説します。

これを使えば、1つのページのみで利用するスタイルシートを定義することができるので、 かなり手間をカットできます。んじゃ、紹介していきます。

ヘッダー部分というのは、<head> 〜 </head>で囲まれた部分のことをいいます。
ヘッダーという呼び方は、一般的じゃないかもしれないので、<head>要素と覚えておくと良いと思います。

ヘッダー

まず、<head>〜</head>で囲まれた領域に、<STYLE>属性 を書き込みます。(図のように、「TYPE=”text/css”」を忘れずに)

図では、H1という基本セレクタでスタイルシートに定義しているので、このページ内の<H1>で囲まれている部分は、全てこの定義が反映されるんだぜ!わかったかな?

この方法は、Dreamweaverでサイトをつくっていると勝手につくってくれるので、 お使いの方は特に意識する必要はないですけども(因みに管理人もDreamweaverなので気にしてませんwww)逆に勝手につくられてしまうので、ちゃんと管理しないと、すごいゴチャゴチャしてきます。

それから、1ページだけにスタイルシートを定義する方法なんでサイト全体を管理するにはあまり向いているとは言えないですね。

たとえば、新しいページをつくったとして、 <H1>でかこった部分は、赤色表示されません。

その新しいページで、<H1>を赤色表示したいのなら、 そのページで再びこのページでしたような定義をする必要があります。正直めんどいよね。サイト作る気も一気に萎えると思います。

でもこれを解消する方法があるんですよ。その名も「外部スタイルシート」!!ちょっとかっこいい響きですよね?そうでもないかな(笑)外部スタイルシートについては次のページで説明していくので絶対見て下さい!てか見ないと損するから強制な!

おすすめWEBサイト 5選

最終更新日:2017/1/27