- オススメCSS解説本
- CSSのメリット
- 利用手順
- HTMLとCSSの関係
- スタイル設定
- 継承
- カスケード
- 疑似クラスと疑似要素
- マージンとパディング
- 数値単位
- メニュー作成
- コンテンツ作成
- タイトル作成
タイトル作成 タイトルの作り方
テキストでタイトルをデザインする 【part1】
テキスのみのデザインについても、パーターンは色々です。ここでは、一例を挙げ、紹介します。
【part1】では、まず基本から紹介します。
例えば、下記のようなデザインをしたい時、
これを、目には見えないボックス（表示されない）で考えるとさらに理解が深まります
以上を参照し、スタイル設定とHTML上での要素を見ていきます。
■ スタイル設定
スタイル設定として、次の記述を挙げました。スタイルの設定方法は他にも考えられるので、これはほんの一例です。スタイルに付いている番号は、上記デザイン内の①に対応しています。
.title{ （一番外の赤線外枠を指す）
margin:0;
text-align:center; （この設定により、このボックス内のテキストは全て中央にくる）
}
h1{ （緑で囲われたボックスを指す）
color:#666666;
font-size:20px;
margin:0;
}
.subtitle{ （黄色で囲われたボックスを指す）
width:230px; （紫線の端から端が２３０px）
margin:10px auto; （①で、上下に１０pxの余白が出来る。左右をautoにすることで、中央にくる）
padding:2px 0 5px 0;
border-bottom:2px #993399 solid;
color:#993399;
font-size:16px;
}
p{ （水色で囲われたボックスを指す）
font-size:12px;
margin:0;
padding:0;
}
■ HTML上での要素
<div class="title">
<h1>CSS徹底分析</h1>
<p class="subtitle">基礎編</p>
<p>
基礎から、着実にステップアップを目指します。基礎編を終了した後には、実戦編でステップアップ！
</p>
</div>
テキストでタイトルをデザインする 【part2】
【part2】では、【part1】から少しステップアップしたものを紹介します。
例えば、下記のようなデザインをしたい時、
これを、目には見えないボックス（表示されない）で考えるとさらに理解が深まります
以上を参照し、スタイル設定とHTML上での要素を見ていきます。
■ スタイル設定
スタイル設定として、次の記述を挙げました。スタイルの設定方法は他にも考えられるので、これはほんの一例です。スタイルに付いている番号は、上記デザイン内の①～⑤に対応しています。
.title{ （一番外の赤線外枠を指す）
margin:0;
padding:0;
}
h1{ （緑で囲われたボックスを指す）
color:#ffffff;
font-size:20px;
line-height:50px; （①で、h1の行の高さを設定）
text-indent:10px; （②で、h1テキストが左の１０px目から始まる）
background-color:#9900CC;
margin:0 0 10px 0; （③で、h1の下に１０pxの余白を設定）
}
.subtitle{ （黄色で囲われたボックスを指す）
color:#993399;
font-size:16px;
margin:0;
padding:0 0 0 10px; （④で、subtitleテキストが左の１０px目から始まる）
float:left;
}
p{ （水色で囲われたボックスを指す）
width:290px; （水色で囲われたボックスの幅を設定）
font-size:12px;
text-align:justify;
text-justify:distribute;
margin:0;
padding:0 10px 0 0; （⑤で右側に余白を設定）
float:right;
}
■ HTML上での要素
<div class="title">
<h1>CSS徹底分析</h1>
<p class="subtitle">基礎編</p>
<p>
基礎から、着実にステップアップを目指します。基礎編を終了した後には、実戦編でステップアップ！
</p>
</div>