スタイルシートで記入した内容がページのデザインとして適用されるためには、HTMLのソースコードとCSSのソースコードが関連付けられていないといけません。ここでは、スタイルシートのデザインがページ内に適用される３つの方法についてお話します。
スタイルシートをページ内に読み込ませる方法は下記の３つです。
- 外部ファイルから読み込む
- ページ内のstyle要素に記入
- HTMLのタグに直接記入
外部ファイルから読み込む
この方法が一般的なやり方です。例えば、WordPressの場合、ダッシュボードの「外観」>「テーマの編集」のページを開いたときに表示される「スタイルシート (style.css)」というページがあります。このスタイルシートが有効化されているテーマのすべてのページで読み込まれてデザインが反映される仕組みになっています。
ブラウザでWordPressのページを表示させた状態で、「Ctrl」+「U」キーを押すと、新しいタブでページのソースコードが表示されると思います。さらに「Ctrl」+「F」キーで検索ボックスを表示させ、ボックス内に「style.css」と入力して検索してみてください。
<link rel=“stylesheet” href=“http://ドメイン名/wp-content/themes/テーマ名/style.css”>
みたいな感じのコードが検索でヒットしませんでしたか？これが外部ファイル（style.css）をページに関連付けるためのリンクです。
http://ドメイン名/wp-content/themes/テーマ名/style.cssの部分をクリックしてみてください。先ほど、「外観」>「テーマの編集」で表示させていたスタイルシートがブラウザで表示されます。このように外部ファイル（CSSファイル）をhead要素内で関連付けることでデザインが適用されます。
ページ内のstyle要素に記入
HTMLのソースコード内に<style>～</style>というタグを記入すると、style要素内をスタイルシートとして扱えるようになります。
場所はどこでも大丈夫です。例えば、こんな感じでページ内にスタイルシートを埋め込みます。
<style>
.example {
margin-top: 1.5rem;
border-radius: 3px;
border: solid 2px #333;
position: relative;
padding: 1.5em .8em 1.0em .8em;
}
</style>
この方法では、記入したページ内のみでデザインが適用されるようになります。
HTMLのタグに直接記入
これはデザインを適用させたい要素の開始タグに直接スタイルシートを記入する方法です。
例えば、
<p>赤いテキストにします。</p>
このテキストを赤くしたい場合、次のように書きます。
<p style="color:red;">赤いテキストにします。</p>
開始タグの中に「style=””」と記入すると、二重引用符「””」の間がスタイルシートになります。
普通、スタイルシートを記入するときは、セレクタ・プロパティ・値の３つを記入するのですが、インラインの場合、デザインを適用させたい場所に直接記入しているのでセレクタは不要です。「セレクタ:color:red;」ではなくて、「color:red;」になります。
<p style="color:red;">赤いテキストにします。</p>
以上が、スタイルシートを適用させる３つの方法でした。
