編集部からのお知らせ
(記事集)ニューノーマルで伸びる業界
「ニューノーマルとIT」新着記事一覧

書式設定可能なエディタも簡単に:強力AjaxライブラリYahoo! UI Library - (page 3)

沖林正紀

2007-09-21 12:30

追加したボタンに対するCSS設定

 ツールバーにボタンを追加した場合、それに対してCSSによる設定が必要になる。具体的には、ボタンの枠線をダブらせない、ボタンに表示させるアイコン、ボタンのクリック後に表示させる部分、の3つが必要になる。

 特に重要なのは、ボタンに設定した値(value)と同じ値をCSSにも記述しなくてはならないことだ。たとえばボタンにcustom1という値を設定したら、アイコンの設定では.yui-toolbar-custom1というクラス名を記述しなくてはならない。また、ボタンのクリック後に表示される部分には同じ値のIDが設定されるので、それに対して色や枠線の有無などを設定しなくてはならない。

 ツールバーにボタンを追加する際には、JavaScriptとCSSの設定とがうまく連携しているかに注意してコーディングしていただきたい。

リスト4 追加したボタンに対する設定(CSS)(例)

<style>
  /* ボタンの枠線がダブらないようにする */
  .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertimage {
      border-right: none;
  }
  /* ボタンにアイコンを表示させる */
  .yui-skin-sam .yui-toolbar-container .yui-toolbar-custom1 span.yui-toolbar-icon {
    margin : 0px;
    padding : 0px;
    background-image: url( アイコンのファイル名 );
    background-position: 1px 0px;
  }
  /* クリック後に表示される部分 */
  #custom1 {
    background-color : #00FFCC;
    padding : 3px;
    font-weight : bold;
    border-color : black;
    border-style : solid;
    border-width : 1px;
  }
</style>

 ブログの投稿画面では、Rich Text Editorのような入力インターフェースが一般的になっていることもあり、単なるプレーンテキスト入力に飽き足らないユーザーには歓迎されるコンポーネントだろう。まだbetaの段階にあるので、今後の発展を楽しみにしたい。紹介できなかったメソッドやパラメータについては、コンポーネントのドキュメントを参照していただきたい。

 次回は、コンポーネントに必要なJavaScriptやCSSを簡単にロードできるYUILoaderを紹介したい。<link>や<script>の記述が多くなりそうな場合には、これを使ってソースコードをシンプルにすることを薦めたい。

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

特集

CIO

モバイル

セキュリティ

スペシャル

ホワイトペーパー

新着

ランキング

  1. 運用管理

    ファイルサーバ管理のコツはここにあり!「無法状態」から脱出するプロセスを徹底解説

  2. クラウドコンピューティング

    社員の生産性を約2倍まで向上、注目の企業事例から学ぶDX成功のポイント

  3. コミュニケーション

    真の顧客理解でCX向上を実現、いまさら聞けない「データドリブンマーケティング」入門

  4. ビジネスアプリケーション

    デメリットも把握しなければテレワークは失敗に?─LIXIL等に学ぶ導入ステップや運用のコツ

  5. 運用管理

    ニューノーマルな働き方を支えるセキュリティ-曖昧になる境界に変わらなくてはならないデータセンター運用

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]