jQuery UI CSS Framework を使ってみる(角丸モジュール編)

角丸のモジュールを作るときも、jQuery UI CSS Frameworkを使えば簡単です。
サンプルは↓
モジュールタイトル
ああああああああああああ
ああああああああああああ
ああああああああああああ

コードは↓
<div style="border: 1px solid #000" 
  class="ui-corner-all">
  <div style="border-bottom:1px solid #000;padding-left:10px;">
    モジュールタイトル
  </div>
  <div>
    <div style="padding-left: 10px;">
      ああああああああああああ
    </div>
    <div style="padding-left: 10px;">
      ああああああああああああ
    </div>
    <div style="padding-left: 10px;">
      ああああああああああああ
    </div>
  </div>
</div>

ポイントは、
  • divタグで囲む。クラスにui-corner-allを指定する。
  • ↑のdivタグに、borderスタイルを指定する(border:1px solid 好きな色、など)
  • ↑のdivタグの中身を自由に記述する。

    • 今回は、中をdivで上下2つに分割し、上のdivにborder-bottomスタイルを指定することにより、モジュールタイトルのような見ためにした
    • border-bottomで指定する枠色は、外側で指定した枠色と同色にする
です。
めちゃめちゃ簡単に角丸モジュールができました。

人気の投稿