【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } リストの項目など、敢えて選択時に色を付けたい場合には、個別にtap-hightlight-colorを指定するといいかと思います。 -webkit-touch-callout: none iOSでリンクを長押しした際に表示されるポップアップメニューを消すためにこのプロパティを設定しています。 ポップアップメニューが出るとネイティブっぽくないですもんね
【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！ : アシアルブログ
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) iPhoneやAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。 -webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。 ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないようにしています。 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} リストの項目など、敢えて選択時に色を付けたい場合には、個別にtap-hightlight-colorを指定すると
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
Divの高さを合わせるスクリプト(safari対応版)|WEBプログラム覚書
HOME>WEBプログラム覚書>Divの高さを合わせるスクリプト(safari対応版) Divの高さを合わせるスクリプト(safari対応版) 先日のエントリーDivの高さを合わせるスクリプトではsafariで動作しなかったが何とか解決。 やっぱりsort部分が良くなかったようだ。とはいえsort自体は機能するので自分の書き方がおかしかったのが原因なんだろうけど。とりあえず
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
JavaScriptを使わずにやるimg要素のロールオーバーサンプル
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事
IE6でa要素に display : block; を指定しwidthを指定しなくても全ての場所でマウスオーバーが利くようにする方法のソース
IE6でa要素に display: block; を指定しwidthを指定しなくても全ての場所でマウスオーバーが利くようにする方法のソース HTML <div class="waku"> <ul> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> <li><a href="#">メニュー４</a></li> <li><a href="#">メニュー５</a></li> </ul> </div> スタイルシート .waku { width: 150px; } ul { margin: 0; padding: 0; border: 1px solid #999999; } li { display: inline; }
CSS - ルビ再び : 404 Blog Not Found
2008年07月15日17:15 カテゴリLightweight Languages CSS - ルビ再び 以前、 404 Blog Not Found:css - ルビもCSSで という記事を書いたのだが、Firefox 3でどうもきちんと表示されない。これは困った。どうしてもルビを使いたい記事があるのだ。 というわけで、今度は大本の記事をそのままコピペするのではなく、CSSをきちんと理解した上で書き直してみた。 その結果が、以下である。 ここのblog主は <ruby>小飼<rp(></rp><rt>こがい</rt><rp>)</rp></ruby> <ruby>弾<rp>(</rp><rt>だん</rt><rp>)</rp></ruby> といいます。 ここのblog主は 小飼(こがい) 弾(だん) といいます。 ruby { display:inline-table !import
glish.com : CSS layout techniques : 3 columns, the holy grail
leftcontent #leftcontent { position: absolute; left:10px; top:50px; width:200px; background:#fff; border:1px solid #000; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo conse
[CSS]3カラムレイアウトのサンプルサイト集 | コリス
noupeにエントリーされている３カラムレイアウトのサンプルサイトの紹介です。 9 Timeless 3 Column Layout Techniques 紹介されているのは、３つのカラムが「固定：２、可変：１」「固定：３」「可変：３」「レイアウト サンプル集」となっています。 固定：２、可変：１
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI
IDEA * IDEA
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
3 columns, fixed width, content tallest
サービス終了のお知らせ