[B! css] cs508のブックマーク

[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス

「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS：シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd

cs508 2011/06/15

リンク

[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix

A new micro clearfix hack デモページ [ad#ad-2] 「clearfix」はフロートした要素が親要素からはみ出してしまうのを回避するもので、当サイトでもいくつか紹介してきました。今回紹介するのは、スタイルシートの量を更に減らし（class名も短く）した「micro clearfix」です。この新しいclearfixの対応ブラウザは、下記の通りです。 Firefox 2+ Safari 2+ Chrome Opera 9.27+ IE 6+, IE Mac IE6 にも対応しているのは嬉しいところです。

cs508 2011/04/28

リンク

スマホ最適化でやったこと

※Androidでアクセスされた方は使用感をいただけると幸いです。（サイトトップ）先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。同時に、基本的なスマホ最適化もおこなっています。ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。ちなみに、このサイト自体はまだまだ作りかけでして… そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑）（IE系ではちゃんと表示されません…そのうち手入れします。すみません）どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。では、以下にスマホ最適化でおこなったことをまとめてみました。（ちなみに対象としているスマートフォンはiOSデバイス（iPh

cs508 2011/04/28

リンク

IDEA * IDEA

ドットインストール代表のライフハックブログ

cs508 2011/03/10

リンク

overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１フロートをクリアする要素を配置して解消した例しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？これは

cs508 2011/03/10

リンク

[CSS]フォームのボタンのクリック時の点線を消去するスタイルシート

Firefoxで、フォームのボタン（submit, button）のクリック時に表示される点線を消去するスタイルシートを紹介します。 Remove Dotted Outline For Buttons in Firefox Using CSS デモページ（当方作成） [ad#ad-2] この中途半端な点線はFirefox固有のもので、Chrome, Safari, Operaでは表示されず、IEではボタンの内側に表示されるものです。スタイルシートのスタディ HTML シンプルにsubmitボタンを使用します。 <input type="submit" />

cs508 2011/03/10

リンク

[CSS]モバイル端末にも対応、ブラウザごとに異なるデザインのフォームを美しくするフレームワーク -Formalize CSS

既存のフォームにも簡単に適用できる、各ブラウザ、各OSや各モバイルごとのフォームの異なるデザインのギャップを埋め、美しくするフレームワークを紹介します。 Formalize CSS デモページ [ad#ad-2] サポートしているOSはWindow, Mac OS X, Linux、ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Opera、モバイルはAndroid, iOS(iPhone, iPad)などです。下記のキャプチャは、Windows XP + Firefox 3.6のものです。他の各ブラウザやモバイルでの表示は、元記事の下部「Screenshots」に掲載されています。 Formalize CSS Formalize CSS：ノーマル時の表示

cs508 2011/03/10

リンク

使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI

似たようなツールは他にもあるが、シンプルで使いやすそうだったのでご紹介。 Unused CSSを使えば、使われていないCSS設定がどこにあるかを教えてくれる。使い方は簡単で、チェックしたいサイトのURLを入力するだけだ。すると、どのCSSファイルにどれだけ不要な設定が入っているかを教えてくれる。また、不要な設定を排除したCSSをダウンロードできたりもする。サイトの開発がながびくと不要な設定も増えていくことだろう。こうしたツールをうまく使ってサイトの最適化をはかりたいですな。

cs508 2011/03/10

リンク

[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル

CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。画像の使用は一切ありません。 CSS drop-shadows without images デモページ [ad#ad-2] デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+ です。下記に、デモにある5つのドロップシャドウを紹介します。 HTML HTMLはdiv要素にスタイルシートを適用します。 5つのドロップシャドウはclass名を変更するだけです。 <div class="drop-shadow round"> <h1>CSS drop-sh

cs508 2011/03/10

リンク

[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート | コリス

Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS：ストライプ全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz

cs508 2011/03/10

リンク

[CSS]「:target疑似クラス」をつかった実用的なスタイルシートのテクニック集

「:target疑似クラス」をつかって、タブコンテンツ、画像ギャラリー、画像拡大、アコーディオンなど実用的なコンテンツを実装するチュートリアルを紹介します。キャプチャはW3Cの「The target pseudo-class :target」 [ad#ad-2] 「:target疑似クラス」はCSS3で、アンカーリンクがアクティブな状態にスタイルを適用するものです。 IE6～8では「:target疑似クラス」は動作しないため、代替を用意したり、スクリプト「Selectivizr」を利用するなどなんらかの対応が必要です。「:target疑似クラス」をつかって、タブコンテンツを実装「:target疑似クラス」をつかって、画像ギャラリーを実装「:target疑似クラス」をつかって、画像の拡大表示を実装「:target疑似クラス」をつかって、画像のズームイン・アウトを実装「:targe

cs508 2011/03/10

リンク

[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版

ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。 A Comprehensive Guide to CSS Resets [ad#ad-2] ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli Reset Dan Schulz's Reset Thierry Koblentz's base.css Simple Reset CSS Mini Reset Soft Reset Less i

cs508 2011/03/10

リンク

あなたのサイトに最適なCSS Resetが見つかる -*{ CSSresetr }

昨日「ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版」で、数多くのCSS Resetを紹介しました。じゃ、どれが自分に最適なんだろう？という時にぴったり！　数多くのCSS Resetを手軽に試すことができるオンラインサービスを紹介します。 *{ CSSresetr } - Online CSS-Reset Tool [ad#ad-2] *{ CSSresetr }の使い方は簡単です。プルダウンの「Change the reset」からCSS Resetを「Change the content」から適用するコンテンツを選択します。下記は、CSS Resetを「Example Page」に適用したものです。 marign, paddingを取り除いているCSS Reset、限られた要素のみ適用するCSS Resetなど、実際にコンテンツにあてはめるとその使い勝

cs508 2011/03/10

リンク

紙を折ったようなエフェクトを実装するチュートリアル | コリス

画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。デモページ紙を折ったようなエフェクトの実装紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1

cs508 2011/03/10

リンク

[CSS]ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートのテクニックいろいろ

Simplified page borders in pure CSS デモページ（当方作成） [ad#ad-2] 下記に、元記事で紹介されている方法（その1）をはじめ、コメントに掲載されている方法を含めて紹介します。対応ブラウザは基本的に:before, :after疑似要素を使用するため、IE 8+, Firefox, Chrome, Safari, Operaとなります。ブラウザの表示領域いっぱいにボーダーを配置する方法：その1 元記事で紹介されている方法です。デモページ：その1（当方作成） HTML HTMLは、divなど特別な要素は配置しません。以下に紹介する全ての方法で共通です。 <html> <body> </body> </html> /*------------------------------------*\ BORDERS \*---------------

cs508 2011/03/10

リンク

[JS]条件付きでJavaScriptやCSSファイルをロードできるスクリプトローダー -Yepnope

プレフィックス（接頭辞）を使用して、ロードのタイミング、UAごとに必要なファイルだけをロードなど、条件付きでファイルをロードさせることができるスクリプトローダーを紹介します。 yepnope.js -A Conditional Loader For Your Polyfills! [ad#ad-2] yepnope.jsの書式 yepnope.jsの基本書式は、下記のようになります。 yepnope(resources /* string | object | array */ [, $LABchain]) css! プレフィックス「css!」を使用して、指定したファイルをCSSファイルとしてロードします。 ※「.css」で終了していない名前はJavaScriptファイルとして認識されます。例：cachebusted.css?version=1452318 yepnope({ load

cs508 2011/03/10

リンク

IE6/IE7/IE8/IE9のCSSハック

IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。１．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク

cs508 2011/03/10

リンク

主要なCSS Resetのスタイルシートとドキュメントのまとめ -CSS Reset.com

ブラウザのスタイルを初期化するCSS Resetのスタイルシートとドキュメントをまとめたポータルサイトを紹介します。 CSS Reset.com [ad#ad-2] 現在、登録されているCSS Resetは下記の7つです。 Eric Meyer's "Reset CSS" Eric Meyer's "Reset CSS"のドキュメント HTML5 Doctor CSS Reset TML5 Doctor CSS Resetのドキュメントメント Yahoo! CSS Reset (YUI 3) YUI 3のドキュメント Vanilla CSS Un-Reset Vanilla CSS Un-Resetのドキュメント Tripoli CSS Reset – David Hellsing Tripoli CSS Resetのドキュメント 'undohtml.css' – Tantek Celik

cs508 2011/03/10

リンク

[CSS]背景画像に関する実用的なスタイルシートのテクニック集

CSS2.1の疑似要素を使用して、背景画像のクロップ、変形、ポジション、不透明度など背景画像に関する実用的なスタイルシートの4つのテクニックを紹介します。 CSS background image hacks [ad#ad-2] 下記は各ポイントを意訳したものです。背景画像のクロップ背景画像の変形背景画像のポジション背景画像の不透明度背景画像のクロップ背景画像をクロップするのは、CSS2.1だけを使用してモダンブラウザにエミュレートできます。一つ目のデモでは、背景で表示するべき画像をクロップしています。

cs508 2011/03/10

リンク