スタイルシートをHTML文書に記述する方法

スタイルシートをHTML文書に記述するには3通りの方法があります。

HTML文書のタグにstyle属性で記述する方法

<p style="font-size:120%;border:1px solid #ff0000;">テストの文章です。</p>

この方法では、『HTML文書からデザイン部分を分離する』というスタイルシートの概念からははずれてしまうため、極力使用しないようにしたほうがいいです。
JavaScriptなどでページに動作を持たせるときや、ページごと・パーツごとにスタイルシートの指定が違う場合には有効です。

styleタグを使用してHTML文書に記述する方法

<style>
<!--
p {
  font-size:120%;
  border:1px solid #ff0000;
}
-->
</style>
<p>テストの文章です。</p>

この方法は、デザインの作成中に重宝します。HTML文書にスタイルシートを記述することができるため、編集するファイルが1ファイルですみます。

[参考記事] ウインドウを上下で分割できるテキストエディタ MKEditor

最終的にデザインが完成したときに、スタイルシートファイルに分けるということもやりやすいです。

スタイルシートファイルを作成して、HTML文書から呼び出す方法

sample.css

p {
  font-size:120%;
  border:1px solid #ff0000;
}

HTML文書

<link rel="stylesheet" type="text/css" href="sample.css" />
<p>テストの文章です。</p>

この方法は、『HTML文書からデザイン部分を分離する』というスタイルシートの概念に合致した方法になります。
内容に無関係な記述がHTML文書内に少なくなるため、SEO対策としても効果的です。

スポンサーリンク

関連記事

スポンサーリンク

strip修飾子 1つの空白または与えられた文字列によって置き換える

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る