携帯サイトで使えるCSSハック1 「displayハック」 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
先日出版させていただいた「携帯サイト コーディング＆デザイン」の中でも 触れている携帯サイトで使えるCSSハックをご紹介。 ドコモ端末だけ内容を表示する 「displayハック」 勝手に名付けてしまってはいますが… 「display:none;」というCSSプロパティと値の組み合わせは、 現在auとソフトバンク端末で対応しています。 CSSで「display:none;」とすると、これが指定された要素は完全に非表示になりますが、 displayセレクタに対応していないドコモ端末は、内容が表示されてしまうという CSSの対応度を逆手に取ったCSSハックです。 ただし、「3G端末（+XHTMLコーディング）」に限るという条件付き。 したがって、できればドコモユーザだけに表示させたいけど、 まぁ他キャリアにも表示されてもいいや程度に使うと便利かなと思います。 なので、 <div style="d
アルツハイマー病の原因となる「脳の廃棄物除去システムの老化」を改善する治療法が開発される
アルツハイマー病などのさまざまな認知症疾患の原因の1つとして、脳内に「タウタンパク質」と呼ばれる物質が蓄積することが挙げられています。このタウタンパク質はグリアリンパ系といういわば「脳の廃棄物除去システム」によって除去されるのですが、老化が進むとこのグリアリンパ系が機能しなくなり、認知障害を引き起こすことがわかっています。ロチェスター大学医療センターの研究チームが、老化で機能しなくなったグリアリンパ系を改善する治療法を発表しました。 Restoration of cervical lymphatic vessel function in aging rescues cerebrospinal fluid drainage | Nature Aging https://www.nature.com/articles/s43587-024-00691-3 Cleaning up the agi
スタイルシートやスクリプトなどのテクニックをまとめたフリーのeBook
スタイルシートの構造設計から、グリッド・フォーム・ナビゲーション・角丸などの実装例、データベースやAJAXの実践的なサンプルが豊富に掲載されているフリーのeBook「The Woork Handbook」を紹介します。 The Woork Handbook The Woork Handbookのテキストは英語ですが、キャプチャやコードが豊富に掲載されているため、英語が分からなくても理解できる箇所は多いと思います。 ダウンロードできる「The Woork Handbook」はPDFファイルで、現在配布されているv.0.1の目次は下記のようになっています。 スタイルシート データベース AJAX MooToolsやScriptaculous、他のJavaScriptのフレームワーク Blogger その他 フォント
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
IE6で閲覧すると。
hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
ソースなんて誰も見ないよ。
ボクたちみたいな、Web業界の人間やそういうのに興味ある人でも無ければ、訪れたサイトのソースなんて誰も見ないよね。 そんな感じだから、蔑ろにされやすいし、扱いも低かったりする。 そりゃそーだ。 ボクだって、今の仕事してなかったらサイトのソースなんて見る事無いし。 テーブルレイアウトだろうが、どんな方法で組まれていようが普通に閲覧できれば関係ないよね。 でもさ、エラー出まくりのHTMLなんて、体内がずたぼろの人と同じじゃんね。 見た目健康そうでキレイに着飾ってても、体内ずたぼろじゃあやっぱりダメじゃないですか。 人様の体内を覗く事なんて普通に考えたら無いし。 普通に歩いているように見えれば、見分けなんて付かない。 だけど、時が経つにつれ徐々に身体がおかしい事に気付いていく。 そんなんイヤだよ。 HTMLだって、昔作ったサイトはInternet Explorerでしか見れなかったりして。 その
Stylishがどのようにして再起動なしでCSSを適用しているか調べてみた - きれいさっぱり、逝くぜ！
Firefoxの拡張であるStylishを使用すると、再起動なしでスタイルシートを適用してWebページだけでなくFirefoxのインターフェースも変更することが出来る。 この動作がわかれば、Foxdieのようなサブスキンを内蔵したテーマで、再起動なしにサブスキンを試すことが出きると考え、その動作の仕組みを探ってみた。 とりあえず、タブの高さを40pxにするスタイルをStylishに書く。 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); tab.tabbrowser-tab { height: 40px; } DOM Inspectorで調べると「プレビュー(W)」ボタンは「chrome://stylish/content/edit.js」の「doPreview関数」を呼び出している
にせ404でお手軽アクセス制限もどき - ぼくはまちちゃん！
こんにちは！ 先日から、yahoo.co.jp からのものすごい数のアクセスとか、 .go.jp からの執拗なアクセスに悩まされいて夜も眠れないはまちや２です！こんにちはこんにちは！！ はい！ そんなこんなで、はてなダイアリーでも、アクセス制限みたいなことできないかなーと考えてみました！ うん、やっぱり、ちょっと無理なんですよね！ なので、ほんとに気休めなんだけど、かわりに 「にせ404画面でもだしとけば、もしかすると勘違いして諦めるんじゃない？」 なんて思って、にせ404出力機を作ってみました！！！ もしかすると他に使いたい人がいるかもしれないと思って、 みんなにも使えるようにしてあるので、説明を書いておきますね！ (できること) 指定したホストからのアクセスだったら、404エラーっぽい画像を出す。 それ以外なら1ピクセルの透過gifを出す。 (どんな風になるの) こんな感じになるよ！
CSSを使ってファンシーなボタンを作成するテクニック:phpspot開発日誌
Make fancy buttons using CSS sliding doors technique This article will show you how to create fancy buttons using CSS sliding doors technique. CSSを使ってファンシーなボタンを作成するテクニック。 ２枚の画像を組み合わせて、横に伸縮するCSSボタンを作成するテクニックが紹介されています。 自由なサイズに伸縮可能 ボタンのテンプレートも色々 サイトパーツに便利に使えそう。 関連エントリ CSSでクールな3Dボタンを作ろう CSSでクールなINPUTフォームを作成するサンプル クロスブラウザでちゃんと動作するCSSボタン集サイト「CSS Buttons」 CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集
スクリーンプリント.JP / 株式会社プリズム
A short sentence describing what someone will receive by subscribing.
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]アクセシブルなパネルを開閉するスクリプト -jQueryFAQ
IE6で閲覧するとモノクロ - lucky bag
CSS Spriteを活用しよう - DesignWalker
2column Mixi
IEでもFirefoxでも崩れないレイアウト :: TextOcean