ROでの指弾モンク生活を中心としたヘタレの雑記。
ブログトップ | RSS
よろずぬし
にょわっ!(-w-)ノ
最近専らRO日記ですな
* RO-Information *
 Lydia 鯖
 指弾阿修羅型モンク
そろそろ
趣味装備が
欲しいわん .
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
カテゴリ:スキンの豆( 4 )
DIVの幅指定のこと。(高さも同様よ
以前、『良く使うCSS2』にて、
  (( 参考図 ))
a0034981_9543137.gif
こんな図で説明したんですが。
実はウソッパチでした!!

≪ っていうか ≫<More..>
[PR]
by sina_s | 2004-11-12 17:53 | スキンの豆
良く使うCSS2
( ※注意※ )
あくまで私が良く使うものです
省略可な部分もあるのでいろいろ試してください。
鵜呑みしないように(怪
 ■DIVの隙間
  ・外側をあける
    Margin-Top : 上  Margin-Bottom : 下
    Margin-Left : 左  Margin-Right : 右
  ・内側をあける
    Padding-Top : 上  Padding-Bottom : 下
    Padding-Left : 左  Padding-Right : 右

  まとめて指定する時は共に、
    Margin : 上 右 下 左 と設定します。時計回りだぁね。
    :『 Padding : 1px 2px 3px 4px; 』

  全部同じ幅で指定する時は共に、
    Margin : 幅  と指定するだけ。楽ちん!
    :『 Padding : 5px; 』

  (( 参考図 ))
a0034981_9534564.gif


 □文字の書ける幅
    MarginはDIVの外が空き、Paddingは中が空く。
    だからMarginは空きを除いたWIDTHを指定します。

    例えば200pxの幅があって、ぐるりと5pxのMarginをとるなら、
     WIDTH :190px     MARGIN : 5px
    Paddingの場合は
     WIDTH :200px     PADDING : 5px
     (※ でも実際書ける幅は190)

  (( 参考図 ))
a0034981_9543137.gif

    どういう場合で使い分けるかというと、
    DIV枠にBorder指定をした時でしょうか。
    :『 DIV.POST { Border : 1px #000 Solid;
                Padding : 5px;
                Width : 200px; }
        とすると、200pxで書かれた黒枠の中に
        5px隙間の開いた文章表示が出来るわけ。

    :『 DIV.POST { Border : 1px #000 Solid;
                Margin-Bottom : 5px;
                Padding : 5px;
                Width : 200px; }
        とすると、上記DIVを繰り返して表示した時に、
        間が5px開くという事です。

  う~ん。文章で書くのは説明しづらい・・・。(纏めるのは苦手なんだよぅ→逃
[PR]
by sina_s | 2004-08-20 10:01 | スキンの豆
CSSで設定する時のCLASS名一覧
( ※注意※ )
全部じゃないです。私が使ったり調べて出てきたもののみ
なんとなーく見出しメニュー内容に並んでる感じ?(聞くな

<■:固定のもの>
<□:ユーザー設定だけど共通?なもの(何>
□ ≪DIV.HEADER≫   <$header$> ブログ名
□ ≪DIV.URL≫      <$blogurl$> ブログURL
□ ≪DIV.USERMENU≫           ユーザーメニュー部
  ※<$adminmenu type=1$>カタカナ
  ※<$adminmenu type=2$>英語
  ※<$adminmenu type=3$>アイコン
□ ≪DIV.PROFILE≫       自己紹介外枠部
□ ≪DIV.PROFILE_TOP≫   自己紹介見出し部
□ ≪DIV.PROFILE_BODY≫  自己紹介部
<$description$>       ブログの説明
<$nick$>              ExciteID

<$calendar type=1$> カレンダー
■ ≪DIV.CAL_TOP≫    カレンダー見出し部
■ ≪DIV.CAL≫         カレンダー外枠部
■ ≪DIV.CAL_HEAD≫   カレンダー月部
■ ≪DIV.CAL_BODY≫   カレンダー日部
■ ≪DIV.CAL_BOTTOM≫ カレンダー下部
■ ≪.CAL≫       カレンダー文字
■ ≪.CAL_DAY≫   カレンダー平日見出し文字
■ ≪.CAL_SUN≫   カレンダー日曜見出し文字
■ ≪.CAL_SAT≫    カレンダー土曜見出し文字
■ ≪.CAL_TODAY≫ カレンダー本日文字
■ ≪.CAL_TR≫ 

<$menuleft$>
<$menuright$>

<$mntitle$>
<$mnbody$>

□ ≪IMG.LOGO≫         ロゴイメージ
<$logoimage type=1$>    ロゴイメージ
□ ≪DIVMNTTL,MNTTL_L,MNTTL_R≫ メニュータイトル部
□ ≪DIVMNBODY,MN,MN_L,MN_R≫  メニュー部
■ ≪DIV.XML≫     「XML | ATOM skin by [SkinCreater]」
■ ≪DIV.BANNER≫  「Exciteバナー」
  ※<$banner type=1$>背景白
  ※<$banner type=2$>背景黒
■ ≪.SMALL≫        最新のコメント投稿者名
■ ≪DIV.MEMOBODY≫ メモ帳部
■ ≪.kwd≫        ファインダーの検索キー部
※覚書き:ライフログは1件ずつPadding-Top:5px有り

<$post$ >
□ ≪DIV.POST≫ 
□ ≪DIV.POST_TOP≫    <$postdate$>記事見出し部
□ ≪DIV.POST_HEAD≫               記事ヘッダ部
□ ≪DIV.POST_TTL≫     <$postsubject$>記事タイトル部
□ ≪DIV.POST_BODY≫   <$postcont$>記事部
  ≪DIV.POST_BODY_SUB≫<$postcont$>記事部
□ ≪DIV.POST_ADMIN≫  <$postadmin type=1$>記事編集メニュー部
□ ≪DIV.POST_TAIL≫    <$posttail$ >記事投稿者名部
□ ≪DIV.POST_EM≫ 
■ ≪IMG.IMAGE_MID≫    画像中央設定時
■ ≪IMG.IMAGE_LEFT≫   画像中央設定時
■ ≪IMG.IMAGE_RIGHT≫  画像中央設定時

<$cmtjs$ >
■ ≪DIV.COMMENT≫       コメント・トラバ外枠部
■ ≪DIV.COMMENT_TAIL≫   コメント・トラバ投稿者名部
■ ≪DIV.COMMENT_BODY≫  コメント・トラバ記事部
■ ≪DIV.COMMENT_INPUT≫ コメント入力部
  ※内部に380px固定のテーブルが作られる
■ ≪TEXTAREA.TXTFLD≫    コメント入力フィールド
■ ≪DIV.TRACK_TOP≫     トラバURL部
■ ≪.TIME≫             記事by・トラバURL文字
■ ≪.AUTHOR≫          記事投稿者名
■ ≪DIV.COMMENT_LINE≫  トラバTOP下部

<$prepage type=1$ > 前ページ
<$nextpage type=1$ > 次ページ

追記<More..>
[PR]
by sina_s | 2004-08-06 14:07 | スキンの豆
良く使うCSSとか。
( ※注意※ )
あくまで私が良く使うものです
省略可な部分もあるのでいろいろ試してください。
鵜呑みしないように(怪

 ■背景の設定
  ・まとめて指定
   BackGround :
    [背景色] url([背景画像url]) [繰返指定] [固定指定] [左位置] [右位置];
   :『BackGround : #FFF url(sp.gif) no-repeat fixed 0px 0px;』
  ・色のみ指定
   BackGround-Color : [背景色];
  ※参考
   BackGround-Image / background-position / background-repeat

 ■文字の設定
  ・まとめて指定
   Font : [斜][スモールキャップ][太] [文字サイズ] [行間] [文字種類];
   :『Font : Bold 12px 150% "MS ゴシック";』
   ※[文字サイズ][文字種類]は省略不可
  ・太さのみ指定
   Font-Weight : [太];
  ・位置のみ指定
   Font-size : [文字サイズ];
  ・行間のみ指定
   Line-Height : [行間];
  ・文字種類のみ指定
   Font-Family : [文字種類];
  ・文字色の設定
   Color : [文字色];
  ・配置の設定
   Text-Align : [左右位置];
   Vertical-Align : [上下位置];
  ・文字飾りの指定
   Text-Decoration : [文字飾り];
   :『Text-Decoration : underline;』(下線付け)

 □リンクの設定(CSSではないけど参考に)
  A / リンク全ての既定設定
  A:Link / リンク文字への設定
  A:Visited / 訪れたことのあるページへのリンク文字の設定
  A:Active / 現在訪れようとしている(?)リンク文字の設定
  A:Hover / マウスカーソルが上に来た時の設定
  :『A { Cursor : CrossHair;  /*「+」カーソルになる。*/
        Text-Decoration : underline; }』リンク文字に下線がつく。
  :『A:Hover { Text-Decoration : none; }』
          リンクの上にカーソルが来ると下線が消える。
[PR]
by sina_s | 2004-08-05 16:06 | スキンの豆
  当ブログ内で使用されているRagnarokOnlineの画像について著作権は、
   Gravity、Lee Myoungjin氏、ならびにGungHoにあります。無断複製無断転載禁止。
  (C) 2004 Gravity Corp. & Lee Myoungjin (studio DTDS), All Rights Reserved.
  (C) 2004 GungHo Online Entertainment, Inc. All Rights Reserved.
カテゴリ
以前の記事
フォロー中のブログ
他 リンク
最新のトラックバック
アニバーサリー2
from 『BlancCasse』
悪魔の囁き・2
from やおよろず。
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
Created by Sina.