ＣＳＳ基本講座

ＣＳＳとは

ＣＳＳはＨＴＭＬとは別で、ホームページのデザインをまとめるファイルになります。
このＣＳＳを活用することにより、ＨＴＭＬで余分なコードを使用せず、
デザインをすることができるので、コードが全体的にすっきりしSEOにも有利になります。

まずは、ＣＳＳの記述から覚えましょう。

【ＨＴＭＬにクラスを指定する(index.html)】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプル</title>
</head>
<body>


<div class="test"> 
デザインします。
</div> 


</body>
</html>

まずは、<div>や<span>を使ってデザインを指定する部分にクラスをつけます。
しかし、クラスがついただけでまだ何も変わりません。
なので新しくファイルを作り、それをcssファイルとします。

【cssでクラスに効果をつける(test.css)】


.test {font-weight:bold;}

クラスを指定する際はクラス名の先に「.」をつけ、「.クラス名{～・・・」と記述します。
特にＨＴＭＬのような「head」や「body」は必要ありません。
また、コード自体も指定することが可能です。
例えば<h1>にcssを指定する場合は何もつけず、「h1 {～・・・」と記述して良いです。
ちなみに、上記は文字を太くするという指定ですが、このままではまだ効果は反映されません。
ＨＴＭＬでcssファイルを呼び出さなければなりません。

【ＨＴＭＬでcssを呼び出す(index.html)】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="test"> 
デザインします。
</div> 


</body>
</html>

上記のように呼び出せば、ＨＴＭＬにcssを反映することができます。
あとは応用すれば、様々なデザインができます。

【HTML関連】

【CSS関連】

【SEOの基本】

【ドメイン関連】

【豆知識】

SEO基本講座	応用講座
SEO無料素材配布	無料コンテンツ
SEOよくある質問	お問い合わせ

SEOのことならＦにお任せください

SEOって実は簡単なんです！

SEOメニュー

SEO基本講座

SEO応用講座

SEOその他

会社概要

SEO対応地域