WebページをPCで閲覧時、文字を選択した時の色（いわゆる「反転状態」）はデフォルトで決まっておりますが、それを変更するCSSの小ネタをメモ。 特にスタイルシートが設定されていないWebページにて文字を選択すると、こんな感じになりますね。（↑はSafari） これの色を変更してみましょう。 適宜、スタイルシートに↓を記述します。 [css] ::selection { background: #e9580f; /*背景色*/ color: #fff; /*文字色*/ } ::-moz-selection { background: #e9580f; /*背景色*/ color: #fff; /*文字色*/ } [/css] こんだけ。 すると 文字を選択した時このように色が適応されます:) すんごい簡単なのでやってみたい方はどぞ。 関連：角丸にドロップシャドウ、グラデーションにアニメーショ

jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l

画像を使わずCSSだけでボタンを表現するのが最近の流行りですね。影やグラデーションなども設定できるので便利です。CSSを自分で書くのは面倒という方は「CSS Button Generator」を使うとはかどりますよ。 以下に使ってみた様子を載せておきます。まずCSS Button Generatorへアクセスしましょう。 プレビューは最上部に表示されますよ。まずカラーセットを選んで、グラデーションを調整しましょう。その後横幅や縦幅などのサイズ調整、影をカスタマイズしたりしてお好みのボタンを作りましょう。最下部にCSSのコードが表示されるのであとはコピペして完了ですね。CSSでボタンを作りたいときはぜひ活用してみましょう。 CSS Button Generator （カメきち）

はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ

スマートフォン向けアプリの開発プラットフォームは日々革新が起こっているが、やはり日常的に使用するデスクトップアプリにも新しい潮流が欲しいもの。 そんな人は「TideSDK」をチェックしてみてはどうだろう。 「TideSDK」は、ウェブで使用されている技術で、デスクトップPC向けアプリケーションを開発できるというもの。 対応する技術は HTML5・CSS3・Java Script・Python・PHP・Rubyで、WindowやMac OS X、Linuxで動作する。 HTML5&JavaScriptで作ったアプリを、クロスプラットフォーム対応にして配布するなんてことも可能になる。 ウェブ開発の感覚でデスクトップアプリを ウェブ技術でどこまでできるか? パフォーマンスや制限が気になるところだが、まず、PCシステムやデスクトップUIを操作する部分についてはシンプルなAPIが用意されており、ウェ

タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライドさせる、など色々と応用が利きます。 時間が無いので使い方は割愛。元サイトに詳しく書かれているので問題ないかと思います。以下よりどうぞ。 Swiper

CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="fruit" value="apple" checked><span class="label">Apple</span></label> <label><input type="radio" name="fruit" value="grape"><span class="label">Grape</span></label> <label><input type="radio" name="fruit"

CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。

久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います. 今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです. しかし, そんな単純なプロパティだったらわざわざエントリーにしません. text-shadow プロパティはオフセット値やぼかし具合が指定可能であることはよく知られています. が, なんとこれいくらでも指定できちゃうんです!! コンマ区切りで! 複数の text-shadow を指定することで文字をぼかしたり強調したり光らせたり燃やしたりといったさまざまな装飾が簡単に行えます. そんな活用例をサンプルとしてまとめましたので