- オススメCSS解説本
- CSSのメリット
- 利用手順
- HTMLとCSSの関係
- スタイル設定
- 継承
- カスケード
- 疑似クラスと疑似要素
- マージンとパディング
- 数値単位
- メニュー作成
- コンテンツ作成
- タイトル作成
コンテンツ作成 コンテンツの作り方
コンテンツの配置いろいろ
コンテンツを大きなくくりで分けた時、下記のようなケースがあります。
配置により、もちろんスタイル設定も変わるので、step2から説明します。
コンテンツが縦に並ぶケース
例えば、下記のようなデザインをしたい時、
これを、目には見えないボックス（表示されない）で考えるとさらに理解が深まります。
以上を参照し、スタイル設定とHTML上での要素を見ていきます。
■ スタイル設定
スタイル設定として、次の記述を挙げました。スタイルの設定方法は他にも考えられるので、これはほんの一例です。スタイルに付いている番号は、上記デザイン内の①～⑤に対応しています。
#wrapper{ （一番外の赤線外枠を指す）
width:500px;
}
h1{ （ベタ塗の緑部分）
background-color:#00CC66;
color:#FFFFFF;
line-height:50px; （①h1の行の高さを設定）
text-indent:10px; （②h1文字が左端１０pxのところから始まる）
font-size:20px;
margin:0;
}
．con{ （青で囲われたボックスを指す）
width:500px;
margin:10px 0 0 0; （③conの上に１０pxの余白が出来る）
}
h2{ （紫で囲われたボックスを指す）
font-size:14px;
color:#33FFFF;
margin:0 0 10px 20px; （④⑤h2の左と下に２０pxと１０pxの余白が出来る）
}
p{ （黄色で囲われたボックスを指す）
font-size:12px;
text-align:justify;
text-justify:distribute;
margin:0 0 0 50px; （⑥pの左に５０pxの余白が出来る）
}
■ HTML上の要素
<div id="wrapper">
<h1>CSS徹底分析</h1>
<div class="con">
<h2>CSSの基本</h2>
<p>
基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。
</p>
</div>
<div class="con">
<h2>CSSの基本</h2>
<p>
基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。
</p>
</div>
</div>
コンテンツが横に並ぶケース（段組み）
例えば、下記のようなデザインをしたい時、
これを、目には見えないボックス（表示されない）で考えるとさらに理解が深まります。
以上を参照し、スタイル設定とHTML上での要素を見ていきます。
■ スタイル設定
スタイル設定として、次の記述を挙げました。スタイルの設定方法は他にも考えられるので、これはほんの一例です。スタイルに付いている番号は、上記デザイン内の①～⑤に対応しています。
#wrapper{ （一番外の赤線外枠を指す）
width:500px;
}
h1{ （ベタ塗の緑部分）
background-color:#00CC66;
color:#FFFFFF;
line-height:50px; （①h1の行の高さを設定）
text-indent:10px; （②h1文字が左端１０pxのところから始まる）
font-size:20px;
margin:0;
}
.con{ （灰色で囲われたボックスを指す）
width:500px;
margin:0;
}
.con div{ （青で囲われたボックスを指す）
width:230px;
margin:10px 0 0 0; （③divの上に１０pxの余白が出来る）
padding:10px; （④divの内側に１０pxの余白が出来る）
float:left; （段組みのポイント））
background-color:#33CC00;
}
h2{
font-size:14px;
color:#000000;
margin:0 0 15px 0; （⑤h2の下に１５pxの余白が出来る）
}
p{ （黄色で囲われたボックスを指す）
font-size:12px;
text-align:justify;
text-justify:distribute;
margin:0;
padding:0;
}
■ HTML上の要素
<div id="wrapper">
<h1>CSS徹底分析</h1>
<div class="con">
<div>
<h2>CSSの基本</h2>
<p>
基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、
しっかりマスターしてください。基本は大事です。基本が理解できていないと、ステップアップが
できません。CSS徹底分析で、しっかりマスターしてください。基本は大事です。基本が理解でき
ていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。
</p>
</div>
<div>
<h2>CSSの基本</h2>
<p>
基本は大事です。基本が理解できていないと、ステップアップができません。CSS徹底分析で、
しっかりマスターしてください。基本は大事です。基本が理解できていないと、ステップアップが
できません。CSS徹底分析で、しっかりマスターしてください。基本は大事です。基本が理解でき
ていないと、ステップアップができません。CSS徹底分析で、しっかりマスターしてください。
</p>
</div>
</div>
</div>