z-index再入門 | 第1回 z-indexの仕組み
はじめに z-indexプロパティは要素の重なり順を指定することができます。z-indexプロパティを扱う際に、その原理やハマりどころを理解しておくと、より安全なCSSを書くことができるようになります。 z-indexを扱う上でのハマりどころ z-indexとpositionプロパティを使用したレイアウトで、要素の重なり順序を指定した際に、意図した通りに配置されない、ということが過去にあった人は少なくないと思います。 意図した重なり 次のサンプルは、オレンジの親要素を上に、グリーンの子要素はその下に配置したいと考え、その通りの結果が得られたものです。 <div class="block"> <div class="block__bg"></div> </div> .block { position: relative; width: 100px; height: 100px; backgr
メンテナブルな CSS 設計の考え方がよくわかる 「Web 制作者のための CSS 設計の教科書」
メンテナンス性に優れた 「ちゃんとした CSS を書く」 ための設計手法に関するノウハウやヒントが詰まった Web 制作者向けの書籍、「Web 制作者のための CSS 設計の教科書」 をインプレス様よりご恵贈いただいたので紹介です。 ちゃんと CSS を書くためのヒントがたくさん CSS は言語的に大して複雑ではないため、単純に見た目を再現すればよいというだけであればほぼ誰でも書けますが、数百から数千ページにおよぶ大規模な Web サイトや、頻繁に機能追加などの改修が行われる Web アプリケーションにおいて、あるいは複数人でソースコードのメンテナンスを行わなければならないような現場において、ソースコードがわかりやすく、再利用や拡張を含めてメンテナンスしやすい CSS を書くには、かなりの経験と能力が必要です。 本書は、そういったレベルで 「ちゃんとした CSS を書く」 ためのノウハウや
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2025年12月17日】 Flexboxの解説を2025年の現状にあわせて、修正しました。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5Experts.jp
CSSレイアウトを学ぶ
Web制作 W3G
Creative CSS3 Animation Menus