ホーム > コンピュータ > webサイト作成

ベクトルドロー・レベルゼロ+

cssを記述する場所[Web]

新規作成日 2015-10-23
最終更新日

cssを記述する場所

cssを記述する場所は、次の3つがあります。「外部ファイルに記述し参照する」方法が使われることが多いです。

  • タグ要素内に、スタイル属性として記述する。
  • ヘッダ内にまとめて記述する。
  • 外部ファイルに記述し参照する。

タグ要素内に、スタイル属性として記述する

私は、ほとんど使用したことがありません。使用するスタイルは、何度も使う事が多いので、cssファイルに追記して使用することが多いからです。

色の指定など、再利用することがないスタイルはこの方法で指定しても良いかもしれません。


<html>
<head>
<meta name="Content-Style-Type" content="text/css">
</head>

<body>
<p style="color:blue; ">文字の色を変えます</p>
</body>
</html>

ヘッダ内にまとめて記述する

以下の場合に使用されます。

  • 外部ファイルのcssが使えない環境
  • cssの外部ファイルを読み込まないことでページの表示速度を向上させたい場合
  • 「cssの動作の説明」などで、そのページでしか使わないcssが記述したい場合

Expresson Web 4で、テンプレートで用意されたcssファイルを削除した状態で、ツールバーに設定された書式を適用するとこの形式でスタイルが追加されます。

※Google Site 内でjavascriptやcssが使えるようになったようです。 「カスタム HTML、CSS、JavaScript を挿入する(外部サイト)」を参照。


<!—スタイルの定義 -->
<head>
<style type="text/css">
.auto-style1 {
	text-align: center;
}
</style>
</head>

</body>
<!—スタイルの利用 -->
<p class="auto-style1">スタイルが利用できます。</p>

<!—メディア属性も使用できます。 -->
<p class="auto-style1" media="print">メディア属性も利用できます。</p>

</body>

外部ファイルに記述し参照する

一般的にこの方法が使われます。cssファイルを変更するとこのファイルを参照するすべてのページのスタイルが変更されるため、サイトのデザインを管理するのに有効です。


<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<p>スタイルは、「style.css」ファイル内に記述します</p>
</body>
</html>
ページトップへ
webサイト作成
Expresson Web 4
Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」
inserted by FC2 system