トップページ > ホームページ作成 > ホームページ作成CSSスタイルシート

CSSカスケーディングスタイルシートを作る

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", "MS Pゴシック", 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に直接書き込んでもできますが、
まずは、その設定をスタイルシートでやってみましょう。
全体のデザインに満足できたら、サブページを作ります。
同じスタイルシートを適用できますから、同じ基本デザインができます。
さらに、細かい設定をしたい時は、同じスタイルシートにクラスを追加して行きます。
スタイルシートを使いこなして、素敵なホームページを作って下さい。

SITE MENU

NEWS

google+1

Facebook

Feed

Copyright(C) 東京WEB企画 All Rights Reserved.