どーも。最近密かに主婦に人気が有るんじゃないか？と思い始めているhirasawaです。 遊び心がある方、コレから「主婦CSS」とかって付けて下さい。えぇ。 主婦に優しいブログ運営を頑張りたいと思っておりますので。 【超CSS】STOPN' LISTENですに対抗したいとか、そんな大人気ない事思ってないデスヨ？ で、本題ですがCSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::の影響もあるんですが、会社関係の人に同様の事を言われた事が有り、いつか書こう書こうと思ってました。 でも、同じじゃアレなんで、ボクが良くやる（やった）初歩的なミス絡みで書いてみようと思います。 1.何か、コレだけスタイルが適用されないんすが… ボクの場合、取りあえず !importantでそもそも効いているのかチェック。 もしくは、

はてブラウザー 弾さんが、こんなの作っていたので、最近思う題名のようなことをこの場を借りて表明。 で、なんだけど、弾さんの「はてブラウザー」は、ブラウザ内にブラウザみたいのを作って、フレーム内にコンテンツを出すという奴ね。かなり便利で使いやすい。 著作権的にどうなのって話が出ているけど、とりあえず、ああいう仕組みがあると便利なのは確か。 で、本題はここから。 僕は、メインのブラウザはfirefoxを使っているんだけど、その中で、もう絶対に離せないっていう拡張機能があって、それが「All-In-One Sidebar」。拡張の中では定番中の定番なんですが、これが激しく便利。 All-In-One Sidebar こっちに日本語での説明が書いてあるんだけど、firefoxは、標準だとサイドバーに表示できるのはブックマークと履歴だけなわけです。 けど、この拡張をインストールすると、サイドバーにア

Firefox2が出る前からちらほらと「Firefoxでどんな拡張機能を入れているのですか？」という質問が来ていたので、以下にまとめてみました。 基本的に以前までMozilla使いだったので、Mozillaっぽい操作スタイルに変更するために入れている拡張機能もあります。なお、 ・RSSはThunderbirdに任せる ・マウスジェスチャーは使わない ・キーボードメイン ・とにかくあっちこっち見て回ることに特化 というようにしてニュースサイトの更新に専門化した超マニアック仕様ですが、「ニュースサイトを作りたい」とか「ブログをバリバリ更新したい」と考えている人にとっては、一種の目安にはなるのではないかと。ついでに、Firefox2のデフォルト設定から変更している点なども列挙しておきました。 ◆拡張機能編 ※以下の拡張機能の一部は現在この記事執筆時点では正式に2.0以降に対応していない場合があり

ページの見かけを決めるCSSについていろいろなデザインが今までありとあらゆる場所で検討されてきましたが、今度はそのCSSを時間帯によって切り替えるという方法です。朝なら朝っぽいCSSで、夜なら夜っぽいCSSを使うというようにして、いろいろと応用が利きそう。 詳細は以下の通り。 Katgal.com: New and Improved このアイディアをさらに延長したアイディアが以下にあります。 nicholasjon.com :: Time Sensitive {1/14/2007} 上記サイトでは以下のような感じで時間だけでなく、天気によっても変わっていけばおもしろいというように提案しています。 はれ くもり 夜

画像置換でメニューを作る 前回の画像置換で説明した通り、画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。 ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。 今回は要点を説明しながらメニューを作って行きたいと思います。 ひとまず、完成系のサンプルに目を通しておいてください。 ベースとなる(X)HTMLソースは以下のようにします。 <ul> <li class="ajaBtn"><a href="/ajax/">Ajax</a></li> <li class="amaBtn"><a href="/amazon/">amazon</a></li> <li class="cssBtn"><a href="/css/">css</a></li> <li class="htmBtn"><a href="

いろいろと古い IE で半透明 png を使うための JS が紹介されています http://web.kankodo.net/2007/02/01-233315.html http://labs.unoh.net/2007/02/ie6_png_fix.html http://phpspot.org/blog/archives/2007/02/iepngjavascript.html で、自分も使おうと思ったのですが。 ライブラリの依存とか、 window の load イベントの時に処理されるのがちょっとだけ嫌だったので、自分用のを作りました。 意外と便利だったので公開します デモ(IE5.5 or IE 6 で見てください) http://usrb.in/amachang/static/AlphaLoader/demo.html 使いかた 半透明にしたい img 要素のあとに http

普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10

table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。 サンプル 特に、Firefoxは記号を区切り文字として認識しない為、長いURLなどを入力するとすぐに発生します。 サンプル これについていくつか解決方法があります。 table要素ではなく、div要素で書く まず、最初にためすべき方法です。 table要素に固執する必要がなければ、このようなことで頭を悩ませる必要はありません。 改行したい所にbr要素やスペース 抜本的な解決方法になります。 しかし、当然表示をコントロールする為に構造をいじることは、web標準の考えからは反します。 word-break:break-all; IEの場合はword-break:break-all;を指定することにより回避できます。