CSSパーツテンプレート

このサイトは、「初心者でも使えるCSSパーツテンプレート」を配布しています

テンプレート サイズ カラー 文字の設定 背景の設定 枠線の設定
 

  スタイルシートの記述場所と優先順位

ホームページのレイアウトや書式はCSSで記述するとキレイで見やすいホームページを作ることが出来ます。 このサイトは初心者でもすぐに使えるCSSということを目的としていますので書式に絞ったCSSパーツの配布と解説をしています。
はじめにスタイルシートとは?といったとうなことに関して触れておきます。 ホームページにスタイルを適用する方法には3種類あります。

まず外部スタイルシートファイルを作りそこにCSSを記述する方法があります。
もっとも一般的な方法であり、全てのHTMLファイルに対して適用できるというメリットがあります。

次にHTMLの<head>内に記述する方法があります。
その記述したHTMLファイル内のみに適用できます。1ページだけのホームページやこのページだけ全体の設定とは変えたいというときに使います。 設定が外部スタイルシートファイルと重なってもこちらに記述したスタイルが優先されます。

最後にHTMLの各タグに直接記述する方法です。
あるページのある部分にだけスタイルを適用したいときに使います。 例えばこの文字だけ色を赤くしたいとか、サイズを大きくしたいなど。スタイルの優先度は一番高く、前述2つの方法で設定したスタイルと重なっても こちらの方法で記述したスタイルが優先されます。

 

  スタイルシートの適用方法

@.外部スタイルシートファイルに記述する

外部スタイルシートファイルの作り方は非常に簡単でメモ帳を開いて左上のファイルから名前を付けて保存を選択しファイル名をstyle.css として保存ボタンを押せば出来てしまいます。
ファイル名は拡張子cssであれば何でも構いません。
この拡張子cssのテキストファイルにCSSを記述していくという形です。
ただこのままではHTMLファイルに反映されませんのでHTMLファイルにこのページはstyle.cssファイルの書式を参照してますよ、という記述を入れてあげる必要があります。 それはHTMLファイルを開き上の方にある<head>から</head>の間に<link rel="stylesheet" href="style.css" type="text/css">という記述をしてあげます。 hrefはリンクなのでリンク先のファイル、つまり外部スタイルシートのファイル名を記述します。 簡単に記述すると

 <html>
 <head>
 <link rel="stylesheet" href="style.css" type="text/css">
 </head>
 <body>

このような形になればOKです。

A.HTMLの<head>内に記述する

<head>内に記述するには適用させたいHTMLファイルを開いて同じように<head>から</head>の間に

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

と記述して<!-- と -->の間にCSSを記述していくという形です。 例を記述すると

 <html>
 <head>
 <style type="text/css">
 <!--
 body {color:#000000;
     background-color:#ffffff;
     font-size:11px;}
 -->
 </style>
 </head>
 <body>

このような形になればOKです。

B.各タグに直接記述する

適用させたい箇所の開始タグにstyle="属性:値;"という風に記述します。 たとえば

 <span style="color:#ff0000;">適用させたい箇所</span>や
 <div style="background-color:#ffff00;">適用させたい箇所</div>や
 <p style="font-weight:bold;">適用させたい箇所</p>や
 <h2 style="font-size:22pt;">適用させたい箇所</h2>

などのような形で記述していきます。スタイルを直接タグに記述するので「ここにスタイルを記述しますよ」といった 前述2つの方法のような但し書きは必要ありません。 配布しているパーツメニューのdivとspanはこちらのタイプのものになります。



Copyright © 2009 CSSパーツテンプレート All rights reserved.