ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。 Different Stylesheets for Differently Sized Browser Windows デモではブラウザのサイズを変更すると、それに応じてレイアウトが変わります。
どうしてもOSに依存してしまうアラートボックスやダイアログボックス。しかし、それをきれいに見せてくれる「jQuery Alert Dialogs」というのがある。仕事で、ダイアログボックスを変えたいとの要望があったようで、これを使ってみることにしたので、メモ代わりにエントリー。 基本的な使い方 基本的にカスタマイズ無しで使う場合は以下のように設定をして利用する。 ■JSを読み込む <link href="css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.ui.draggable.js"
時間もネタも無いのですが、最低でも一ヶ月一エントリはしときたいので、前回(CSS1 のみで質感のあるボタンを表現してみる)と同じような内容になりますが書いときます。 今回は CSS1 のみで質感のあるウィンドウを表現してみます。また応用として、ダイアログウィンドウを表示するプラグイン jQuery Alert Dialogs に、今回定義する CSS を当てて、見た目を変えてみます。 CSS 定義とマークアップ ブラック系のウィンドウを2種類定義してみました。html を以下のようにマークアップします。(サンプルでは dl を使ってますが div でも OK です) <dl class="ex-window-bk1"> <dt class="ex-window-head"><span>Window</span></dt> <dd class="ex-window-body"> <p>CSS
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
更新履歴 2009-11-11 ご要望があったので jQuery.exInlineBlock.js の圧縮版をダウンロードできるようにしました。 CSS には display:inline-block というボックス要素を横並びに配置させる機能があります。 通常のボックス要素(diplay:block)は、横に伸び、縦に縮む性質があり以下のように段積みになります。 幅を指定してサイドに空間を設けても、ブロック要素なので段積みになります。 inline-block の場合は、横にも縦にも縮む性質があり、span や a の inline 要素のように要素を横並びにします。 inline 要素と同様、親(先祖)要素で text-align:center とすればセンタリングもされます。 画面のレイアウトやパーツを配置する上でとても便利な機能ですが、IE6/7 、 Firefox2 以下ではこの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く