Loading...
HTMLHTML中級者~上級者向けコピペ

【CSSの記述方法】ヘッダー内・HTML/BODY内・別ファイル・スタイルの記述方法まとめ【HTML中級者~向け】

CSSの記述方法のまとめ!

CSSの記述方法には、何種類かのやり方があります。

  • ヘッダー内に記述する方法
  • 別ファイルに記述して、リンク(読み込む)方法
  • HTML内BODY中に直接書く方法

時と場合によって、使い分けたい時があります。

しかし、いざやろうと思うと『どうやって記述するんだっけ…』と、丸暗記はなかなか出来ない(しない)もの。

検索していずれは辿り着くんですが、いちいちググるのも面倒!

という訳で、上記3種類の記述方法をサクッとまとめます!


目標:★文字を赤色にする★

↓今回の目標ビジュアル↓

★文字を赤色にする★

 

【文字を赤色にする】と言っても、いろいろやり方があります。

  • ID指定
  • CLASS指定
  • SPANタグを利用
  • FONTタグを利用

などなど。

利用方法は、場合によって使い分けたいですね。

・別ファイルに記述して、リンク(読み込む)方法

まずは一番ベーシックな記述方法。

  1. ヘッダーでCSSへのリンクを記述し、
  2. CSSファイルにスタイルを一括で記述。
  3. BODY内で指定して表示させる方法 です。

ベーシックなんだけど、こうして書いてみると意外と手間が掛かりますね。
まぁ、修正したい時、あとあと助かることが多いんですが。

意外と『リンク用のソースなんだっけ…』となりがちですよね~

①↓ヘッダー内に下記を追記↓

<link rel=”stylesheet” href=”★★★.css” type=”text/css” />


②↓★★★.css内へスタイルを記述↓

.★★★{ font-color: #FF0000; }

③↓BODY内でスタイルを指定↓

<div class=”★★★”>★CLASSで文字を赤色にする★</div>

・ヘッダー内に記述する方法

続いてヘッダー内に記述する方法。

  1. ヘッダー内にCSSを記述し
  2. BODY内で指定する 方法。

テスト時や〝取り急ぎの処置〟として使い勝手が良いです。

①↓ヘッダー内に下記を追記↓

<style type=”text/css”> <!– .★★★{ font-color: #FF0000;}–> </style>


②↓BODY内へスタイルを記述↓

<div class=”★★★”>★CLASSで文字を赤色にする★</div>

・BODY内に直接書く方法

最後に、HTMLのBODY内で直接書く場合です。
この場合は、更に何種類かの方法があります。

  1. DIVで指定する方法
  2. SPANで指定する方法
  3. で指定する方法

場合によっては、スタイル指定が『効かない』時もあります。
3種類のうちどれかを使えば、大抵の場合は解決するかと思います。

方法①★DIVで文字を赤色にする★

<div style=”color: #FF0000;”>★DIVで文字を赤色にする★</div>


方法②★SPANで文字を赤色にする★

<span style=”color: #FF0000;”>★SPANで文字を赤色にする★</span>


方法③★FONTで文字を赤色にする★

<font color=”#FF0000″>★FONTで文字を赤色にする★</a>

以上。まとめ

このように、同じ事をやりたい場合でも、何種類かのやり方があります。

利用方法は、場合によって使い分けたいですね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です