CSS

スタイルシートを適用させる3つの方法

スタイルシートで記入した内容がページのデザインとして適用されるためには、HTMLのソースコードとCSSのソースコードが関連付けられていないといけません。ここでは、スタイルシートのデザインがページ内に適用される3つの方法についてお話します。

スタイルシートをページ内に読み込ませる方法は下記の3つです。

  1. 外部ファイルから読み込む
  2. ページ内のstyle要素に記入
  3. 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=””」と記入すると、二重引用符「””」の間がスタイルシートになります。

普通、スタイルシートを記入するときは、セレクタ・プロパティ・値の3つを記入するのですが、インラインの場合、デザインを適用させたい場所に直接記入しているのでセレクタは不要です。「セレクタ:color:red;」ではなくて、「color:red;」になります。

<p style="color:red;">赤いテキストにします。</p>

以上が、スタイルシートを適用させる3つの方法でした。

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP