マイスキンつくりたいな
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のみで「HTML編集」をデザインしてみる-1-(骨 
めざせマイスキン!ということでここ最近、スキンをコツコツいじっていました。が、基本のコードをいじると微妙にいろんなところが何故だかずれていきます。その度にテーブルのTDを増減させたり幅を変えたり。
が、思い出しました。最初のブログ(5/22)での私が吐いた言葉「時代はどんどん私の知らないうちに進化してデザイン的要素はオールCSSブラボーになっているみたい」。
そうだ…この際テーブルをなくしてしまおう…!
…いいのだろうか? 許されるのだろうか? そもそもテーブルなくして表示されるのだろうか?(たらり
数々の不安がめばえ、まず既存のエキサイトブログ提供スキンの中にテーブルを使用していないものはあるかみてみました。
…う、すべてテーブルを使用している。もしかしたらテーブルを崩してはいけない理由がある可能性大。
でもやってみようかしら。どきどき。
どうやって?(-_-;)
ごそごそ(CSSの本を読み読み)。…できるかも?;

というわけで今回骨組みだけつくってみました。単に<DIV>~</DIV>で囲って表示項目を並べています。
今書いているこのスキンでいじるとたいそう読みづらくなるので 別にIDをとり(※複数ID取得ってよくないかもしれません(>_<))、そこで試しています。
TOMOスキン01はこちらです
でもスキンは日ごとに変わっていくと思うので…この時点でのスクリーンショットはこちらです。

私が最初に選択した基本スキンは「C. 2列のレイアウト-左側にメニュー」なのでとりあえずそれを再現する形にしました。
下の図1は構造をエキサイトブログタグで表示したもの、図2はエキサイトブログタグについての説明ページに沿って差し替えたものです。
※図の四角い枠はそれぞれ<DIV ID=***>~</DIV>で囲っているところです。
※図の四角い枠にかかる青い太い文字はID名です。
※図とコードを照らし合わせたい方(いるのだろうか?)は図の上をクリックして下さいませ。別窓が開きます。
a0003861_13739.gif


左メニューの「HTML編集 序1」の図も併せて見ると分かりやすいかもしれません。
以下に今回使用したタグをコピペしました。
この後の調整が大変なんだろうな…。
いいや、ゆっくりやろふ…。

---------------------------------
■HTML編集■

※全体・左メニュー部・本文から構成されていますが、今は全体のみいじっています。

<DIV ID=ALL>

<DIV ID=TOP>
<$header$>
<$blogurl$>
<$adminmenu type=1$>
</DIV>

<DIV ID=LEFT>
<$logoimage type=1$>
<$description$>
<$nick$>
<$calendar type=1$>
<$menuleft$>
<$banner type=1$>
<$xml$>
</DIV>

<DIV ID=RIGHT>
<$post$>

<DIV ID=PAGE>
<$prepage type=1$>
<$nextpage type=1$>
</DIV>

</DIV>

<DIV ID=BOTTOM>
</DIV>

</DIV>

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

■CSS編集■

/* TOMO SKIN 01 */  

BODY {
    BACKGROUND: #FFF;
    COLOR: #000;
    MARGIN: 0PX;
    PADDING: 0PX;
    TEXT-ALIGN: CENTER;
    }

DIV#ALL {
    WIDTH: 700PX;
    PADDING: 0PX;
    MARGIN: 0PX AUTO;
    PADDING: 0PX;
    }

DIV#TOP {
    WIDTH: 700PX;
    HEIGHT: 120PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#LEFT {
    FLOAT: LEFT;
    WIDTH: 200PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#RIGHT {
    FLOAT: RIGHT;
    WIDTH: 500PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#PAGE {
    WIDTH: 100%;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

DIV#BOTTOM {
    WIDTH: 700PX;
    HEIGHT: 100PX;
    MARGIN: 0PX;
    PADDING: 0PX;
    }

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

早く寝なければ…。
[PR]
by tomo0640820 | 2004-06-14 01:38 | いざマイスキン
<< とりあえず骨に皮をかぶせる No.3「Greyheron&... >>