• このエントリーをはてなブックマークに追加
CSSでdiv毎に横幅を指定する方法
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

CSSでdiv毎に横幅を指定する方法

2013-02-17 18:09

    検証ブラウザ:Google Chrome

    <div class="nippon">
    <div class="tokyo">東京</div>
    <div class="kanagawa">神奈川</div>
    <div class="osaka">大阪</div>
    <div class="nagoya">名古屋</div>
    </div>



    div.tokyo{
    background-color:lightpink;
    border: 4px solid #0000FF;
    width:50px;
    }

    div.kanagawa{
    background-color:lightskyblue;
    border: 4px solid #FF0000;
    width:100px;
    }

    div.osaka{
    background-color:green;
    border: 4px solid #000000;
    width:200px;
    }

    div.nagoya{
    background-color:aqua;
    border: 4px solid #999999;
    width:400px;
    }

    div.nippon{
    background-color:yellow;
    display: -webkit-box; /* Safari,Google Chrome用 */  
    -webkit-box-orient:horizontal;
    }


    横幅は width で指定する。

    サンプルソース

    東京ウェブ制作
    チャンネル会員ならもっと楽しめる!
    • 会員限定の新着記事が読み放題!※1
    • 動画や生放送などの追加コンテンツが見放題!※2
      • ※1、入会月以降の記事が対象になります。
      • ※2、チャンネルによって、見放題になるコンテンツは異なります。
    ブログイメージ
    東京ウェブ制作ブロマガ
    更新頻度: 不定期
    最終更新日:
    チャンネル月額: ¥550 (税込)

    チャンネルに入会して購読

    コメントを書く
    コメントをするにはログインして下さい。