CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
CSSで背景画像をぼかす方法【決定版】
CSSで背景画像をぼかす方法をご紹介します。 つまり、 これを こうする方法です。 理屈も含めて解説していきますが、結論だけ知りたい方は スキップ しちゃってください。 filter プロパティの blur() 関数を使う 結論としては、CSSの filter プロパティ の blur() 関数 を使います。 まず、深く考えずに要素全体に blur() でぼかしをかけてみましょう。 #target { background-image: url('../images/bg.jpg'); filter: blur(3px); } おっと、前面のテキストまで一緒にぼかされてしまいましたね💨 どうやら背面と前面でレイヤーを分ける必要がありそうですね。 レイヤーを分けて背景だけをぼかしてみる :before 擬似要素でぼかす用のレイヤーを追加してみましょう。 #target { position
CSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 | WEMO
CSSのflexboxで最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 2019 9/02 CSSで要素を横並びにしたいときに非常に便利なflexboxですが、「最初や最後の一つだけ並び順を逆にしたい...！」という時にどうすればいいのかパッと分からなかったので調べてきました。 「一つだけ並び順を逆に」というのは例えば、3つ並べる要素のうち、2つは左寄せでいいけど最後の１つは右寄せがいい、という場合のことです。 この記事のアイキャッチ画像にある３つのボックスの状態ですね。 floatを使っている時は一つだけrightにするなどすれば簡単に実現できたのですが、flexboxでは少し特殊な方法になります。 方法１：flexboxを入れ子にする これは今回紹介したいメインの方法ではないので詳しくは紹介しませんが、まず最初に思いつく方法ではないかなと思います。 flexboxを入れ子に
CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック
テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。 A table with both a sticky header and a sticky first column 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ
CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方
ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最
Reactで作るアナログ時計
2023年2月7日 JavaScript, React 以前よりReactの勉強がてら、1時間を40分で区切った36時間時計というのをモクモクと作っています。その中でReact Hooksの使い方などを学んでいるので、今回はよくあるアナログ時計を作りながら勉強メモとして残しておきます。 ↑私が10年以上利用している会計ソフト！ こんな感じのアナログ時計作ってみた よくある時計ですね！個人的にはデジタル時計派なのですが、意外と需要があるようなので作ってみることに。ちなみにこれは別にReactを使わなくても、素のJavaScript（Vanilla.js）で作成可能です！が、上記36時間時計を作る中でReactコンポーネントとして必要だったので今回はReactで挑戦しました。 CSSでベースとなるアナログ時計作り アナログ時計自体は空の div にサイズや position の設定をして作成。
これなら簡単で便利！ Tailwind CSSのチートシートをすばやく表示できるChromeの機能拡張
簡単にすばやく表示できる、Tailwind CSSのチートシートを紹介します。Chromeの機能拡張で、ツールバーから1クリックでチートシートを表示できます。 チートシートは、Tailwind CSS v.3対応。Tailwind CSSの各クラスセレクタとそのプロパティと値が一覧でき、コピペで簡単に利用できます。 Tailwind Cheat Sheet inside Chrome Extension -GitHub Tailwind CSSのチートシートの特徴 Tailwind CSSのチートシートのインストール Tailwind CSSのチートシートの使い方 Tailwind CSSのチートシートの特徴 Tailwind Cheat Sheet inside Chrome Extensionは、Tailwind CSSのセレクタに簡単にアクセスするためのChromeの拡張機能です。
IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css
*{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing
CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります
これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ
styled-components: API Reference
CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
CSS の Flexbox で、要素の左右中央寄せ、均等割り、右寄せ（ justyify-content ）の方法｜レンタルサーバーナレッジ
Flexbox で中央寄せにする方法 flex-container に「 justyify-content 」プロパティを使用します。 各プロパティの値は下記の通りで、例えば中央寄せにしたい場合は、center を指定します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <title>Flexboxテスト</title> <meta charset="UTF-8"> </head> <style> .container{ display: flex; width: 100%; background-color: #aaa; /*並び順*/ /* flex-start：左寄せ（デフォルト） flex-end：右寄せ center： 中央寄せ space-between：残り余白の均等割り space-around：左右余白 ＋ 均等割り *
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
有名サイトで使用されているCSSテクニックまとめ - Qiita
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
Tailwind CSS Cheat Sheet
Tailwind CSS Cheat Sheet - Flowbite
Defensive CSS
GitHub - hiloki/flocss: CSS organization methodology.
CSSで簡単に作れる！フローチャート＆ダイアグラム9選【タイムライン、家系図風など】
