CSS | NORISUKETV.COM

CSSでウェブデザイン！

CSSとは何だろうか？

CSS(Sascading Style Sheet)は、Webの見た目を制御するためのもので、単にスタイルシートとも呼ばれたりする。 HTMLと共に使用し、HTMLの要素ごとに、サイズなどを指定する。このページのデザインにも使われている。

CSSの書き方

CSSの基本的な書き方は、セレクタによって対象となるHTML要素を選び、プロパティ(CSSプロパティ)と値を記述し、スタイルを設定するというものである。セレクタと{}で囲まれた部分をルールセットと呼ぶ。以下に文章の対応図（図-1)及び例を示す。
図-1  ルールセット

セレクタ{ -----------------対象の要素を設定
     プロパティ:値;   ----|
     プロパティ:値;   ----|-----------スタイルを設定
     プロパティ:値;   ----|
         *
         *
         *
}

例（<body>要素に、「背景を黒にしてください」と指示している)

body{   -----------------対象の要素を設定
  background:#000000;-----------スタイルを設定
}

CSSを記述する方法

◆ <link>を用いた外部CSSファイルで指定する方法

<link> タグにより、外部CSSファイルを読み込むことができます。外部CSSファイルを用いることで、複数の HTML文書で共通のCSSを共有することができます。

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <link rel="stylesheet" type="text/css" href="CSSファイルのパス名">
  5. <title>CSSのテスト</title>
  6. </head>
  7. <body>
  8. <h1>CSSとは</h1>
  9. <p>CSSはCascading Style Sheetsの略で・・・</p>
  10. </body>
  11. </head>

外部CSSファイル(例:style.css)には、次のように記述しておきます。ファイル名は何でもよいですが、拡張子は通常 .css です。

h1 { color: red; }
◆ @importを用いた外部CSSファイルで指定する方法

下記の様に @import を用いて外部CSSファイルを読み込むことも可能です。

<style type="text/css">

@import url(CSSファイルのパス名);

</style>

CSS2 では下記のような記法もサポートされました。

<style type="text/css">

@import "CSSファイルのパス名";

</style>

CSS3の進化

CSS3の改良ポイントは主に以下の6つだと思われます。
広告




　地震速報(@Eq_alert)

画像/文章を引用する際は該当ページへのリンクをお願いします。
記事を利用したことによる如何なる損害も管理人は責任を負いません。
表示が崩れる場合は、Google ChromeやFirefoxなどのモダンブラウザで閲覧頂くことをおすすめします。
Copyright © 2017- NORISUKETV.COM. All Rights Reserved.