small 画面でも、 BIG 画面でも、 今すぐ使えるレスポンシブ活用術== 関連資料 == CSSメディアクエリの正しい使い方（動画）： http://daniemon.com/videos/using-media-queries/ リサイザー： レスポンシブWebデザイン用のページリサイズツール： http://daniemon.com/tools/resizer/Read less
Speed up CSS prototyping* »
Speed up CSS prototyping* This is a simple trick to overlay a grid or a mock-up over a page you’re styling. It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text. These are the rules to include in the styles sheet you work on: body::before { content:""; position:fixed; background:url(https://css-101.org/wp-content/themes/pd
Responsive Web Design を利用している企業サイトリスト
allWebクリエイター塾 ブログでは、Responsive Web Design（レスポンシブ・ウェブデザイン） をよく取り上げています。では、実際に一般のウェブサイトや個人以外のウェブサイトで Responsive Web Design を利用しているサイトはどのくらいあるでしょう？ということで探してみました。特に一般の企業を中心に集めてみましたので、レスポンシブ・ウェブデザインが一般企業でどこが利用しているのか興味がある方は、是非とも参考にしてみてください。 新聞編 About.comなんと、New York Time の一部である、「About.com」ですが、レスポンシブウェブデザインです。日本の各新聞にもそのビジネスモデルまで影響をあたえる「New York Times」までもが Responsive Web Design（レスポンシブ・ウェブデザイン）とは驚きですね。海外では
[CSS]「:target疑似クラス」をつかった実用的なスタイルシートのテクニック集
「:target疑似クラス」をつかって、タブコンテンツ、画像ギャラリー、画像拡大、アコーディオンなど実用的なコンテンツを実装するチュートリアルを紹介します。 キャプチャはW3Cの「The target pseudo-class :target」 [ad#ad-2] 「:target疑似クラス」はCSS3で、アンカーリンクがアクティブな状態にスタイルを適用するものです。 IE6～8では「:target疑似クラス」は動作しないため、代替を用意したり、スクリプト「Selectivizr」を利用するなどなんらかの対応が必要です。 「:target疑似クラス」をつかって、タブコンテンツを実装 「:target疑似クラス」をつかって、画像ギャラリーを実装 「:target疑似クラス」をつかって、画像の拡大表示を実装 「:target疑似クラス」をつかって、画像のズームイン・アウトを実装 「:targe
TypeKitから始まるウェブ文字革命
今月はじめに John が来日したときに「フォント関連で近々発表があるんだよね」と言っていたのですが、ついに全貌が明らかになったようです。Jeffrey Veen を中心に TypeKit というプロジェクトが立ち上がる模様です。既に WebKit, Opera 10, Firefox 3.1 3.5 でサポートされている @font-face。利用者のパソコンにあるなしに関係なく指定のフォントが使えるようになります。つまり、今まで仕方なく画像文字にしていた部分もテキストで処理可能になる可能性があります。 @font-faceでまず問題になるのが著作権に侵害しないかどうかという部分です。多くのフォントはウェブ上での配布を禁じていますし、@font-face の許可をしていないフォントもあります。法的な問題や DRM を気にせず安心して @font-face を使った文字表現をするために生ま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ピュアCSS3で3Dアニメーション:phpspot開発日誌