CSSカスケーディングスタイルシートとは
CSSカスケーディングスタイルシートは、HTMLのヘッダ部分へ記述する内部スタイルシートと
別ファイルで作成する外部スタイルシートがあります。
簡単な記述だけでしたらHTMLのヘッダ部分へ記述しても良いのですが
すべてのホームページに記述する必要があります。
ホームページの各ページが統一されたデザインであるならば、別ファイルにする事をオススメします。
CSSカスケーディングスタイルシートの設定方法
まず、HTMLのヘッダ部分へ外部のスタイルシートを使用する事を記述する必要があります。
ヘッダ内 <head> から </head> の間に
<link rel="stylesheet"type="text/css" href="style.css" />
このように記述します。
（外部スタイルシートのファイル名は style.css としています。）
HTML側の記述はこれだけです。
スタイルシートのファイル（style.css）は設定したHTMLファイルと同じフォルダに入れます。
CSSカスケーディングスタイルシート作成
ファイルの拡張子は.cssですがファイル自体はテキストファイルです。
テラパッドなどのテキストエディタで作成できます。
新規にテキストファイルを作成しファイル名をstyle.cssに変更するだけです。
CSSカスケーディングスタイルシートの中身を記述していきます。
まず、CSSカスケーディングスタイルシートの文字コードを指定します。
@charset "utf-8";
文字コードがUTF-8でしたらこのように記述します。
文字の大きさを変える
文字の大きさを変えるにはフォントサイズを指定します。
フォントサイズの指定方法はpx（ピクセル）で指定する方法や％で指定する方法があります。
％での指定はブラウザに依存する設定になりますので、基本的にpx（ピクセル）で指定します。
デザインにもよりますが11pxから13pxくらいが読みやすいと思います。
※1pxでの指定もできますが、まったく読めない小さい文字になります。
隠しテキストと判断されてしまう可能性がある5px以下は指定しないようにしましょう。
文字といっても、h1タイトルに記述した文字、pタグに記述した文字など色々種類があります。
例えば、h1タイトルの文字サイズを12pxにする場合は
h1 {
font-size:12px;
}
このように記述します。同じ様に
p {
font-size:11px;
}
これでpタグに書かれた文字のサイズが11pxに変更されます。
文字の色を変える
文字の色を変えるにはカラーを設定します。
h1 {
color: #d0301f;
}
このように設定すると、h1の文字が赤くなります。
pタグの文字も同様に設定する事ができます。
文字の太さを設定する
文字の太さは数値での設定
100から900まで。
もしくは、normal bold でも設定できます。
normalは400 boldは700と同じ太さになります。
h1 {
font-weight:normal;
}
このように記述するとh1タイトルの太い文字通常の文字と同じ太さになります。
よく使われる記述として
* {
padding:0;
margin: 0;
font-family: Verdana, Arial, Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
*これはユニバーサルセレクタといい、全ての要素を指定する事ができます。
文字の周りに、自動的に設定されてしまう空白をリセットして、フォントを一括で設定しています。
とても便利ですので、ご利用下さい。
文字の装飾
・文字にアンダーラインを引きたい
・アンダーラインは点線にしたい
・文字の周りにスペースを取りたい
よく利用されるスタイルシートの記述方法です。
まず、覚えておきたいのは
文字や画像の周りには、内側からパッディング、ボーダー、マージンという要素があります。
パッディングとは文字や画像と枠線までの間隔。
ボーダーとは枠線。枠線を点線にしたり太さを設定できます。
マージンとは枠線から外側に隙間を空けます。
これをclassで設定しておきますと、画像に枠線をつけるなど、簡単に設定できます。
box {
text-align: center;
width: 205px;
padding-top: 8px;
padding-bottom: 8px;
border: 1px solid #EEE8DF;
float: left;
margin-bottom: 10px;
margin-left: 10px;
background-color: #F9F7F4;
}
このように設定をすると、
<img class="box" src="img-1.jpg" />
これで画像の周りに枠を自動で付けられます。
まずはホームページを作ってみましょう
まずはトップページをHTMLで作ります。
細かいデザインは二の次で、全体の構成を決めます。
そうすると、ここの文字はこうしたい、タイトルはこうしたいと色々と変えたくなります。
HTMLに直接書き込んでもできますが、
まずは、その設定をスタイルシートでやってみましょう。
全体のデザインに満足できたら、サブページを作ります。
同じスタイルシートを適用できますから、同じ基本デザインができます。
さらに、細かい設定をしたい時は、同じスタイルシートにクラスを追加して行きます。
スタイルシートを使いこなして、素敵なホームページを作って下さい。
