HOME

スタイルシート

カスタマイズのためにスタイルシートの構造を分析しました。

Movable　Typeではデザイン（ホームページの装飾）はCSSを利用しています。CSSとはCascading Style Sheets　の略でWebデザインを詳細に設定するための技術です。HTMLからデザイン的な設定を分離する目的で使われます。
※ここではMovable　Typeの標準で使われているCSSがわかるだけの範囲で説明します。

■基本的な定義方法
CSSでは「セレクタ」「属性」「値」の３つを組み合わせて定義します。
　セレクタ　スタイルを適用する対象
　属性　適用するスタイルシートの種類
　値　種類に対しての値

実際の入力は

セレクタ｛
属性：値；
属性：値；
｝

となります。

■セレクタの種類
１．HTMLタグに適用する

<>･･･</>に適用

h1{

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<h2>AIUEO</h2>
</body>
<html>

※Movable　TypeのCSSで h1,h2,h3{ } という箇所がありますがこれはh1{ } h2{ } h3{ } と同じ意味になり、同じスタイルを設定するということです。

２．ページ内の一箇所にのみスタイルを適用する

#id名{ }　セレクタの前に　#　をつけてあらわします

#banner{

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<div id="banner">アイウエオ</div>
<h2>AIUEO</h2>
</body>
<html>

セレクタ内の特定の要素に適用

#banner h3{

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<div id="banner">
<h2>AIUEO</h2>
<h3>aiueo</h3>
<h2>０１２３４</h2>
<h3>01234</h3>
</div>
</body>
<html>

特定の要素だけに有効なセレクタ

div[id="banner"] {

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<div id="banner">アイウエオ</div>
<div>AIUEO</div>
</body>
<html>

３．ページ内の複数の箇所に対して適用する

.class名{ }　セレクタの前に　.　をつけてあらわします

.content{

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<div class="content">アイウエオ</div>
<h2>AIUEO</h2>
<p class="content">aiueo</p>
</body>
<html>

セレクタ内の特定の要素に適用

.content h3{

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<p class="content">アイウエオ</p>
<h2>AIUEO</h2>
<div class="content"><h3>aiueo</h3></div>
</body>
<html>

特定の要素だけに有効なセレクタ

div.content{

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<div class="content">アイウエオ</div>
<div>AIUEO</div>
<p class="content"><h3>aiueo</h3></p>
</body>
<html>

４．閲覧者の操作に応じて適用する

要素名：擬似クラス名であらわします

a:hover {

}
この場合はリンク部分にカーソルを重ねたときにスタイルが設定されます。

HTMLソース

<html>
<body>
<a href="index.html">あいうえお</a>
</body>
<html>

Movable　TypeのCSSでは他に　a:link　（まだ訪れていないリンクのスタイル）、a:visited　（すでに訪れたリンクのスタイル）、a:active　（クリックした際のスタイル）が使用されています。

５．１と２と３を組み合わせた適用

.content p.posted {

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<div class="content">
<div>AIUEO</div>
<p class="posted">アイウエオ</p>
<p>aiueo</p>
</div>
</body>
<html>

.sidebar #categories p{

}

HTMLソース

<html>
<body>
<h1>あいうえお</h1>
<div class="sidebar">
<div id="categories">
AIUEO
<p>aiueo</p>
</div>
</div>
</body>
<html>

.sidebar ul ul {

}

HTMLソース

<body>
<h1>あいうえお</h1>
<div class="sidebar">
<ul>
<li>アイウ
<li>エオ
<ul>
<li>かきく
<li>けこ
</ul>
sasi
</ul>
</div>
</body>
<html>

styles-site.cssの解析

body {
bodyタグ

margin: 0px 0px 20px 0px;
余白　上0px　右0px　下20px　左0px

background-color: #8FABBE;
背景色　（■）

text-align: center;
テキスト水平位置（中央寄せ）

}

a {
aタグ

text-decoration: underline;
テキストの装飾　下線　（あ）

}

a:link {
リンク:まだ訪れていないリンクのスタイル

color: #8FABBE;
テキストの色（■）

}

a:visited {
リンク:すでに訪れたリンクのスタイル

color: #8FABBE;
テキストの色（■）

}

a:active {
リンク:クリックした際のスタイル

color: #8FABBE;
テキストの色（■）

}

a:hover {
リンク:カーソルが重なったときのスタイル

color: #006699;
テキストの色（■）

}

h1, h2, h3 {
h1,h2,h3タグ

margin: 0px;
他のボックスとの間隔

padding: 0px;
ボックスと要素の間隔

font-weight: normal;
フォントの太さ（普通）

}

#container {
container idセレクタ

line-height: 140%;
行間を設定（140%）

margin-right: auto;
右の余白（自動設定）

margin-left: auto;
左の余白（自動設定）

text-align: left;
テキストの水平位置（左寄せ）

padding: 0px;
ボックスと要素の間隔（なし）

width: 700px;
ボックス横幅（700px）

background-color: #FFFFFF;
背景色（白）

border: 1px solid #FFFFFF;
ボックスの枠線（線の太さ-1px、線種-実線、色-白）

}

#banner {
banner idセレクタ

font-family: Verdana, Arial, sans-serif;
フォントの指定

color: #FFFFFF;
テキストの色（白）

background-color: #999999;
バックの色（■）

text-align: left;
テキストの水平位置（左寄せ）

padding: 15px;
ボックスと要素の間隔（15px）

border-bottom: 1px solid #FFFFFF;
ボックスの下枠線（線の太さ-1px、線種-実線、色-白）

height: 39px;
高さ

}

#banner-img {
banner-img idセレクタ

display: none;
要素を非表示にする

}

#banner a {
banner idセレクタ内のaタグ

color: #FFFFFF;
テキストの色（白）

text-decoration: none;
テキストの装飾（なし）※リンク部分は通常下線がありますがこの場合は無くなります。

}

#banner h1 {
banner idセレクタ内のh1タグ

font-size: xx-large;
フォントのサイズ（<font size="7">相当）

}

