CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
HTML、CSSをある程度理解していて、HTML5、CSS3の実用的な使い方を学びたい人向けの先週末に発売されたばかりの本を紹介します。 HTML5の新しい要素から特に使用するものの使い方をはじめ、これから使われなくなる要素や属性、HTML5/CSS3未対応ブラウザへの対応方法など、すぐに現場で使える内容となっています。 HTML5&CSS3実践入門 [amazonでみる] [楽天ブックスでみる] 著： Brian P. Hogan 監修： 高橋登史朗 訳： 株式会社クイープ 出版社： インプレスジャパン 発売日： 2011/7/8 [ad#ad-2] 「HTML5&CSS3実践入門」は、今年の初めに出版された「HTML5 and CSS3: Develop with Tomorrow's Standards Today（amazonでみる）」の翻訳版で、今年最も旬なHTML5, CSS3
IE6やFx1.5などCSS3非対応ブラウザにも配慮した、CSS3のアニメーションで開閉するアコーディオンを実装するチュートリアルをThe CSS Ninjaから紹介します。 Create the accordion effect using CSS3 デモページ 上記のキャプチャはCSS3に対応したChromeのもので、アコーディオンの開閉はスムーズなアニメーションで行われます。 CSS3非対応ブラウザでは、アニメーションのエフェクト無しで開閉します。 CSS3で使用してるものは、角丸とアニメーションの開閉です。 アコーディオンはdl要素で実装されており、下記のようなシンプルなものです。 HTML <textarea name="code" class="html" cols="60" rows="5"> <dl> <dt><a href="#Section1">Section 1</a
画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。 HTML HTMLは非常にシンプルです。 <textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div
Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。
一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。 もうほんと、ナイスアイデア！ コードを見る前に実装方法をちょっと考えてみてください。 ↓はブラウザでの表示をアニメーションgifにしたものです。 Gif Style CSS3 Animation アニメーションはロード時のみなので、繰り返し見たい時はリロードで。 実装はこんな感じです。 HTML HTMLは非常にシンプル！ 画像はdivの背景として表示します。 <body> <div class="image"></div> </body> CSS スタイルシートも非常にシンプル、一枚の画像にモザイクからくっきりまでの各コマを並べ、CSSスプライトで次々にアニメーションで表示しています。 コードを見るまで、どうやって実装してるのか全く分かりませんでした。 body { ba
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
