マイスキンつくりたいな
by tomo0640820
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
カテゴリ
目次
このサイトについて
とりあえずマイスキン
HTML編集 A
HTML編集 B
HTML編集 C
HTML編集 D
CSS編集 序1 明解編
CSS編集 序2 模索編
CSS編集の友
いざマイスキン
マイスキン人リンク(TB)
お便利サイト
以前の記事
2004年 10月
2004年 09月
2004年 08月
2004年 07月
2004年 06月
2004年 05月
お気に入りブログ
Feeling...感じ...
ちゃめ・家
【 d r o p s ...
FOOTBALL STYLE
ごはんですよ。
のらくら庵
ライムのブログ
流れ星の散歩道(^_-)-☆
極私的パパ馬鹿日誌
じゅん☆ブログ
発展途嬢
:..: めもにっき。:...
はい こちらサポセン。
+ music life +
Roller skate...
でも、がんばる!
Fan Fan Life...
トルコ旅日記
喜 怒 哀 楽
ぽっとの陽だまり研究室
MIURAKE
Brel et moi
Loophole
blueblueclub
恐悦至極に存じます。
しゃんくのつぶやき
しあわせの箱庭
ぱーむらいふ
超初心者一眼レフ日記。
私の人生、こんなもん 涙...
人生の地図
today's chan...
そんな目で見るなよ
雀屋だらだらday's
スラドット60
no name☆
日記はいつも三日坊主。
norah'#
3gatsu-USAGI
***amedama ...
My funny Val...
Bostonterrie...
たびcamera
お魚好きなねこ
MINT TIME
エキブロ外リンク
Anemosphere-Blog
TOMOのother sites
tomolatte
最新のトラックバック
表示/非表示のがたつき
from 華談 -St.Dorothe..
CSS&HTML / T..
from 日刊エキブロ新聞
リニューアル工事中。
from Too High Quali..
HTMLのテーブル
from † CrossMoon † ..
検索
人気ジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
カテゴリ:CSS編集 序1 明解編( 1 )
「CSS編集」って…。
今回は「CSS編集」をさぐります。タイトルに「…」がついています。そう、気弱です。

CSSは P {font-size:11px} などのように「<P>のフォントサイズは11ピクセルにします」と指定されます。
ボックス(DIV)の場合ですとCLASS名やID名がつけられ、例えばHTMLで<DIV CLASS=abc>~</DIV>とあればCSSでDIV.abc{font:BOLD}というように記述され、「DIVの間のabcというクラス名がつけられている箇所のフォントは太字」となります。
しかし…。CSSを読んだらデフォルトのHTMLで指定されていないCLASS名が3分の2以上出現。
CLASS名がわからないとなると…名前の意味あいから推測したり実際CSSをいじって確認しなきゃならないのかしら?
わかりやすい箇所もありますし自分でやっている分にはそれでオーライですけどその私のあやふやな解釈をこのブログで公開するのって…間違い率高そうだし迷惑をおかけしたりして?

これに関してはexciteさんは「ここまでなら好きにして。でもこれ以上いじくりたいなら流れを汲んで自分で調べてん」というスタンスかしら?
それともなにかしら明快な方法があって…わたしがアッフォーなだけ?(T_T)

ぐちぐち言わないっ、TOMO。前に進むのよっ、がんばー。おー。
とりあえずCLASS名がHTMLで指定されている明解編をば…。

私の使用しているのは「C. 2列のレイアウト-左側にメニュー」タイプなのですがデフォルトのCSSはこちらに置いてみました。
クリックすると別窓が開いて参照できます。順にナンバリングしました。
※別窓を見ることは出来ますが、このページ内に同時記入することにしました[2008.1.7]
明解編はこの1~21、24,25です。

※この文を書いている時点(2004.5.30)でのデフォルト画面のスクリーンショットはこちらです。ちと重め55kbです。
※左メニューの「HTML編集 C」にある図も参照するとわかりやすいかもしれません。
※色指定は見た感じの色で表現しています…。
※CSSをおわかりの方は以下のゆるい訳文(?)を読んで「頑張っているな…」と微笑んで下さい。
※私の環境はWindowsXP HomeEdition+IE6.0です。

  追 記 
項目名(セレクタ)は基本スキンABC共通です。
基本スキンDは17,18行が違います。17,18行の後は2行分増えるので、その後は21行→23行、22行→24行というふうに2行分ずつずれていきます。
属性値は各スキンによって違います(共通部分が多いですが)。

--------------------------------------------------


1 BODY
{ BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; }

BODY
{背景:白; マージン:0ピクセル; パディング:0ピクセル;}

