Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
Web制作の悩みを救う、最新オンラインツール39選 2022年8月編
目まぐるしい変化への対応を求められるウェブ従事者にとって、制作をより快適にする便利な最新オンラインツールをまとめてご紹介します。 いままで時間のかかっていた面倒な作業がワンクリックで完了の時短ツールから、そのまま使えるウェブテンプレート、シンプルで使いやすいアイコン素材など、ウェブ制作のお悩みをまとめて解決できる、無料のツールや素材を中心にセレクト。 さいごは、「こんなツール、あったんだ」と思える、クリエイティブ全開なツールが控えます。暇なときの時間つぶしにもいかがでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザインツール 3. プロトタイプ・アイコンツール 4. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール Ho
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
便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
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
Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年
Web制作者がチェックしておきたい！ 2024年版、CSSフレームワークのまとめ
ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。 Awesome CSS Frameworks -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 ベース・リセットCSS・ノーマライズ クラスレスのCSSフレームワーク 超軽量のCSSフレームワーク 汎用性に優れたCSSフレームワーク Material DesignのCSSフレームワーク ユーティリティベースのCSSフレームワーク 特化型のCSSフレームワーク ツールキット ベース・リセットCSS・ノーマライズ sanitize.css -GitHub reset.cssと
最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ
最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9
New WebKit Features in Safari 15.4
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css
HTMLはシンプルなままで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログなどをさくっと作成したい時に便利です。少し手を加えて、CSSリセットとして利用するのもありかもしれません。 Almond.CSS -GitHub Almond.CSSの特徴 Almond.CSSのデモ Almond.CSSの使い方 Almond.CSSの特徴 Almond.CSSは、シンプルなWebサイトの見栄えをより良くするためのclassレスのCSSスタイル集です。CSSのスタイルを正規化してクロスブラウザで同様のエクスペリエンスを提供したり、カスタムスタイルを追加してちょっとしたスパイスを加えることもできます。 HTMLのセマンティックなタグとAlmond CSSを組み合わせるだけで（JavaScriptは不要です）、モダンなWebページが
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!
I'm very excited to announce @parcel/css, a new CSS parser, compiler, and minifier written in Rust! Check it out on GitHub, or try a live demo right in your browser. Parcel CSS has significantly better performance than existing tools, while also improving minification quality. In addition to minification, Parcel CSS handles compiling CSS modules, tree shaking, automatically adding and removing ven
フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ
読みやすい＝理解しやすい Webの組版を整理してより良い文章を届けよう - Qiita
この記事はQiita Advent Calendar 2021の12日目の記事で、Qiita株式会社 CX向上グループの綿貫（@xrxoxcxox）が担当します！ この記事の概要 Webの組版を現実的な手法で綺麗に整えるためのやり方をまとめました。 同じ内容の文章でも組版次第で読みやすさは変わります。 実は、意識していないとWebサイトの文章は余白がガタガタとかになりやすいんですね。 DTPに比べるとどうしても劣ってしまいますが、HTMLとCSSだけでできるだけ綺麗になるようにした & ステップバイステップで説明していますので良ければ真似てみてください！ ちなみに今回載せているコードは全てこちらのリポジトリにあります。 解決したいこと（≒よくあるWebの組版） 余白がガタガタ 見出しや本文のジャンプ率が適切でなく目が滑る 禁則処理がほぼ何も無い あまり意識したことは無いかもしれませんが、こ
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
kintoneマイクロサービス化検証プロジェクトのWebフロントエンドにおける技術選定 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームのsakitoです。 本記事ではkintoneをマイクロサービス化するためのPoCプロジェクトにおけるWebフロントエンドの技術選定について紹介します。 プロジェクト背景 本記事で扱うプロジェクトは「kintoneマイクロサービス化Proof of concept(PoC)プロジェクト」です。 現在サイボウズの主力製品であるkintoneは大きなモノリシックなアーキテクチャになっています。 モノリシックなサービスに関わる人数が増えるに伴って、意思決定や開発速度の低下が課題となってきています。 モノリシックなアーキテクチャや組織によって起こる課題を、マイクロサービスとして切り離して小さくすることで解決ができるのではないかと考えました。マイクロサービス化にあたって、まずはPoCとして一部の機能をマイクロサービス化するプロジェクトを発足し、kinton
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの難しさが分かるようになった人にお勧めの解説書、さまざまなレイアウトを実装する再利用性を向上させるCSSの設計方法 -Every Layout
