破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
Retina Display向け.5pxのborderまとめ - Qiita
Retina Display向けCss小数点の扱いについて Macbook ProやiPhoneなどRetina Displayで.5pxのborderでStyle定義すると綺麗な線が表現できます。 Macbook ProやiPhoneなどRetina Displayで.5pxのborderを表示しながら、非Retina向けには1pxのborderを敷きたい場合、以下の方法pxを指定するとRetina/非Retinaどちらとも1コードで対応可能です。 こちらは以下のブラウザのみ.5pxに表示されます。それ以外は通常の1pxとなります。 対応ブラウザ Safari iOS Safari Firefox Chrome, Operaについては1pxで表示されます。ちなみに.98pxではSafariやiPhoneでも1px表示になってしまいます。 すべて最新版のみ確認しています。古いバージョンにつ
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
HTML CSS ガイドライン – Kangaroonote
GitHub ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 ただし公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にする root/ ├── dist/ └── index.html └──css/ └──js/ └──images/ └── src/ └──sass/ └──style.scss └──_var.scss └──_mixin.scss └──_header-footer.scss └──_compo-list.scss └──_compo-table.scss └──_compo.scss └──_single-propery.scss └──_animation.scss 基本ルール 命名規則 ID名、クラス名、ファイル名で単語をつなぐ場合は -（ハイフン）を使用親要
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
【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
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 | 100SHIKI
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 February 27th, 2009 Posted in その他 Write comment かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。 SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。 しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。 使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。 次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色
CSS＆HTML - にしじろめも ― レビューとTipsのブログ（blog）
ブラウザごとにだけ適用されるCSSハックのまとめ。以下，hoge要素にpiyo属性を指定。 Ver6以下のIEのみに適用 * html hoge{piyo;} モダンブラウザのみに適用 html>hoge{piyo;} IE7を除くモダンブラウザにのみ適用 html>/**/hoge{piyo;} Safariのみに適用 /* for safari \*/ html:\66irst-child hoge{piyo;} /* end */ IE6のみに適用 _hoge{piyo;} IE7のみに適用 *hoge{piyo;} *+html hoge{piyo;} IEのみに適用 *+html hoge, * html hoge{piyo;}
モビットってどんな返済方法があるの？ | 現金が必要な時に一番便利なネットキャッシングで即日借入【ネポ】
カードローンって最近よく耳にするようになったのではないでしょうか。カードローンというのは消費者金融や銀行に申し込んでカードを発行してもらい、そのカードを使って提携のATMなどからお金を借りるというものです。金額は人によって決まっていますが、特に目的について制限されるわけではなく、1万円からなど比較的少額からの借り入れも出来るという便利な個人ローンなんです。 でもカードローンって本当にたくさん種類があります。各銀行でもそれぞれカードローンがありますし、消費者金融だってそれぞれの商品としてカードローンを取り扱っています。モビットもカードローンの1つですね。モビットは三井住友銀行系の会社ですので、三井住友銀行のATMからの借り入れ・返済であれば手数料無料になるんですよ。 実際お金を借りたら返さなければいけないのですが、モビットはどのような返済方法があるのでしょうか。返済方法は3つ！口座引き落とし
CSSのデバッグ方法 - Webtech Walker
CSSはプログラムみたいに、エラーがあるからといって、動作が止まったりしません。また、CSSのソースにエラーがなくても思うように動作しないことがあります。そういう場合にどうやって原因を突き止めて修正するか、僕なりのやり方を紹介します。 要点はこんな感じ。 borderを指定してみる display:noneを指定してみる !importantを指定してみる xml宣言を取ってみる（IE6で標準モードにする） widthを指定してみる（hasLayoutをtrueにする） ソースを削除してみる ネットで調べてみる borderを指定してみる 背景やborderをしなければ、基本的にボックスは無色透明なので、どこからどこまでが該当するボックスなのか、わからなく場合があります（僕だけ？）。 ボックスの領域を確認するときは下記のようにborderを指定して確認します。僕の場合、目立つように赤線を表
ブラウザのスタイルをリセットするスタイルシート集 | コリス
<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:
clearfixを使わないでやるには。
2008年11月11日お昼頃 overflow部分を一部加筆しました。 ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。 さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。 なので、一応基本に戻ってみましょうということで。 最近、「CSS Nite ビギナーズ」とかもやってますしね。 あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。 何か、久々に書いてる気がして、どうやって書いてたか思い出せない... えっと、そもそもどんな状況の時かっていう
base.cssメモ（初期化と基本設定） - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSSの初めでUA固有の表示設定を解除するリセットCSSと、フォントサイズ指定、そしてタグ自体の基本的な振る舞いを規定する指定、この３つを合わせたもの。 この部分はいつでもどんなサイトでも大抵は使いまわせるので、自分なりのものを用意している人も多いと思います。ちなみにSig.は「base.css」という名前で用意してますが、「default.css」とか「master.css」とかって命名も良く見かけますね。それはともかく。 このところデフォルト設定に関するレポを良く見かけるので、いちど当サイトでも纏めておこうかと思った次第です。（ま～「良い感じの方法を見つけたんだけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
07design.net
わずか四文字でIE6/7/8を区別するCSSハック | コリス
CSS を複数ファイルに分割する時のファイル名
[CSS]カスタマイズも可能なドロップダウン型のナビゲーションのテンプレート -CSS Candy Menu | コリス
[CSS]スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方 | コリス