忍者ブログ
節約主婦目線の雑学やお得情報、思いなどをつづります。 少しでも役に立つ情報をお届けします。

左向矢印
06
  • 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
  • 右向矢印
  • [PR]


    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


    「幅固定 3カラム」のサイズ変更


    幅固定 3カラムのブログテンプレートの

    横幅を変えたい時の、サイズ指定の計算方法の覚え書きです。
     



    #wrapper内の、「width:」の数値の求め方
     (#wrapper = 左と真ん中のBOXを纏めるためのBOXです。
      違う単語が使われている場合もあります 例えば、#center-left など)

     ※左BOXを「#A」、真ん中のBOXを「#B」 (右のBOXを「#right」) とします。

    #A#Bの「width:」の数値)
     +(#A#Bの「padding-left:」と「margin-left:」の数値)
     +(#A#Bの「padding-right:」と「margin-right:」の数値)
     + どこかの余白スペース幅(指定方法によって異なる)

    例) 全体の横幅は、1000pxとします

    #wrapper {
        width: 770px;
       float: left;
    }

    #A{
       float:right;
       width: 200px;
       padding-right:20px;
    }

    #B{
       float:right;
       width:540px;
    }

    #right{
       float:left;
       width: 200px;
       padding-left: 20px;
    }

     200px + 20px + 540px + 10px = 770px

    この例の場合の余白スペース幅(10px)は、右端の分になります。

    左端スペース  10px
      左BOX    200px
    左中スペース  20px
      真ん中BOX  540px
    右中スペース  20px
      右BOX    200px
    右端スペース  10px
    全体の横幅   1000px


    まず、#wrapperの存在に気付けないと、
    どうしてもグチャグチャになっちゃうんですよね

    padding と margin は、使われていないこともあります。

    余白スペース幅がどこの物かは、何回かプレビューなどで試せばどこか解ると思います。
     
    戻る HOME 進む

    コメント
    お名前
    タイトル
    文字色
    URL
    コメント
    パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
    非公開コメント
    [38]  [37]  [36]  [35]  [34]  [33]  [32]  [31]  [30]  [29]  [28
    ソーシャルボタン
    リンク
    Amazon
    楽天市場



    参加サイト ↓ (please click!)

    SEO



    ブログランキング・にほんブログ村へ



    最新コメント



        ◆ graphics by アンの小箱 ◆ designed by Anne ◆

        忍者ブログ [PR]
        忍者ブログ広告
    PR