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で指定する枠色は、外側で指定した枠色と同色にする

です。
めちゃめちゃ簡単に角丸モジュールができました。