Compat 2021 mid-year update: Flex gap everywhere | Blog | web.dev
Compat 2021 mid-year update: Flex gap everywhere Stay organized with collections Save and categorize content based on your preferences. Mid-year update on Compat 2021—an effort to eliminate browser compatibility problems in five key focus areas: CSS flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms. It's time for the mid-year update on Compat 2021—an effort to eliminate browser
グーグル直伝！ CSSとウェブフォントのコア ウェブ バイタル最適化テクニック【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
CSSを少し変えるだけでコア ウェブ バイタル（CWV）を改善できるとしたら？ 「無理でしょ」と思うかもしれないが、けっこう使えるテクニックをグーグルが解説してくれている。 また、今回はさらに「利用していないJavaScriptを削除して、CWV改善＋セキュリティ」という話題もピックアップしている。 少し技術的なトピックだが、知っておいて損はないネタだ。 ほかにも、「コア アルゴリズム アップデートが来たけど来月も来る」「ファーストビューで見えるコンテンツ」「インデックス制限」「リンク否認」などなどなど、あなたのSEOとWebサイト運営に役立つ情報をまとめてお届けする。 2021年初のコア アップデートをグーグルが6月に実施、2部構成の後半は7月に予定ファーストビューでは各ページ固有なコンテンツを見せるべきグーグルのインデックスするページ数に上限はあるのか？不自然リンクへの対処はリンク否認
React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
SPA Componentの推しディレクトリ構成について語る
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う
Autoplay carousel | Web Vitals patterns | web.dev
Autoplay carousel Stay organized with collections Save and categorize content based on your preferences. This carousel uses CSS scroll snap to create smooth, performant slide transitions that do not cause layout shifts. This carousel can be navigated in a variety of ways: in addition to navigation controls, it supports keyboard navigation and swiping. To maximize usability and readability, the car
CSS コンテナクエリ（@container）の便利な使い方を解説
CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSコンテナクエリの背景 CSSメディアクエリの問題点 CSSコンテナクエリはどのように役立つのか？ CSSコンテナクエリの基礎知識 CSSコンテナクエリの使用例 CSSコンテナクエリのデバッグ方法 まとめ
CSS flexboxで実装する、レスポンシブ対応のステップのコンポーネントを解説
Webページで使用されるステップのコンポーネント、サークルに囲まれた1,2,3と各ステップを繋ぐ中央のラインを実装するCSSのテクニックを紹介します。 レスポンシブ対応、そしてライト・ダークモード対応、水平・垂直に配置されたステップだけでなく、数字ではなく日時を繋いだタイムラインにも応用できます。 Building A Stepper Component by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装: 水平ステップ 1 ステップの前後にスペースがあるバージョン 実装: 水平ステップ 2 実装: 垂直ステップ 1 実装: 垂直ステップ 2 終わりに はじめに 私は先日、レスポンシブ対応のステップのコンポーネントの実装方法とそれらを繋ぐ中央のラインの扱い方について質問を受けました。
CSSで米印つきの<ul>、<ol>リストを作る - 続・すみっこの記
商品の注釈なんかで ※1 注釈だよ ※2 注釈だよ ※3 注釈だよ とか ※注釈だよ ※注釈だよ ※注釈だよ みたいなリストを作りたいことがあるじゃないですか。 こういう場合のCSS指定を毎回忘れるのでメモしておきます。 米印つきの<ol> CSS ol.asterisk { counter-reset: number; list-style: none; } ol.asterisk li:before { counter-increment: number; content: "※"counter(number)" "; } 表示結果 注釈1 注釈2 注釈3 米印つきの<ul> CSS ul.asterisk li { list-style-type: none; text-indent: -1em; } ul.asterisk li:before { display: inline;
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
HTMLとCSSでパララックスページを作ってみよう | Casley Deep Innovations株式会社 技術ブログ
皆様こんにちは。 キャスレーコンサルティング、CC(CSVクリエーション)部の細見です。 今回は、HTMLとCSSだけで作ることができる、レスポンシブに対応した シンプルなパララックスページの作り方を、ご紹介したいと思います。 「パララックスってなに？」と思われる方もいらっしゃると思いますので、 まずは、その言葉の意味から解説したいと思います。 1. パララックスとは パララックス(en. Parallax)とは、日本語で「視差」という意味です。 Webデザインの世界においては、「視差効果」とも呼ばれ、画面をスクロールするといった動作の際に 要素を異なる速度で動かしたりすることで、あたかも立体で奥行きがあるように見せる手法とのことです。 最近ではプラグインも増えつつあり、単に速度の変更だけでなく、様々な動きを持たせることが可能になってきました。 2. 実際に触ってみましょう まずは、こちら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Fundamentals — Google Developers
Next.js (JavaScript/TypeScript) に Chakra UI を導入する方法 | fwywd（フュード）powered by キカガク
next.js - Visual Studio Marketplace
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
はじめての Angular / Tailwind CSS
Tailwind CSS のカラーパレットを拡張する方法 | fwywd（フュード）powered by キカガク
Euismod