• css3

    段組みレイアウト

    2012/09/06

    css3を使ってカラムレイアウトの指定。

    txt6.png

    段組みレイアウトはひとつの要素内でのカラム数を指定するものです。

    tableもfloatも使わずにカラムレイアウトを実現できます!

     

    例えば、<p></p>で囲み、borderをつけたテキスト。

    txt-1.png

    通常はこのように表示されますが、この中身のカラム数を指定することができます。

     

    書き方

    
    -webkit-column-count: カラム数;
    
    

     

     

    2カラム

    txt02.png

    
    -webkit-column-count: 2;
    
    

     

    3カラム

    txt3.png

    
    -webkit-column-count: 3;
    
    

     

     

    カラム幅の設定

     

    書き方

    
    -webkit-column-width: カラム幅(実数値+単位);
    
    

     

    これは実数値+単位で設定しますが、状況によって指定したものより広くなったり狭くなったりします。

    なので、だーいたい!この幅で!って感じですかね。
    レイアウトを見て最適な幅を指定しましょう。

     

    ちなみに100pxで設定した場合はこんな感じ

    txt4-1.png

    
    -webkit-column-width: 100px;
    
    

     

     

    カラム間の幅の設定

     

    書き方

    
    -webkit-column-gap: カラム間隔(実数値+単位);
    
    

     

    カラム数2、カラム間100px

    txt5.png

    
    -webkit-column-count: 2;
    -webkit-column-gap: 100px;
    
    

     

     

    カラム間の境界線の設定

     

    書き方

    
    -webkit-column-rule: 幅 線の種類 色;
    
    

    指定の仕方はborderと一緒です。

     

    カラム数2、境界線(2px 点線 赤)

    txt6.png

    
    -webkit-column-count: 2;
    -webkit-column-rule: 2px dotted #f00;
    
    

     

    なんか本みたいですねー!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back