2 BODY,TD,DIV,LI
{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #000; }

BODY,TD,DIV,LI
{フォントサイズ:小; フォントファミリー:VERDANA,ARIAL,SANS-SERIF; 行送り:150%; 文字色:黒;}

3 A:LINK
{ COLOR: #0000FF; TEXT-DECORATION: NONE; }

未訪問リンク
{文字色:青; テキスト装飾:なし;}

4 A:VISITED
{ COLOR: #0000FF; TEXT-DECORATION: NONE; }

訪問済みリンク 
{文字色:青; テキスト装飾:なし;}

5 A:ACTIVE
{ COLOR: #0000FF; TEXT-DECORATION: NONE; }

リンク部をクリックしたとき 
{文字色:青; テキスト装飾:なし;}

6 A:HOVER
{ COLOR: #813888; TEXT-DECORATION: UNDERLINE; }

リンク部分にマウスカーソルが乗ったとき 
{文字色:紫; テキスト装飾:下線;}

a0003861_134581.gif


※7-15は上の図の「上部」です

7 DIV.HEADER
{ FONT : BOLD LARGE/100% Courier New,TAHOMA; TEXT-ALIGN:LEFT;}

ヘッダー(タイトルの「めざせマイスキン」部分) 
{フォント:太字,大きめ/100%,Courier New,TAHOMA; テキストの水平位置:左寄せ;}
※ここでの「%」数値は行送り(1行の高さ)です

8 DIV.HEADER A:LINK
{ COLOR: #000; TEXT-DECORATION: NONE; }

ヘッダーのリンク 
{文字色:黒; テキスト装飾:なし;}

9 DIV.HEADER A:VISITED
{ COLOR: #000; TEXT-DECORATION: NONE; }

ヘッダーの訪問済みリンク 
{文字色:黒; テキスト装飾:なし;}

10 DIV.HEADER A:HOVER
{ COLOR: #888; TEXT-DECORATION: NONE; }

ヘッダーのリンク部にマウスカーソルが乗った場合 
{文字色:黒; テキスト装飾:なし;}

11 DIV.URL
{ FONT : X-SMALL/100% VERDANA,TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:LEFT;}

URL(「tomomap.exblog.jp」部分) 
{フォント:かなり小さく/100%,VERDANA,TAHOMA; マージン:上は10ピクセル,左右は0ピクセル,下は20ピクセル; テキストの水平位置:左寄せ:}

12 DIV.USERMENU
{ FONT : 8PT/100% VERDANA; TEXT-ALIGN : RIGHT; MARGIN-BOTTOM : 7PX; }

ユーザーメニュー(「センター | 投稿 | 設定 」部分) 
{フォント:8ポイント/100%,VERDANA; テキストの水平位置:右寄せ; 下のマージン:7ピクセル;}

13 DIV.USERMENU A:LINK
{COLOR: #727272; TEXT-DECORATION: NONE}

ユーザーメニューのリンク 
{文字色:灰色; テキスト装飾:なし;}

14 DIV.USERMENU A:VISITED
{COLOR: #727272; TEXT-DECORATION: NONE}

ユーザーメニューの訪問済みリンク 
{文字色:灰色; テキスト装飾:なし;}

15 DIV.USERMENU A:HOVER
{COLOR: #98A6E4; TEXT-DECORATION: UNDERLINE;}

ユーザーメニューのリンク部にマウスカーソルが乗った場合 
{文字色:灰色がかった水色; テキスト装飾:なし;}


※16-19は上の図の「左部」です。

16 DIV.PROFILE
{ WIDTH : 150PX; PADDING : 0PX 0PX 10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:LEFT;}

プロフィール(ロゴ画像「めざせマイスキン」、説明部「マイスキンつくりたいな」 ID部「by tomo0640820 」) 
{幅:150ピクセル; パディング:上0ピクセル,左右0ピクセル,下10ピクセル; 行送り:130%; オーバーフロー時:表示しない; テキストの水平位置:左寄せ;}

17 DIV.MN
{ TEXT-ALIGN:LEFT; }

メニュー(カテゴリ、以前の記事、エキサイトブログ、最新のコメント等) 
{テキストの水平位置:左寄せ;}

18 DIV.MNTTL
{ WIDTH : 150PX; BORDER-BOTTOM : 1PX #AAA SOLID; PADDING : 2PX 0PX 0PX; MARGIN : 25PX 0PX 10PX; }

メニューのタイトル部分 
{幅:150ピクセル; 下のボーダーライン:1ピクセル,薄めの灰色,実線; パディング:上は2ピクセル,左右は0ピクセル,下は0ピクセル; マージン:上は25ピクセル,左右は0ピクセル,下は10ピクセル;}

19 DIV.MEMOBODY
{ WIDTH : 150PX; OVERFLOW : HIDDEN; }

メモ帳の本文 
{幅:150ピクセル; オーバーフロー時:表示しない;}

※20-25は上の図の「メイン」です。

20 DIV.POST
{ MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;}

投稿全体(投稿文のタイトルからコメントまで) 
{下のマージン:50ピクセル; テキストの水平位置:左寄せ;}

「BORDER:1PX SOLID #FF0000;」(=「ボーダー:1ピクセル 実線 赤;」です)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。('04.11.25追記)

a0003861_136528.gif


21 DIV.POST_HEAD
{ BORDER-BOTTOM : 1PX #CCC SOLID; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }

投稿のヘッダー部(タイトルと「編集 | 削除」メニュー) 
{下のボーダーライン:1ピクセル,より薄めの灰色,実線; 下のマージン:15ピクセル; 下のパディング:3ピクセル;}

「BACKGROUND-COLOR: #FFFF00;」(=「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。

a0003861_1364216.gif


24 DIV.POST_BODY
{ LINE-HEIGHT : 150%; WIDTH : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }

投稿文 
{行送り:150%; 幅:500ピクセル; 下のマージン:30ピクセル; オーバーフロー時:表示しない;}

「BACKGROUND-COLOR: #FFFF00;」(=「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。

a0003861_137983.gif


['05.04.20追記]
「DIV.POST_BODY」は「以前の記事」の「○年○月」を選択した時に表示されるページにも反映されます。
表示されるページの上部にある月の記事タイトル一覧の部分です。

「BACKGROUND-COLOR: #FFFF00;」(=「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
当ブログの2004年09月の分です。(画像は縮小されています)



25 DIV.POST_TAIL
{ FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

投稿の末尾あたり(作成者、登録日、パーマリンク、トラックバック、コメント) 
{フォント:11ピクセル/150%,TAHOMA; 上のマージン:10ピクセル; テキストの水平位置:右寄せ;}

「BACKGROUND-COLOR: #FFFF00;」(=「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。

a0003861_1372954.gif

※20,21,24,25の水色線部分は'04.11.25に追記。
[PR]
by tomo0640820 | 2004-05-30 10:21 | CSS編集 序1 明解編