CSS基礎

CSS
  • CSS : Cascading Style Sheet
    cascade＝滝
    由来：様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。水の流れ（滝）を現している。親→子→孫。

カスケードの概念

HTML 内側から細かく指定していくもの
CSS 外側から大きく指定していくもの
font-size(文字)

正確には、ブラウザの初期値（デバイスフォント）の初期値
制作者18pxに指定していた場合18px = 1em、pの初期値は18pxということになる。

  • デバイスフォント
    1.0em 16pxのこと。
    2.0em 16＋16＝36px
    emの文字としてエム
    16pxが標準だとすると0.875em 14pxを使う場合が多い。（15pxはあまり差が無いので使わない）
body{
 font-size:16px;
}

↑すると2.0emは16pxの2倍と計算できるようになる。

  • IEだけは指定が反映されない場合が多いので
    IE対策でbodyにフォントサイズを16pxにしておくとどのブラウザでも16pxで表示できる。
  • chrome が大中小という大枠なフォントサイズを当てはめるようにしているので必ずbody内でsize設定する。

line-height（行間）

  • 本文に必ずline-heightを指定する。(行間が空かなくて読みにくくなるので。)


(標準値）
1.5　英語
1.6 　日本語

heightとline heightはまったく違うもの(line heightは文字の上下に行間が空く。)

heightはpに依存する。p同士の改行には有効。
line-heightはpタグの中の文字に依存するのでpの中の自動改行が有効。

font-family（書体）

  • font-familyは使っていないMacから設定する。
  • MacはProではなく、NをつけてProNとする。W3はもうMacにはない。ProNになった。
  • DWのfont-familyは無駄な書き方。要らない書体が多すぎる。結果は同じになる。
font-family:"Hiragino Kaku Gothic ProN", Meiryo,sans-serif;

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の好きな音楽</title>
<style>
*{
		margin:0;
		padding:0;
}

body{ 
		line-height:1.5;
		font-size:16px;
		color:#333;
		font-family:"Hiragino Kaku Gothic ProN", Meiryo,sans-serif;
		padding:50px;

}

h1{
		color:#F30;
		font-size:36px;
}
p.text{
		line-height:30px; 
		background-color:#FC0;
}
#container{
		width:600px;
}
</style>
</head>
<body>
<div id="container">
<h1>音楽リスト</h1>
<p><img src="img/02.jpg" width="" height="" alt="amazon"></p>
<h2><a href="#" target="_blank">タイトル</a></h2>
<h3>リストの作成</h3>
<p><img src="img/01.jpg" width="300" height="300" alt="music"></p>
<p>価格：1200円</p>
<ol>
<li>曲名１</li>
<li>曲名２</li>
<li>曲名３</li>
</ol>
<p class="text">説明文説明文説明文説明文説明文説明文説明文</p>
</div>
</body>
</html>