2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
【定番】UIデザインで効果的なドロップシャドウ、影の付け方５選
文字や画像に、まるで影が落ちているような立体感を表現できる、「ドロップシャドウ（英： Drop Shadow）」。 美しい影をデザインするテクニックや、コピペ可能なCSS便利コレクションや色付きの影生成ツールなど、さまざまな「影」を紹介してきました。 今回は、最近のWebサイトで効果的なドロップシャドウ5つのスタイルの作成方法、使いかたを詳しくみていきましょう。 1. 基本のドロップシャドウ 2. ハードシャドウ・スタイル 3. ハイコントラスト・シャドウ 4. ローコントラスト・シャドウ 5. カラーシャドウ まずは、基本のドロップシャドウ ウェブサイトでもよく見かける、一般的な以下のカード型UIデザインを参考に、さまざまなドロップシャドウを追加していきます。 ここでは、無料ダウンロードできるFigma用UIキットを利用。画像イメージや見出しも便利なプラグインで自動、一発で挿入してくれま
たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個
モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren
The Quickest & Easiest Way To Build Complex CSS Grid Layouts
Build complex CSS grid layouts — visuallyIt's a professional tool: implicit grid tracks (auto-generated grid), minmax(), fit-content(), export in JSX and Styled Components. JavaScript is disabled. The app requires JS. Please, enable JavaScript and refresh the page. Unfortunately, your browser doesn't support CSS Grid Layout. Please, upgrade your browser. Google Chrome is a good option. Hope to see
クリエイティブ系のウェブサイト制作で役立つCSS技法（池田 泰延） — TechFeed Conference 2022講演より
本記事は、TechFeed Conference 2022のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画（YouTubeチャンネル登録もお願いします。） スライド資料へのリンク みなさんこんにちは、私のほうでは「クリエイティブ系のWebサイト制作で役立つCSS技法」ということで発表していきます。 簡単に自己紹介します。池田泰延といいます。株式会社ICSの代表をやっています。経歴としてはFlashからCanvas、WebGLと渡り歩いてきました。 今日はWebの演出技法にフォーカスして紹介していきたいと思います。 Color Pallet Visualizer - マテリアルデザインの”色の定義”をデータビジュアライゼーションで解き明かす まず
IE11とさよならしたら全力で使えるHTML/CSSまとめ【40個以上】 | deep-space.blue
Windows10でのIE11サポート終了とともに、IE11対応HTML/CSSとさよならした皆さん、お疲れさまでした！ （Windows8.1終了までIE11頑張るみなさん、お疲れ様です） 今更ですが、ぎりぎりまでIE11対応したので、最近のHTML/CSS事情が追い切れていません！ ということで！ 主にIE11対応なしなら、iOS13以降で（iOS14以降のCSSも最後に紹介しています）使えるHTML/CSSの中から、筆者が気になるものをまとめました！ 数が多いため詳しい使い方は説明省きます！ 利用する際は各自対応ブラウザ再確認をお願いしますJavaScript関連は紹介していません deep-space.blue は IE11→Edgeのリダイレクトリストに載せてしまっており、IE11（IE11モード）でデモを確認することは困難なのでIE11の場合の表示のスクリーンショットも記録とし
擬似クラス - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
News from WWDC22: WebKit Features in Safari 16 Beta
ContentsWeb Inspector ExtensionsContainer QueriesWeb Push for macOSSubgridFlexbox InspectorAccessibility ImprovementsAnimation ImprovementsOverscroll BehaviorShared WorkerAnd moreFeedback WebKit has had a big year, with over 162 new features and improvements shipping in WebKit browsers — including Safari 15.2, Safari 15.4, and Safari 15.5. Features from earlier this year include dialog element, la
ASCII.jp：ついにブラウザー対応が始まったCSS Grid Layoutで要素を並び替える方法
Firefox 52、Chrome 57でついに正式サポートされた、CSS Grid Layout Module（CSSグリッドレイアウトモジュール）。便利だけどちょっと難しい、CSSグリッドを使ったレイアウトの操作方法を解説。 この記事では、CSSグリッドレイアウトを使って要素（Grid Item）を任意の順番に配置する方法を説明します。そのあと、グリッドで複数の要素の位置を揃える方法を解説します。 過去にもグリッド関係の重要なトピックを掲載しました。最初に『2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方』でグリッドレイアウトで要素を配置するいろいろな方法を、次のステップとして自動で各要素を配置するグリッド自動配置アルゴリズムについてを『徹底検証！CSS Grid Layout Moduleの自動配置アルゴリズムはどう働くか？』で説明しました
CSSにそのうち導入されそうな@scopeとその関連概念
気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
“hex-color”値~16進数カラーコード｜色｜CSS－havin' a coffee break｜珈琲とウェブデザイン
“<hex-color>”値の構文 ハッシュ(“#”)に続けて色成分を2桁ずつの16進数で続けて記述します。 #〚赤〛〚緑〛〚青〛 色成分は赤、緑、青の順に記述し、範囲は“00”から“ff”です。1桁の色成分には“0”を付けて2桁にします。 “a”~“f”は大文字と小文字は区別されません。
見出しに使えるfit-contentを解説してみる | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。 fit-contentで背景色 fit-contentでコンテンツ幅に背景色 中央位置に配置した見出しに背景色をつけるスタイル。<h2>や<h3>などの見出しタグを親要素の中央の位置に配置しつつ、背景色をつけるためには横幅を指定しなければいけません。 fit-contentを使用しないと見出しごとに横幅を指定する必要がある また、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまいます。 h2やh3などの見出しにdisplay: inline-blockを使用すればコンテンツ幅に背景色をつけることができます。 しかし、中央配置ができないため、見出しタグの中に<sp
[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip
見た目は普通のツールチップ。軽快なアニメーションで表示されるのも、表示方向を指定できるのも探せばあると思います。 しかしその中身はピュアCSS、1kbの超軽量スタイルシートで実装された、スマホもサポートされたツールチップのライブラリを紹介します。
![[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip](https://cdn-ak-scissors.b.st-hatena.com/image/square/2986b9808bd8ab1a91fe28b547adec29088af56d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017062201.png)
position: sticky;の仕組みや実際の使い方をやさしく解説
position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky
主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム
Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://csslayout.io/
HTML & CSS Website Templates
SVG ファイルを外部読み込みして CSS で色を変更する方法｜tsuchippo blog
2022年のモダンCSS - TechFeed Conference 2022
