レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
『スマホでティッカーを実装してみよう』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、アメーバ事業本部コミュニティ部門の加藤（@ktknest）です。 フロントエンドディベロッパーとして、GIRL'S TALKの開発・運用を担当しています。 GIRL'S TALKは女性だけの完全匿名掲示板サービスで、テキストを主とした構成になっています。それ故、グラフィカルな要素が少ないこともあり、運営側からのお知らせの表示に賑やかしの効果も持たせて、電光掲示板風のティッカーを採用しています。 そこで今回は、陰ながら活躍してくれている、このティッカーを表現するにあたっての、注意点や実装方法をご紹介したいと思います。 実装方法の検討まず、幾
CSS3で、ダミーテキストを簡単に表示できるのか？
CSS3で、ダミーテキストを簡単に表示できるのか？ 2012-06-14 サイトを制作する時は完全原稿で進めたい。 とりあえずJavaScript ダミーテキストを出してくれるjQueryのプラグインもあるので、試してみてもいいかもしれません。 lorem.js - github lorem.jsの記述 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="lorem.js"></script> <div data-lorem="2p"></div> <img src="" data-lorem="gray" width="100" height="124"> ただdata-*属性を付けるのが面倒な
インライン要素に背景画像を指定する
Fig 1: インライン要素に背景画像を指定 CSS でインライン要素に背景画像を指定する場合、IE6 と IE7 では致命的なバグがあるので注意。たとえば Fig 1 のように、パラグラフ中のハイパーリンクにアイコンを表示させたいとする。となると CSS はこんな感じになるだろう: a.pdf { padding-left: 20px; background: url(/img/pdf.png) no-repeat 0 50%; } a.external { padding-right: 20px; background: url(/img/external.png) no-repeat 100% 50%; } すべてのモダン・ブラウザで Fig 1 のようなレンダリング結果が得られるが、背景画像を指定したインライン要素が改行して複数行にわたる場合、IE6/7 は Fig 2 のようにし
これが本当の画像置換か [CSS｜Javascript｜jQuery｜印刷｜画像置換] - BlurBlue-Note
会社からの帰宅中、横断歩道を渡っていたら赤で止まっていたはずの車がゆるりゆるりと横断歩道に進入してきました。 さすがに驚いて凝視した（完全に目合ってる）のですが、運転手のおばちゃんは止まる様子もなく、そのまま徐行で走り去っていきました。 どうせすぐ次の信号で止まるのに 振り返って見ると、車体側面には明らかに車か何かが突っ込んだような大きな凹みと傷が。 やっぱりこういう人は何度もやらかしているんだなぁ。なんで免許持ってるんだろう？発行しちゃだめだろ。 さて、赤信号は守りましょうというところで、Javascriptの話題です。 というのも、ソース上テキストを書いていてもCSSを使ってそのテキストを画面外に飛ばしてしまうというテクニックがバッドノウハウなんじゃないかと。 実際、私もそう思うので、どうせ見出しやボタンを画像化したいのならば、いっそのことimgを置いてaltやtitleを記述したほう
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(){
[JS]ブラウザの種類を検出して、CSSのセレクタで実装できるスクリプト | コリス
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NavNav+
CSS サンプル集 Vol. 2｜Webデザインレシピ
CSSで様々なアクセサリをつける装飾CSS＋ｊQuery*ホームページを作る人のネタ帳