アフィリエイトサイトでよく使うCSSの概要

: CSSでデザインを変えてみよう-CSSの概要

: ブログにオリジナリティを出したり、サイト制作をする上で重要になってくるスタイルシート(CSS)。CSSをなんとなく使っているという方も多いのでは？ここではCSS実践テクニックの導入として、概要を簡単に解説します！

スタイルシート(CSS)とは

CSSとは、色・サイズ・レイアウトなどの表示スタイルをまとめたシートです。
HTMLにCSSを適用させる事で、複数のページのデザインを統一することができます。

CSSの書き方

セレクタ・・・・変えたい対象

属性・・・・・・スタイルの設定内容

値・・・・・・・具体的な値
例) p{color:#000000;}

CSSのかけ方

セレクタ(変える対象)の指定には、HTMLタグに直接かける書き方とその他に、classとidを使った書き方があります。

p{color:#000000;}

HTMLタグ<p></p>要素の色を黒(#000000)に指定する

.sample{color:#000000;}

.(ピリオド) ＋ class名（任意の名前を設定）
class「sample」要素の色を黒(#000000)に指定する

#sample{color:#000000;}

#(シャープ) ＋ id名（任意の名前を設定）
id「sample」要素の色を黒(#000000)に指定する

#sample01 .sample{color:#000000;}

id「sample01」の中のclass「sample」の要素の色を黒(#000000)に指定する

#sample01 .sample p{color:#000000;}

id「sample01」の中のclass「sample」の「p」要素の色を黒(#000000)に指定する

HTMLにCSSを適用させる

スタイルシートには、HTMLへの適用方法が3種類あります。

1: HTMLファイルとは別にCSSの設定のみ記述したファイルを用意し、
そのファイルをHTMLファイルとリンクさせ適用させます

▼CSS(外部ファイル abc.css)

p{
	color:#000000;   /* 文字の色を黒に設定 */
	margin-top:10px;   /* 文字の上に10pxの余白を設定 */
}

▼HTMLソース

<html>
	<head>
		<link rel="stylesheet" href="css/abc.css" type="text/css" />
	</head>
	<body>
		<p>テキストが入ります。</p>
	</body>
</html>

2: HTMLファイルへまとめて記述して(head内)適用させます

▼HTMLソース

<html>
	<head>
		<style type="text/css">
			p{color:#000000; margin-top:10px;}
		</style>
	</head>
	<body>
		<p>テキストが入ります。</p>
	</body>
</html>

3: タグにstyle属性を追加して適用させます

▼HTMLソース

<html>
	<head>
		<meta name="Content-Style-Type" content="text/css">
	</head>
	<body>
		<p style="color:#000000; margin-top:10px;">テキストが入ります。</p>
	</body>
</html>

概要を理解したら、実践テクニックに進みましょう！

CSSでデザインを変えてみよう-CSSの概要

スタイルシート(CSS)とは

CSSの書き方

CSSのかけ方

HTMLにCSSを適用させる