CSS
時間もネタも無いのですが、最低でも一ヶ月一エントリはしときたいので、前回(CSS1 のみで質感のあるボタンを表現してみる)と同じような内容になりますが書いときます。 今回は CSS1 のみで質感のあるウィンドウを表現してみます。また応用として、ダイアロ…
CSS3 を駆使すると、とてもリッチなボタンパーツが表現できるようです。 CSSグラデーションのちょっとしたテクニック #2 - hail2u.net CSSの実装状況で変わるボックスのデザイン方法 - 3.5ping.org 悲しいことに勤務先の PC の標準ブラウザは IE6。近いうち…
以下のようなアウトライン付きタブ UI の CSS の書き方が分からなかったので調べてみました。
以前、exFixed という jQuery プラグインを作成しました。IE6 で position:fixed を実現するプラグインで、特徴として IE6 でもガタつかない position:fixed が可能 クロスブラウザで fixed 要素に対し、位置移動、リサイズ等の動的な変更が可能（素のanimat…
更新履歴 2010-01-22 jQuery.exPlaceHolder.js を Ver 0.1.1 に更新 title 属性（あるいは任意の属性）で、表示するメッセージを指定できるようにしました 専用の css ファイルの読み込みを不要にしました jQuery.exInlineBlock.js ファイルの読み込みを不要…
更新履歴 2009-11-11 ご要望があったので jQuery.exInlineBlock.js の圧縮版をダウンロードできるようにしました。 CSS には display:inline-block というボックス要素を横並びに配置させる機能があります。 通常のボックス要素（diplay:block）は、横に伸び…
「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」について、たくさんのコメント、フィードバックありがとうございます。 exFixed のうりとして「IE6 でもガタつかない position:fixed ができる」というのがありますが、フィードバックでいただ…
更新履歴 2010-11-14 exFixed Ver 1.3.0 ベースの記述に変更しました。 2009-10-16 本ページのサンプルソースを jQuery.exFixed.js の Ver 1.2.0 に対応した記述に差し替えました。詳細は以下をご覧下さい。 jQuery.exFixed.js を機能拡張しました - Cyokodo…
jQuery BlockUI のようなモーダルウィンドウ系プラグインの中には、画面スクロールしてもウィンドウ表示位置が固定されるものがありますが、IE6 の場合 position:fixed が使えない関係でスクロール時、固定ウィンドウがガタついて表示されてしまう事が多いよ…
最近の更新履歴 2011-12-07 Ver 1.3.2 リリースjQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリースfixed 要素がブラウザ表示エリアから隠れ１度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具…
更新履歴 2010-01-21 スクロール時のガタつきをはじめとする諸問題等を解決した精度の高い fixed を使いたい場合はこちらをご覧ください。 IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog::Diary 前回のつづきです。 スクロール時のち…
更新履歴 2010-01-21 スクロール時のガタつきをはじめとする諸問題等を解決した精度の高い fixed を使いたい場合はこちらをご覧ください。 IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog::Diary 前回のつづきです。 right , bottom …
更新履歴 2010-01-21 スクロール時のガタつきをはじめとする諸問題等を解決した精度の高い fixed を使いたい場合はこちらをご覧ください。 IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog::Diary position:fixed とは？ 結構常識っぽ…
更新履歴 2010-01-21 本エントリの記述だと一部ブラウザ（google chrome）でうまく表示されないそうです。下記エントリでの記述方法をお勧めします。 テーブルのヘッダとフッタを固定する簡易プラグイン - Cyokodog::Diary IE8 beta2対応版IETesterがリリー…
前回の「簡単にCSSレイアウトできるフレームワークを考えてみる」の続きです。はてなのトップ画面のようにサイドメニューの幅が固定表示され、メインコンテンツ幅が伸縮するCSSレイアウトのフレームワークを考えて見ます。 position 指定によるサブ固定・メ…
これからの時代はCSSレイアウトということで、Webアプリを作る際はなるべくfloatベースのCSSレイアウトを使うようにしてます。最近でこそそれなりに慣れてきましたが、はじめは clearfix やら カラム落ちで何度も同じような苦労をしてたような気がします。 …
リスト要素ベースのフォームを作ってみる colissさんのこちらの紹介記事、 フォームをリスト要素で並べたスタイルシートのチュートリアル - coliss これを見て「お！かっこいい！」と思い試してみました。
はてブも煩雑になってきたし、CSSレイアウト系はこちらにまとめてこうかなと。。 CSSによる段組（マルチカラム）レイアウト講座 CSSフレームワークによる作業の効率化 - MdN Interactive CSSで実現するエラスティックレイアウト - バシャログ 考察系 幅固定…
グラデーション範囲をIE用に微調整 前回のエントリで画像ファイルなしでグラデーションを可能にするCSS生成ツールを紹介しましたが、グラデーションを適用する要素の条件によりIEとその他のブラウザで、グラデーションのかかり方に差異が生じます。具体的に…
画像ファイルを使用しないでグラデーションをかける方法を調べてみました。まずIE専用な書き方になりますが、 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#5588ff,EndColorStr=#ffffff); のような記述でグラデーショ…
myparts.cssの適用 前回のmydesign.cssの適用では各要素に対し、font-size、margin/padding、border、colorといった最低限必要な属性の設定のみを行いました。myparts.cssではこれら基本要素の設定だけでは足りない、汎用的に使われる独自のクラス定義を管理…
mydesign.cssの適用 サンプルのhtmlに、mydesign.cssの構成ファイルである reset.css(YUI)、myreset.css、myskin_default.cssを順番に適用してみます。
前置き 企業内の業務システムのWebアプリを開発する際、見た目のきれいさというのはどうしても優先順位が低くなってしまいます。（うちの場合だけかもしませんが）社内システムの画面のルックスは、それはかっちょ悪いものが多いです。 「コシューマー向けの…
