Lucky bag::blog: CSSだけでドロップダウンメニュー
ナビゲーションのドロップダウンメニューは、JavaScript を使って実現出来ますが、スクリプトをオフにしてブラウジングしている人も居たりするんで、それを CSS だけでやってみた。今、チョロッとやってみただけなんで、微妙な感じかもしれませんが。（しかも、全然クロスブラウザじゃないし...） やり方としてはいくつかあると思うんですが、今回はサブメニューの表示・非表示をコントロールするために、疑似クラスの hover プロパティを リスト要素に使っています。なんで、hover プロパティをアンカー要素以外に適用出来ない IE なんかでは表示されないんで、あまり使えないかも:-P リストを横に並べる 元となる (X)HTML のサンプルは、当然の事ながら、ナビゲーション部分をリスト要素でマークアップしてあります。また、全ての要素の margin と padding を 0 にしています。 サ
inline-blockはもう使える（だいたい） | Takazudo Clipping*
inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を
ultra blue:Firefox ・バグの再現・ textarea 内でカーソルの点滅が消える問題
Firefox 2.0.0.7 デモページ Windows XP sp2 、 Fedora 7 で確認。 input 要素でも同じ条件下で発生。マークアップとスタイルシートのみ。JavaScript は無関係。背景の有無でカーソルが出たり消えたりするようにした。 涙目 これを知らないで設計して最後の最後で気づくと大変なことになるから、みんなも気をつけようね！ position:fixed; な背景要素を先に作って、（子供ではなく）その兄弟に absolute を当ててから、背景に被るようにテキストエリアを作った場合に起きる、たとえ z-index で上下を指定しても。言葉で説明するより、これはソース見て試したほうが速いと思う。GUI を作るなら十分ありえる状況だよ、うん。 既存のノードを孤児にしてもう一度つり下げてみたり、別な親からクローンを作ってみたり、 value 属性をいじってみたり
link 要素を可視化してみる - double-team.org
今日はとても面白い1日だった。いや別に仕事とかプライベートとかじゃなく、ガリガリ CSS 書いてて楽しかった。 なんとなく「できるかなー」と思ってグリグリ2時間くらい費やした甲斐があった。でもあとで調べたらいい感じの記事があって、「こっち参照でいいんじゃない？」とも思ったが、せっかくなので残しておく。 と言うわけでまたここからで申し訳ないんですが、パンくずリストがベストとは限らない | WWW WATCH を見て「link 要素を可視化させちゃえば（ちょっとだけ）解決できるんじゃない？」と思ってやってみた。 XHTML の記述を例えばこんな感じに。 <link rel="start" href="index.html" title="最初のページへ" /> <link rel="next" href="next/index.html" title="次のページへ" /> <link r
hxxk.jp - CSS の記述ルール記事のまとめ
いまだに私自身「これだ ! 」という答えを見出していないのですが、 CSS の記述ルールって絶対的な正解ってありませんよね ? ちょっと私が知っている範囲で明文化されている CSS の記述ルールを集めてみましたので、それを元に絶対的な正解のルールではなく、最大公約数的なルールを模索してみたいと思います。 ちなみに、今回模索するのは Lucky bag::blog: CSS を作成する際のお約束やデフォルトスタイルの差異を無くすCSS のような Tips ではなくて、あくまで .css ファイルを書き上げる際のルールのことです。 それと、取り上げた記事は順不同です。 書き上げてから、公開日時順にした方が良かったかなあとも思いましたがもうこのままで公開。 Type selectors を XHTML Abstract Modules の順番に沿って記述 - hxxk.jp ガイドラインを作成お
100％、CSSのみで構成されるメニューの作り方 - GIGAZINE
JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。
Stylish でユーザスタイルシートの切り替えを手軽に, 仕事納め - SmallStyle(2005-12-28)
_ Stylish でユーザスタイルシートの切り替えを手軽に Firefox では userContent.css などにユーザスタイルシートを定義することで，自分好みに Web サイトの表示をいじることができます．例えば，広告ブロックのような定義を記述してみたり，FEEDBRINGER で <pre> タグを折り返したり，@-moz-document を利用すれば，特定のサイトのみ適用するスタイルシートを定義することもできます．難点としては，この userContent.css の修正などを反映させるには，Firefox を一度再起動する必要があります．これが結構不便だったりするのですが，Stylish という拡張を使うと，手軽のユーザスタイルシートの切り替えが可能になります． 例を挙げてみると，SmallStyleのサイドバーの表示をしたくないと思ったら， @-moz-document
GeckoユーザーのためのユーザースタイルシートTips
ユーザースタイルシートとは 従来，Webページのデザインはページ制作者のみが行なってきました．このため，自分の環境では不都合があったり自分にとって好ましくないデザインの場合でもデザインを変更して読みやすく・見やすくすることはできませんでした． しかし，ユーザースタイルシートの登場により，大げさに言えばユーザー（閲覧者）がページのデザインを行なうことが可能になりました．ユーザースタイルシートに対応したWebブラウザ，例えば，Internet ExplorerやFirefox，Opera等を利用している場合，自分の都合に合わせてページを読む・見ることが出来ます．ここではFirefoxやSeaMonkey（Mozilla）等のGeckoブラウザの機能をフルに使ったユーザースタイルシートの実例を紹介します． World Wide Webは，見る側が好きなように見ることが出来る今までにないタイプのメ
hxxk.jp - :before 擬似要素 / :after 擬似要素の活用例
記事データ 投稿者 望月真琴 投稿日時 2004-11-27T15:50+09:00 タグ CSS Firefox IE Opera Safari バグ 概要 hxxk.jp の場合は :before 擬似要素 / :after 擬似要素を随所に活用していますので、その例をいくつか紹介します。 リプライ 3 件のリプライがあります。 :before 擬似要素 / :after 擬似要素の使用例 :before、:afterってcontentプロパティ使って要素の前後にイメージやら文字やらを挿入するのにスゲェ便利だと思うのになぁ、って今仕事しながら思った。 同感です。 というか、 hxxk.jp の場合は随所に活用しており、 CSS の便利さを存分に噛み締めています。 私は e-luck さん ( Lucky bag::blog ) のアイデアのようなフッタ部分の更新には使っていません (
正しい知識を得たい人の爲のCSS2リファレンス
正しい知識を得たい人の爲のCSS2リファレンス 簡易目次 概要 CSS2の構文 基本データ型 セレクタ 値わりあて，カスケード処理，継承 メディアタイプ HTML文書へのスタイルシート適用 プロパティの定義 テキスト 色と背景 フォント ボックスモデル 視覚整形モデル テーブル 生成内容 リストとマーカー ユーザインタフェイス 附録 CSSに関するアクセシビリティ技術 CSS2.0のプロパティ一覧表 CSS2.1のプロパティ一覧表 CSS2.1の視覚整形モデル詳細 詳細目次 概要 CSSの概要 HTMLの経緯とCSSの役割 CSSの正式勧告水準について 改訂版CSS2.1と次世代CSS3 CSS2.1 vs CSS2 CSSの設計原則 CSS2の処理モデル カンヴァス（The canvas） わりあてモデル（addressing model） 用語の定義 CSS2の構文 構文（Syntax
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌
個別「suVeneさんへ」の写真、画像 - C - むぎ写真館
A Handy CSS Debugging Snippet
http://msugai.fc2web.com/web/CSS/pseudo.html
サーバメンテナンスのお知らせ