人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSの書き方が分かりません。
分かる方、教えて頂けませんか?

●質問者: rdgfngubihn
●カテゴリ:インターネット
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

なお、答えない・アドバイスだけ ということは×です。(分かるかた)


1 ● Hiroto

CSSを使った、スタイルの設定方法は大きく分けて3つあります。:

  1. スタイルを適用するドキュメントの別のCSSファイルにスタイルを記述する。
  2. スタイルを適用するドキュメントにスタイルを記述する。
  3. スタイルを適用する要素に直接スタイルを記述する。

この3つは記述する場所が異なりますが、中身(?)はほぼ同じです。
例えば、以下のhtmlがあったとします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<p id="summary">
このドキュメントに<b>スタイル</b>を適用します。
</p>
<p>
なお、これは<b>サンプル</b>です。
</p>
</body>
</html>

1. スタイルを適用するドキュメントの別のCSSファイルにスタイルを記述する。

別のCSSファイルにスタイルを記述します。複数のドキュメントに同じようなスタイルを適用するときに便利です。
CSSファイルの拡張子は、必ず「.css」にしてください。
このCSSファイルの名前は、例として「sample.css」とします。

/* ←これはコメントを表します。他のところに影響がありません。→ */
/* body要素の背景を黄にする。 */
body {
background-color: #ff0;
}
/* b要素の文字の色を赤にする。 */
b {
color: #f00;
}
/* b要素をポイントしたときの背景を黒、文字の色を白にする。 */
b:hover {
background-color: #000;
color: #fff;
}
/* idが「summary」の要素に実線、10px、青のボーダーを設定する。 */
#summary {
border: solid 10px #00f;
}

CSSファイルは、下のコードをhead要素に入れて読み込みます。href属性の値は書き換えてください。

<link rel="stylesheet" href="sample.css" type="text/html">
body {
background-color: #ff0;
}

このコードだったら、「body」の部分を「セレクタ」、中括弧({ ? })の中の「background-color」の部分を「プロパティ」、「#ff0」の部分を「値」と言います。

2. スタイルを適用するドキュメントにスタイルを記述する。

ドキュメントと同じファイルにスタイルを記述します。一つのドキュメントに対してだけ適用する場合に便利です。
の中にスタイル情報を記述します。

<style>
/* ここにスタイル情報を記述します。 別のCSSファイルに設定する方法と内容が全く同じなので割愛します。 */
</style>

3. スタイルを適用する要素に直接スタイルを記述する。

一つ一つの要素にスタイルを記述します。○○の要素だけに設定したい、というときに便利です。
例えば、body要素の背景を黄にするときは以下のようにします。

<body style="background-color: #ff0;">
?
</body>

長くなりましたが、基本的なことを説明しました。CSSについてまとめてあるサイトがあるので、そちらを使うといいと思います。


rdgfngubihnさんのコメント
こんなに長くかいていいただきありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