[CSS]2012年最も人気のあったCSSリセットとどれを使えばいいかの指針、と上手に使うポイント
ブラウザのスタイルを初期化するCSSリセットの2012年に人気のあったものと、どのCSSリセットを使えばいいのか判断するポイント、CSSリセットを上手に使うポイントを紹介します。 CSS Reset 下記は各ポイントを意訳したものです。 2012年人気のあったCSSリセット どのCSSリセットを使うべきか判断するポイント CSSリセットを上手に使うポイント 2012年人気のあったCSS Reset まずは、2012年に人気のあったCSSリセット ベスト5！ CSS Reset経由で最もダウンロードされたものです。 Eric Meyer's "Reset CSS" 2.0 コードとドキュメント HTML5 Doctor CSS Reset コードとドキュメント Yahoo! (YUI 3) Reset CSS コードとドキュメント Universal Selector '*' Reset コ
Viewport Meta Tag For Non-Responsive Design - Web Designer Wall
I’m sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design? If you haven’t got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices. General Use of Viewport Tag Viewport meta tag is general
レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ | Web担当者Forum
レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。この場合、ある画面サイズを境目として適用させるスタイルを切替えます。この境目を『ブレイクポイント』といいます。 画像を見る この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤している最中なのです。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えばよかったのですが、技術革新が進み新しいデバイスが次から次へと出てくるようになり、現在はデスクトップ、タブレット、モバイル、様々なサイズのデバイスが存在しています。 これらの不特定多数
A new micro clearfix hack – Nicolas Gallagher
The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfi
clearfixについて、今の時代にあった主流な記述ってありますか？Compass (SCSS)の場合、こんな感じですが。。。overflow: hidden;*zoom: 1;
上のブログの中の人です。 上の記事の内容は、1年ほど前のものなので、補足します。 IE6,7を対象にしたclearfixは、今まで通り *zoom:1; がベストだと思います。 IE8以上のfloat解除は、複数やり方存在します。 1.overflow overflow:hidden; または overflow:auto; どちらでも解除可能です。 2.擬似要素を使用する場合 記事の通り .clearfix:after { content: ’’; display:block; clear:both; } が良いかと思います。 *:after {} も記載していますが、パフォーマンスの問題や:afterを使用した場合にdisplay:blockなどを継承してしまうので、避けたほうがいいかもしれません。 もし、*:afterのように、個別単位でやる場合は、SCSSで@includeよりも、@
画像置換に -9999px はつかわない
画像置換という言葉を知っているでしょうか？テキストを「text-indent:-9999px」と指定して、画面の外に飛ばしてしまい背景画像をその代わりに表示する技術です。 画像置換の歴史 画像置換は長いこと使われているCSSのテクニックに１つでしょう。では、このテクニック自体はどのようにして、生まれてきたのでしょうか？ 意外にも、このテクニックは元はC.Z.Robertson氏が1999年に考案し、それを「Todd Fahner」氏やTwitterのDouglas Bowman氏がチュートリアルで説明し、一般的に広めたものです。この時点ではテキストを非表示にするために「display:none」を利用しており、音声リーダーでは読み上げされないなどの問題がありました。 その後、このアクセシビリティ上の問題を解決するために「-9999px」というテクニックを生み出したのです。 現在の画像置換
IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット｜Web Design KOJIKA17
IEでCSS3の効果を出せる。 クロスブラウザ対応 CSSスニペット 2011-02-01 影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。 しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。 そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、 実用的なCSSのスニペットを紹介致します。 Opacity 指定したボックス自体の不透明度を変えることができます。 また指定した要素の下位の要素に対しても、効果が継承されます。 imgのロールオーバーなどの使い道があります。 Opacity Sample .opacity { opacity: .5; /* FireFox, Webkit, Opera */ -ms-filter: "progi
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック - F.Ko-Jiの「一秒後は未来」
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 | CREAMUで紹介されていたNew CSS Sticky Footer – 2009がなかなか便利そうだったので、どんなテクニックを用いているのか調べてみました。 HTMLタグはたとえば次のような構造です。 ↑ #mainを#wrapで包み、#wrapと#footerが同階層にあります。 これにCSSを適用すると、次のようなレイアウトになるようです。 ↑ #mainの下部にpaddingをフッターの高さと同じだけ確保し、同じ値で#footerの上部にネガティブマージンをとっているようです。 ページの最下部にフッターを固定する方法はいくつかあると思いますし、自分でも試行錯誤してやっていますが、一つ便利な方法を知っておくと役立つかと思います。 clearfixなど、完全なCSSとサンプルはNew CSS Stic
セレクタのグループ化｜CSSの基本｜CSS HappyLife ZERO
セレクタは、カンマ（,）で区切ることによってグループ化され、複数の要素に同じスタイルが適用できます。 #main table { margin-bottom: 1em; } #main ol { margin-bottom: 1em; } #main ul { margin-bottom: 1em; } #main dl { margin-bottom: 1em; } #main blockquote { margin-bottom: 1em; } #main pre { margin-bottom: 1em; } #main p { margin-bottom: 1em; } 上記のようにそれぞれの要素にmargin-bottom: 1em;の指定をしていたら手間もかかりますし、コードも長くなってしまいます。 そこで、同じスタイルを複数の要素に適用させる場合、グループ化をすることで見やす
CSS/IE7でのz-indexについて komacchi.com/blog
cssの話。 今さら感すごいがz-indexではまった罠。 今までz-indexプロパティを使用しないマークアップを心がけていたため あまり意識していなかったのだが、どうしてもデザイン上、クライアントの都合上 z-indexで要素の重なりを指定し、わざと隠したような状態にせねばならなくなりまして。 実は先日までのデスマーチ中におこった話で、自分たちもそこで認識していたものの この問題を優先順位を後回しにできたため、改めて検証。 どういうことかと言うと。 z-indexプロパティはdivなどのブロックレベル要素でボックスを入れ子にした時に、 positionプロパティでstatic以外の値が指定されている場合、 それぞれの要素はレイヤー状に重なっているため、 親要素の幅や高さに関係なく、好きな所に配置出来る。・・・本来ならば。 しかしながらIE7だけz-indexが効いていなかったわけで。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
[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の特定のバージョンでロードさせるべ
PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials
Launching a website can be an exciting venture, requiring decisions on its digital residence. If you explore VPS Hosting options, you can choose to host on a private server and gain substantial control over your online environment. This choice is ideal […] Read Article In today’s digital age, protecting yourself from identity theft is more important than ever. With the vast amount of personal info
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DN*BLOG » Blog Archive » text-indentを使わない画像置換テクニック
Blogger
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix