CSS Flexible Box （Flexbox） を使ってみよう - 最新仕様対応版 | WWW WATCH
スクリーンサイズや可変するウィンドウサイズなどに柔軟に対応するレイアウトが可能な CSS Flexible Box について、最新の W3C 仕様に基づいた解説をサンプルソースを使いながらやってみます。 CSS3 のモジュールとして策定されている CSS Flexible Box （CSS3 Flexbox） は、CSS によるレイアウトを実現するための仕組み。 レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。 現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。 CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 Septe
Windows8のパネル風UIを作成するサンプル＆デモ:phpspot開発日誌
Fullscreen Layout with Page Transitions | Codrops Windows8のパネル風UIを作成するサンプル＆デモ。 タブレットなどでも使いやすいインタフェースを実現するためのサンプルが配布されています。 カッコいいのでそのままカスタマイズして使えそうです。 タッチ範囲が大きくないとタッチ端末では使いにくくなりますがこれだと十分な大きさですね 関連エントリ モダンなサイトを作成するためのCSS3チュートリアル集 CSS3でChrome風ウィンドウを作成するチュートリアル PHPでOAuthサーバを作成するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル テキストを円形に描画するチュートリアル
Fullscreen Pageflip Layout | Codrops
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
JavaScriptを使わずにPinterest風レイアウトにする
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> <div class="pin"> <img src="image.png" /> <p>テキスト</p> </div> ... ... </div> </div> CSS Pinterest風レイアウトをCSSで実現するには、二つの方法が考えられます。 一つ目はfloa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
