スタイルシートをHTML文書に記述する方法
スタイルシートをHTML文書に記述するには３通りの方法があります。
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文書にスタイルシートを記述することができるため、編集するファイルが１ファイルですみます。
[参考記事] ウインドウを上下で分割できるテキストエディタ 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対策としても効果的です。
関連記事
スポンサーリンク