#banner h2 {
banner idセレクタ内のh2タグ

font-size: small;
フォントのサイズ（<font size="3">相当）

}

#center {
center idセレクタ

float: left;
ボックスの位置を指定（左）：左側から順番に#rightと二列に並ぶようになります。（#right にも同じ設定があります。）

width: 500px;
ボックスのサイズ（500px）

overflow: hidden;
内容が収まらないとき（隠す）

}

.content {
content classセレクタ

padding: 15px 15px 5px 15px;
ボックスと要素の間隔（上15px　右15px　下5px　左15px）

background-color: #FFFFFF;
背景色（白）

color: #666666;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

}

#right {
right idセレクタ

float: left;
ボックスの位置を指定（左）：左側から順番に#centerと二列に並ぶようになります。（#center にも同じ設定があります。）

width: 200px;
ボックスのサイズ（200px）

background-color: #FFFFFF;
背景色（白）

overflow: hidden;
内容が収まらないとき（隠す）

}

.content p {
content classセレクタ内のpタグ

color: #666666;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

font-weight: normal;
フォントの太さ（普通）

line-height: 150%;
行間（150%）

text-align: left;
テキストの水平位置（左寄せ）

margin-bottom: 10px;
下の余白（10px）

}

.content blockquote {
content classセレクタ内のblockquoteタグ

line-height: 150%;
行間（150%）

}

.content li {
content classセレクタ内のliタグ

line-height: 150%;
行間（150%）
}

.content h2 {
content classセレクタ内のh2タグ

color: #666666;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

text-align: left;
テキストの水平位置（左寄せ）

font-weight: bold;
テキストの太さ（太い）

margin-bottom: 10px;
下の余白（10px）

}

.content h3 {
content classセレクタ内のh3タグ

color: #666666;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: small;
フォントのサイズ<font size="3">に相当

text-align: left;
テキストの水平位置（左寄せ）

font-weight: bold;
テキストの太さ（太い）

margin-bottom: 10px;
下の余白（10px）

}

.content p.posted {
content classセレクタ内のpタグのスタイルposted　classセレクタ

color: #999999;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

border-top: 1px solid #999999;
ボックスの上枠線（線の太さ-1px、線種-実線、色-■）

text-align: left;
テキストの水平位置（左寄せ）

margin-bottom: 25px;
下の余白（25px）

line-height: normal;
行間（普通）

padding: 3px;
ボックスと要素の間隔（3px）

}

.sidebar {
sidebar classセレクタ

padding: 15px;
ボックスと要素の間隔（15px）

}

