CSS(スタイルシート)の使い方について

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は「CSS(スタイルシート)の
使い方について」お話させて頂きます。

HTMLファイルにCSS(スタイルシート)を
反映させるには主に3つの方法があります。

————————————————————————
①外部CSSファイルを用意してHTMLファイルに読み込む
②head要素内にstyle要素を記述する
③要素にstyle属性を直接記述する
————————————————————————

では、順番に解説していきますね。

①外部CSSファイルを用意してHTMLファイルに読み込む

css

一般的に用いられている方法になります。
CSSファイルを用意してHTMLファイルに読み込ませます。

この様に、<head></head>の中に
外部CSSファイルの読み込み設定を指定します。

href=”xxx.css”
こちらの部分にスタイルシートのファイル名を記述します。

この場合は、cssフォルダの中にあるstyle.cssを
読み込むという設定をしていることになります。

②head要素内にstyle要素を記述する

htmlファイルのhead要素内に記述する方法です。

どうしてもそのページの要素を部分的に
適用させたい場合などに使う場合が多いかと思います。

③要素にstyle属性を直接記述する

要素に直接スタイルを適用させる場合に用いますが、
XHTML1.1のルールでは、style属性を直接記述する方法は
非推奨とされています。

②や③などの方法は、スタイルを部分的に優先指定するのに
便利だとは思いますが、メンテナンスなどを考えると、
HTMLファイルに直接書くよりも、CSSを外部ファイルとして
用意しておく方が効率が良いと思います。

HTMLファイルのページ数が少ないのであれば
そんなに大変ではないかもしれませんが、
ページ数が多くなると、HTMLファイルに直接指定していると
どんな指定をしたのか確認するだけで大変になる場合もあります。

外部ファイルに記述するようにしておけば
どんな指定設定を行っているのか
確認しやすいですからね。

CSS(スタイルシート)は外部ファイル化して
使うのが一般的な使い方というのを
頭に入れておいて頂ければと思います。

では、また来週お会いしましょう。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