ホームページを作る!CSS・スタイルシート
CSS・スタイルシートの使用

無料ホームページ作成!CSS
CSS・スタイルシートの使用

ホームページにCSS・スタイルシートの使用定義

CSS・スタイルシートの定義

始めにCSS・スタイルシートを記述する前にやっておかなければならない事があります。
下のタグを<head>タグ内に宣言して下さい。


<meta http-equiv="content-style-type" content="text/css">
 

これは、CSS・スタイルシートをこの形式で書きますと宣言で、このタグがなくてもおそらく動きますが、以上などの防止の為に置いておいて下さい。
以上でCSS・スタイルシートを使う宣言ができました。

CSS・スタイルシートを別ファイルで読み込む

まず、CSS・スタイルシートを使う上で一番便利な方法を説明します。この方法はcssファイルを一つ作るだけでサイト全体に適用でき、容量もかなり少なく済むのでかなりお勧めです。
まず<head>タグ内に


<link rel="stylesheet" type="text/css" href="css.css">
 

を宣言してください、これを宣言するとhref属性で記述されたcss.cssファイルをCSS・スタイルシートとして読み込んでくれます。後は「css.css」ファイルにCSS・スタイルシートを記入するだけです。

気を付ける部分はファイル名は「.css」という拡張子にして下さい、それと、相対パスでhref属性を使用する場合、違うディレクトリ(フォルダ)に入れる場合は注意して下さい。

CSS・スタイルシートをページ内に書き込む

この方法は、1ページだけにCSS・スタイルシートを適用したいときにお勧めです、全ページに適用させるのは無駄に容量が大きくなってしまいますし、変更する場合などはすごい手間がかかってしまいます。
<head>タグ内に


<style type="text/css">
</style>
 

を宣言して、後はこのタグの中にスタイルシートを書き込むだけです。

CSS・スタイルシートをSTYLE属性を使う

この方法は、1つの要素だけにCSS・スタイルシートを適用したいときにお勧めです、だったらただの属性使えばいいんじゃない?とおっしゃるかもしれませんが、p要素の中にわざわざfont要素を書いたりするのは私は非効率的だと思います。
それにこの属性を使えば用意されていない属性も使え、非常に便利です。


<要素 style="属性:値;">
 

このように宣言して、後はこの""の中にスタイルシートの属性と値を書き込むだけです。
いくつも宣言したい場合は


<p style="color:#000000;font-size:10px;">
 

のように定義します、「:」と「;」の違いに注意して下さい。

無料ホームページ作成!メニュー

CSS・スタイルシート

基本

文字

余白

背景

ボックス

配置

リスト

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS