divideプラグインの使い方

ページ名:divideプラグインの使い方

基本表記とプラグインの機能について

#divide(オプション){文字列}

要素を指定した比率で分割するプラグインです。指定したパラメーターで装飾することができます。
パラメーターはカンマ(,)区切りで記述してください。
クラスについて詳しく知りたい場合は、TAG INDEX クラス名を使った指定をご参考ください。


{}で囲まれた要素を子要素として扱い、直下要素を分割対象として扱います。
直下要素の数よりも分割指定の数字の数が少ない場合、足りない分だけ表示されなくなります。


{}で囲まれた要素がない場合、オプションで指定された分だけwidth指定された空のdivタグが生成されます。
CSSカスタマイズを併用すると使用例のような特殊な使い方ができると思います。
CSSカスタマイズは「管理画面」→「デザイン設定」→「CSSカスタマイズ(上級者向け)」から記述することができます。


パラメータ一覧

パラメータ説明
数字子要素の分割比率を指定します。(2個のdivを1対2の割合で分割したい場合は、1,2と指定)
width=数字分割したい要素の横幅を指定します。数字またはpx,%による指定ができます。
height=数字分割したい要素の縦幅を指定します。数字またはpx,%による指定ができます。
class=クラス名クラスに指定できる文字列

表示例1:div要素を1対2で並べる場合

#divide(1,2){{
    #divclass(divide01){
        #divclass(uk-text-center){
            1つ目要素上
        }

        #divclass(uk-text-right){
            1つ目要素下
        }
   }
   #divclass(divide02){
       2つ目要素
   }
}}

1つ目要素上


1つ目要素下

2つ目要素


※分割がわかりやすいようにcssを使って背景色をつけています。プラグインを使うだけでは色は付きません。


使用例2-1:{}による指定がない場合

#divide(1,1,1,class=gauge1)

CSSカスタマイズに記述したCSS

.gauge1{height:30px;width:100%;}
.gauge1 div:nth-child(1){ background-color: green;}
.gauge1 div:nth-child(2){ background-color: yellow;}
.gauge1 div:nth-child(3){ background-color: red;}

使用例2-2:モンハンゲージ風

#divide(3,1,1,1,2,class=gauge2 uk-margin-right,width=100px,height=20px)
#divide(1,1,1,2,3,class=gauge2,width=100px,height=20px)

CSSカスタマイズに記述したCSS

.gauge2 div:nth-child(1){ background-color: #3366cc;}
.gauge2 div:nth-child(2){ background-color: #66cc33;}
.gauge2 div:nth-child(3){ background-color: #fff000;}
.gauge2 div:nth-child(4){ background-color: #ff9900;}
.gauge2 div:nth-child(5){ background-color: #ff0000;}

<< 利用できるwiki記法リストに戻る