#calendar {
calendar idセレクタ

line-height: 140%;
行間（140%）

color: #666666;テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

padding: 2px;
ボックスと要素の間隔（2px）

text-align: center;
テキストの水平位置（中央寄せ）

margin-bottom: 30px;
下の余白（30px）

}

#calendar table {
calendar idセレクタ内のtableタグ

padding: 2px;
ボックスと要素の間隔（2px）

border-collapse: collapse;
セルのボーダーを重ねて表示

border: 0px;
線の太さ（0px）

width: 100%;
テーブルの幅（100%）

}

#calendar caption {
calendar idセレクタ内のcaptionタグ

color: #666666;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

text-align: center;
テキストの水平位置（中央寄せ）

font-weight: bold;
テキストの太さ（太い）

text-transform: uppercase;
英文すべてを大文字にする

letter-spacing: .3em;
文字の間隔（3em）

}

#calendar th {
calendar idセレクタ内のthタグ

text-align: center;
テキストの水平位置（中央寄せ）

font-weight: normal;
テキストの太さ（普通）

}

#calendar td {
calendar idセレクタ内のtdタグ

text-align: center;
テキストの水平位置（中央寄せ）

}

.sidebar h2 {
sidebar classセレクタ内のh2タグ

color: #666666;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

text-align: center;
テキストの水平位置（真中寄せ）

font-weight: bold;
テキストの太さ（太い）

text-transform: uppercase;
英文すべてを大文字にする

letter-spacing: .3em;
文字の間隔（3em）

}

.sidebar ul {
sidebar classセレクタ内のulタグ

padding-left: 0px;
ボックスと要素の左側の間隔（0px）

margin: 0px;
余白（0px）

margin-bottom: 30px;
下の余白（30px）

}

.sidebar ul ul {
sidebar classセレクタ内のul ulタグ

margin-bottom: 0px;
下の余白（0px）

}

.sidebar #categories ul {
sidebar classセレクタ内のcategories idセレクタ内のulタグ

padding-left: 15px;
ボックスと要素の左間隔（15px）

}

.sidebar li {
sidebar classセレクタ内のliタグ

color: #666666;
テキストの色（■）

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

text-align: left;
テキストの水平位置（左寄せ）

line-height: 150%;
行間（150%）

margin-top: 10px;
上の余白（10px）

list-style-type: none;
リストマーク（なし）

}

.sidebar #categories li {
sidebar classセレクタ内のcategories idセレクタ内のliタグ

list-style-type: circle;
リストマーク（○）
}

.sidebar img {
sidebar classセレクタ内のimgタグ

border: 3px solid #FFFFFF;
ボックスの枠線（線の太さ-3px、線種-実線、色-白）
}

.photo {
photo classセレクタ

text-align: left;
テキストの水平位置（左寄せ）

margin-bottom: 20px;
下の余白（15px）

}

.link-note {
link-note classセレクタ

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

line-height: 150%;
行間（150%）

text-align: left;
テキストの水平位置（左寄せ）

padding: 2px;
ボックスと要素の間隔（2px）

margin-bottom: 15px;
下の余白（15px）

}

#powered {
powered idセレクタ

font-family: Verdana, Arial, sans-serif;
フォントの種類

font-size: x-small;
フォントのサイズ<font size="2">に相当

line-height: 150%;
行間（150%）

text-align: left;
テキストの水平位置（左寄せ）

color: #666666;
テキストの色（■）

margin-top: 50px;
上の余白（50px）

}

#comment-data {
comment-data idセレクタ

float: left;
ボックスの位置を指定（左）

width: 180px;
ボックスの幅（180px）

padding-right: 15px;
ボックスと要素の右側の間隔（15px）

margin-right: 15px;
右側の余白（15px）

text-align: left;
テキストの水平位置（左寄せ）

border-right: 1px dotted #BBB;
ボックスの枠線右側（線の太さ-1px、線種-点線、色-■）

}

textarea[id="comment-text"] {
textareaタグ内のcomment-text　idセレクタ

width: 80%;
フィールドの幅（80%）

}

.commenter-profile img {
commenter-profile classセレクタ内のimgタグ

vertical-align: middle;
テキストの垂直位置（中央寄せ）

border-width: 0;
線の太さ（0）※この場合は画像の回りの枠線を表示しない

}