CSS辞典-概要

文章の見栄え(レイアウトやデザイン)に関する情報を、文章の内容や構造とは別に定義する概念をスタイルシートといいます。スタイルシートには色んな作成方法があります。ここではよく使うスタイルシートをまとめてありますので、組み合わせでオシャレなデザインに作成していきましょう。

CSS(スタイルシート)辞典-概要

CSSの基本

スタイルシートの基本的な書式は下記の図のように「どこの何をどうする」

CSS書式イメージ

のように書いていきます。

Top

スタイルシートの内容と書き方

スタイルシートはxhtml内に書く方法とスタイルシートファイルを作りそのファイルをxhtmlに外部スタイルシートで読み込む方法があります。一般的には外部スタイルシートで読み込む方法がメジャーで管理しやすいと思います。xhtmlに書き入れる場所は<head>~</head>内に書きます。下記はxhtml内に書く方法と外部スタイルシートのサンプルです。

例:xhtml内に書くサンプル
<head>
<style type="text/css">
.jyouge {
	text-decoration: underline overline;
}
中省略
</style>
</head>

外部スタイルシートでは最初に使う文字の規格を書き、後は単純に使うスタイルシートを記入するだけです。サンプルは “utf-8″の文字の規格です。外部スタイルシートを保存するときの名前は、例:style.cssとファイルの形式が(css)で保存します。

例:外部スタイルシートのサンプル
@charset "utf-8";
.jyouge {
	text-decoration: underline overline;
}

外部スタイルシートで保存したときは、そのファイルをxhtml内に書きいれます。xhtmlタグ辞典でも説明してありますが、<head>~</head>内に外部スタイルシートファイルのアドレスを記入します。下記はサンプルですので、サーバーのアップロードした場所によって変わってきますので場所によって変更して下さい。

<head>
<link rel="stylesheet" href="http://detarame.moo.jp/wp/wp-content/themes/whbk5/style.css" type="text/css" />
</head>

Top

最終更新日: 2013年2月10日