1300の優良サイトが選んだ「CSSリセット」のベストプラクティス - ふろしき Blog
1300の優良サイトが選んだシリース、第2回は「CSSリセット」です。 CSSリセットとは、WebブラウザごとにCSSのデフォルト値が異なるという問題を、解決するための手法のことです。 インターネットはマルチブラウザに対応することが求められています。ピクセル単位の細かいデザインもWebではご法度ですが、想定外の動作を防ぐためにも必要な知識と言えます。 今回も、1300の優良サイトが採用しているCSSリセット手法を確認し、ベストプラクティスが何かを探ってみようかと思います。 具体的にどんな問題があるのか？ IE6、IE8、現時点の最新のChrome、Firefoxのデフォルト値と、実際の表示状態を確認してみましょう。以下はbodyタグに設定されたCSSプロパティの値です。 コンテンツの余白を意味するmarginですが、IE6の「左:10px/上:15px」に対して、それ以外のWebブラウザは
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
ProjectDD
最果タヒさんがつむぐ「詩になる直前」の言葉が並んでいるのですが、むしろ展示デザインを担当された佐々木俊さんとの「詩や言葉の、無限大の表現方法を探るインスタレーション展」と言った方がしっくりくる…それくらい言葉の表現方法のバリエーションに触れることができる展示になっています。
SassでCSSの弱点を克服しよう （1/2）－ ＠IT
maedana SonicGarden SUG（SKIP User Group）／日本Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう（編集部） Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS（Cascading Style Sheets）」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと
yusukeoshima.blog | overflow:hiddenで連続した半角の英数文字列が折り返さない時の対処法。
<< October 2008 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >> SNSサイトのcssコーディングをしていて不具合があったので対処法を忘れないうちにメモ。 (ターゲットブラウザ：IE5〜7、firefox) 管理画面からボックス要素の中にテキストを動的に挿入した場合、ボックスの面積を超えたテキストはoverflow:hidden;で表示させないようにした。その際に、半角の英数文字列(例えば長いURLなど)を連続していれた場合に折り返えしてくれない不具合を発見。 ■まずIEはoverflow:hidden;とword-break: break-all;で対処できた。 ■しかしfirefoxは通常のテキストは折り返すが、連続する半角の英
Mastering CSS Coding: Getting Started — Smashing Magazine
CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tu
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
ページ送りのサンプル4種+2
ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。 久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。 サンプルサイトを見る サンプルをダウンロード 地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。 今回作っておきたかったのは、センタリングさせたページ送りっす。 とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。 ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。 不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg
５日で分かるスタイルシート・ＣＳＳ講座
スタイルシート（ＣＳＳ）を活用してサイト運営をもっと楽しくするためのポイントをギュッと凝縮した集中講座サイトです。ＣＳＳがカバーする範囲は結構広いですが、実際にサイト運営に使う範囲は限られていますので、できるだけ必要な範囲内で、すぐに役立つ知識を厳選してご紹介します。IE5.0以降、Firefox 1.5以降で動作確認を取っています。
フロートではみ出した子要素をクリアして親要素内に収めるには？
フロートではみ出した子要素をクリアするには？ 子要素にＣＳＳでフロートを設定すると、親要素はその子要素の高さを無視する形で表示されます。以下のサンプルでは、段落にフロートをかけ、親要素にボーダーを設定しています。 ＜失敗例サンプル＞
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)
cat888 live เว็บไซต์ของเราได้รับการรับรองว่าเป็นเว็บพนันที่มีคุณภาพเยี่ยมที่สุดในประเทศไทยสำหรับการพนันออนไลน์ เว็บพนันที่มั่นคงและปลอดภัยที่สุดสำหรับการเดิมพันออนไลน์ที่ทำการเงินอย่างมั่นคงและปลอดภัยและรับรองความเป็นส่วนตัวของคุณในการเล่นเกมพนันที่นี่. ทางเรามุ่งเน้นให้ประสบการณ์การพนันออนไลน์ที่ไม่ซ้ำซากและน่าสนุกที่สุดเลยค่ะ! cat888 หวย เมื่อคุณมีความระมัดระวังในการพนันออนไลน์ คุณจะมั่นใจได้ว่า
クロスブラウザの基礎知識 〜原因とその対応方法〜 : WebとPCのメモ帳
Web制作やBlogのカスタマイズでよく起こりがちなのが、「あるブラウザでは思った通りに表示されるが、別のブラウザで見ると表示が崩れている。もしくは思った通りに表示されない。」という現象。 私もBlogのカスタマイズで新しいテンプレートを土台にあらゆる場所を変更したのですが、様々な表示の違いにかなり悩まされました。自分が調べている範囲でもIE以外の利用者が相当増えてきていますから、IEだけでちゃんと表示されればいいと割り切るわけにもいきません。(そもそも自分はFirefoxを使ってますからね。) 今回はそのようなクロスブラウザ対応で困らないための基礎知識がテーマです。起きるトラブルで大体の原因の予想がつけば、解決する手段を見つけるのはそう難しくありません。もちろん個々のトラブルの原因はケースバイケースですから、条件に当てはまらない場合も多々ありますのでご注意を。 1. すべてのブラウザで表
cssのテクニックなどを学びたい時に見ておきたい12サイト - かちびと.net
cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSリセット手法
css-lecture.com
http://d-lover.com/css/hack.shtml
M1k3 / @miked1ck
クロスブラウザなレイアウトデザインテクニック一覧