Defensive CSS
👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or
垂直方向のマージンにはmargin-topを優先的に使う理由
margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上にマージン取る派と、下にマージン取る派がいると思うですけど、自分は今までずっと下で。というのは、その方が直感的だと感じるからなんですけど、見出しの下って結構縮めるよね？それを上マージンでやると結構頭こんがらがらない？って思うんだけどどうなんだろう — Takazudo (@Takazudo) January 12, 2021 上です — 全部入りHTML太郎 (@_yuheiy) January 12, 2021 なぜですか? — u (@uknmr) Januar
なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | POSTD
Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか？ 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか？ 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ロゴを配置する時のデザイン上の注意点 ロゴを配置するグリッドの実装 CSSブレンドモードを使用してホワイトの背景を削除する ロゴの最後の行の中央揃え 実装時の注意点 終わりに はじめに フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさ
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。 なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。 バグが発生するブラウザ ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法
ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。 この内側のコンテナを実装するさまざまな方法、それぞれの利点と欠点、解決方法を紹介します。 The “Inside” Problem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近のWebでよく見かけるレイアウト 古典的な解決策: 外側と内側のコンテナ 単一の要素だけの場合 コントロールが可能なコンテナがある場合 親にoverflow-xを使用しなくてもいい場合 CSS GridまたはFlexboxは役立ちますか？ 代わりに、端をフェイクする 最近のWebでよく見かけるレイアウト あなたはWebページの実装に取り組んでいます。レイアウトには端から端まで水平方向に伸びるbackground-colo
![[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6f987f7d13c29854dde3dd496f6cdc6d3799c15/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201903%2F2019060101.png)
CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ全体のレイアウト 隙間が必要なレイアウト 1次元と2次元のレイアウト ラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか？ ページ全体のレイアウト CSS Gridはコ
CSS Gridの実用的なテクニックが基礎からていねいに解説されたフロントエンドの制作者にオススメの本
CSS Gridをそろそろ始めてみよう、と考えている人にぴったりの解説書を紹介します。 本書は実践的な解説書で、CSS Gridを使用してデスクトップ・スマホ向けのさまざまなレイアウトをはじめ、ヘッダやセクションやフッタやナビゲーションなどのコンポーネントの実装方法が詳しく解説されています。 初心者の人にも中級者の人にもCSS Gridの実装を一からしっかり学べる一冊です。 本日、6/15発売です！ HTMLやCSSの基本的な解説はありません。CSS Gridについての基礎知識から実装方法までが解説されており、日常的にHTMLとCSSに触れられている人にお勧めします。 また、本書でのレイアウトは「ノンデザイナーズ・デザインブック」の基本原則に従ったもので、デザインについても学べると思います。 パラパラ見るだけでもCSS Gridのアイデアが膨らみます。 書籍版でもKindle版でも解説され
CSS Gridで実装する際にはこの点に注意、IE11以下・Edge15以下をサポートするフォールバックのテクニック
CSS Gridは非常に便利ですが、唯一の欠点はIE11以下・Edge15以下のユーザーをサポートする必要がある場合に期待通りに機能しないことです。 CSS Gridでページのレイアウト・グリッド・コンポーネントを実装する際に、IE11以下・Edge15以下をサポートするフォールバックのテクニックを紹介します。 Grid to Flex Grid to Flex -GitHub CSS Gridがレイアウトで優れている点は、水平方向と垂直方向の両方を制御して、レイアウトができるという点です。 Flexboxでは両方を制御することはできないため、その点に注意します。 CSS Grid, Flexboxについて学びたい時は、下記の記事がオススメです。 5分で完璧に分かる！CSS Gridの基本的な使い方を解説 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 CSS
CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い
CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。 デモはこちら デモページをブラウザで開いてウィンドウ幅を変えてみてください（CSS Gridがサポートされているブラ
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ
CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 基礎知識: インラインとブロック 要素が含まれるコンテナに指定して揃える コンテナ内の要素に指定して揃える 揃える方法の紹介の前に、まずは基礎知識から。 基礎知識: インラインとブロック 最初に重要なのは、揃えるのがインラインなのか、ブ
[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
エンジニア向け！CSSレイアウト講座＆用途別に選べる横並び・中央寄せのまとめ - Qiita
私の会社では、HTMLやCSSまわりはデザイナーやコーダー、マークアップエンジニア、フロントエンドエンジニアが作るのですが、 たまに工数の関係でバックエンドエンジニアやサーバーサイドエンジニアに直接HTML/CSS側を修正してもらうことがあります。 今回は、その方々向けによく質問に上がるようなレイアウトの基礎部分を教えるために展開した資料を再度まとめました。 ※HTML/CSSのソースが書いてある部分は、codepenなどで実際にソースを表示しながら説明したので 同じように確認してもらえると分かりやすいとおもいます。 ながれ HTMLのブロック要素とインライン要素 positionプロパティ 横並びのCSS 中央寄せのCSS（テキスト） 中央寄せのCSS（ブロック） まとめ HTMLのブロック要素とインライン要素 CSSの前に、少しだけHTMLについて説明をしたいと思います。 HTMLには
★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1
![★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7aa23551455018127a28922baa59c9101c06511/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061701.png)
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法 - NxWorld
特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。 これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。 参考: Internet Explorer サポートポリシー変更の重要なお知らせ そんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。 テキストや要素を左右の中央寄せに配置 テキストや要素を上下の中央寄せに配置 テキストや要素を上下左右の中央寄せに配置 テキストや要素をビューポートの上下左右の中央寄せ
![[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e06dab83915ff3fa91a0d356ebe7f551b51c01f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012101.png)
CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
