要素の横幅と高さの比率を保つ | 集の一期一会
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
[CSS]複数行のテキストを天地左右中央に配置するスタイルシート
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
検証：レスポンシブのCSSはモバイル向けを先に書くと表示が早い？ | 初代編集長ブログ―安田英久
今日は、レスポンシブWebデザインでのスタイルシートを書く順番について。CSSを書く順番が、デバイスごとの表示速度に関係するのかを検証してみた話題です。 レスポンシブWebデザインでは、モバイル向けのCSSを先に書くほうが、モバイル端末で早く表示される 以前に、そんなことを耳にしました。「んー、どうなんだろう」と思ったので、実際に検証してみました。 仮説では、「ブラウザはDOM要素を構築してからレンダリングするだろうから、モバイル向けとPC向けでCSSを別にしてlink要素で読み込めば、たしかにそれも有り得る」でしたが、実際にはどうだったのでしょうか？ テスト用に、専用のスクリプトを用意しました。いろんなパターン（link要素とか、style要素とか、style要素で@importとか）のCSSを、head内・body上部・body下部に出力できるようにして、モバイル向けCSSを出力して数
CSSのセレクタによる優先順位を分かりやすくビジュアル化するオンラインツール -Specificity Calculator
Specificity Calculator CSSの優先順位とは、例えば同じセレクタでスタイルを定義した場合、後に記述したものが適用されます。これは「後に記述したものが優先される」ということです。 例： <h1 class="title">見出し</h1> h1の見出しに、同じセレクタで異なるスタイルを適用してみます。 .title{ color:red; } .title{ color:blue; } この例では、後に記述した「color:blue;」が適用されます。 いわゆる、上書き状態です。 また、記述の順番には影響されず、セレクタのポイントにより優先順位が決まります。 ここで紹介する「Specificity Calculator」では、セレクタを入力するだけで、そのポイントをビジュアル化して優先順位が簡単に分かるようになります。 例： h1.title{ color:red; }
ブラウザのスタイルをリセットするスタイルシート集 | コリス
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
ブラウザのスタイルをリセットするスタイルシート -Normalize CSS
Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
CSSセレクタの効率的、効果的な使い方をいろいろ
CSSのセレクタって簡単そうで奥が深いと思います。ということで、個人的に使っている方法や意外な使い方などを紹介しますので参考になればと思います。 効率的なセレクタの使い方と読み込み速度を考えたときに効果的なセレクタの使い方に分けて紹介していきます。 CSSセレクタの効率的な使い方 同じ内容ならまとめる 例えばこんなCSSがあります。 h1 { color: black; } p { color: black; } カンマで区切ってまとめることができます。 h1, p { color: black; } !importantがある場合 続いて、!importantがある場合。 h1, h2, h3 { font-weight: normal; } a strong { font-weight: normal !important; } strong { font-style: italic;
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS適用前のIEのスタイル情報をまとめた『IE CSS』 | 100SHIKI
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
2013年上半期、チェックしておきたいCSSのフレームワークのまとめ
CSS3を使わなくてもつい使いたくなる、楽しくて実用的なオンラインジェネレーター -Useless CSS3 Generator
html5-memo.com