CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
Google Analytics 4 以外でウェブサイトを分析・改善するための無料ツール群とオウンドメディアでの活用法（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4はアクセス解析ツールのスタンダードとして、多くの企業やサイトに導入されています。しかし利用ハードルが高いのもまた事実です。数多くあるレポートや、自由度が高すぎて迷ってしまう探索レポート、独自の用語なども沢山あり、利用に苦労されている方も多いのではないでしょうか。 そこで、GA4以外でウェブサイトのユーザー行動を理解し、サイト改善するためのツールを厳選して紹介します。今回紹介するツールは無料で利用できるものをピックアップしています。無料プランと有料プランの両方があるサービスの場合は、その旨を記載しています。また、無料でも期間限定のサービスは追加していません。 数多く紹介することを目的とせず、全て筆者が利用している（あるいは利用経験があるもの）に絞り込み、その中で良かったと思うツー
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
GA4×サチコ×Looker Studioで可視化！ 現場で使われる“ダッシュボード”の作り方 | 【レポート】Web担当者Forumミーティング 2023 秋
Google Search Console（以降、Search Console：サーチコンソール）は便利なツールではあるものの、なかなかそのデータを活用しきれていない、活用したいがデータの加工などがやりにくいという悩みをよく聞く。SEOの分析、モニタリングツールの「Amethyst（アメジスト）」を提供するJADEの郡山 亮 氏が「Web担当者Forum ミーティング 2023 秋」に登壇。 無料ツール「Looker Studio（ルッカースタジオ）」を使ってSearch Consoleのデータを徹底活用し、現場で使われる、定点モニタリングしやすいダッシュボードをつくる方法を紹介した。 Search Consoleの扱いづらさをカバーするLooker StudioSearch Consoleはさまざまなことができるツールだが、今回は検索パフォーマンスの検索結果レポートに絞って紹介した。Se
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
ヘッドレスCMSの使い分け
Next.js vs Drupal - デジタル庁 Web サイトの戦い。モダン vs レガシーの熱いバトルがいまここに！SIer 系のみなさまの参戦もお待ちしております！ヘッドレスCMS ってなに？デジタル庁の事例とともに考える。
コンテナの話（AWSコンテナ系アーキテクチャの選択肢を最適化する）をした時にメンテナンス画面の表示についても軽く触れました。 改めて整理すると他にもいろいろあるということで、上から順に超ザックリと並べていきたいと思います。一応 AWS でを想定していますが、一般的な方法論でもあるので、どこだろうと何かしらの足しにはなるかもです。 条件 どのようなメンテナンス状態にしたいかによりますが、満たすべき条件はおそらくこのようなものがありますよ、ということで整理します。 １回の変更操作で、一括したメンテインを保証すること 管理者はメンテにならず通常アクセスする手段があること メンテ機能の仕込みによって悪影響がないこと 希望するメンテ用レスポンス内容を実現可能であること 静的 or 動的 Status Code 503 Content-Type レスポンス・サイズ 例えば DNS のレコード値を変更し
※本ページは、アフィリエイト広告を利用しています。 Webサイトやスマホアプリをはじめ、バナー、カード、雑誌やカタログなどで、情報を分かりやすく整理し、的確に伝えるためにもっとも重要なことはレイアウトを工夫することです。 テキストや画像、図版などのさまざまな情報の要素をどのようにデザインして配置するか、レイアウトデザインのルールとテクニックを学べ、そしてアイデアも満載の解説書を紹介します。 本書は「Second Edition」とある通り、2017年に刊行された「知りたいレイアウトデザイン」の第2版になります。前書では紙媒体のレイアウトが中心でしたが、第2版では紙媒体だけでなく、Webサイトやスマホアプリやバナーなどデジタル媒体のレイアウトが数多く解説されています。実例の数はおよそ3倍と大幅増量（担当者様より）です。 本書は今週、発売されたばかり！
Building a mindful relationship with digital media for zillennials prone to anxiety
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2023年のWebアクセシビリティに関連する出来事を振り返りつつ、2024年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2の勧告とWCAG 2.1の更新 長らく待ちわびていたWCAG 2.2について、2023年10月5日付けでようやくW3C勧告（Recommendation）となりました（日本語訳はまだありません。詳細は後述の「臨時WGの活動状況」を参照）。また、これと連動する形でWCAG 2.1（日本語訳）の勧告も改めて発行されました。 今回のWCAG 2.1の更新では、達成基準4.1.1構文解析に注記が設けられています。これにより、WCAG 2.2で削除された達成基準4.1.1の扱いについて連続性が保たれるようになっています。WCAG 2.1からの変更点は、公
Amazon ECSで好きなだけ検証環境を起動できるOSSの設計・実装・運用 / YAPC::Hiroshima 2024
https://fortee.jp/yapc-hiroshima-2024/proposal/1e9fbacd-5a50-43ef-87f1-490e85448f17
小さなゲームを作るとして、ターゲットデバイスと開発環境、何向けに何で作るのがいいんだろう - ABAの日誌
じゃあ小さなゲームを作ってみようか、と思ったときに、まず考えないといけないことの一つに、PC、スマホ、ゲーム機などなど、どのデバイスで動くゲームを作るかということがある。 特にこだわりがないのであれば、PCのWebブラウザ向けのゲームを作るのがおススメだ。今のブラウザは様々な開発環境で開発されたゲームを動作させるためのプラットフォームとして成熟しているし、他の人にプレイしてもらうにも、ネット上のURL告知からシームレスに遊んでもらえてお手軽だ。 ゲーム作りを楽しむ、という面では、どの開発環境・プログラミング言語・ゲームエンジンでゲームを作りたいか、から考える手もある。これについては小さなゲームだからどうこう、ということは特になくて、自分の好みで決めて良いと思う。ただ、重厚な3Dゲームを主なターゲットとしているUnreal Engineなどは小さなゲームを作るにはリッチすぎる、などは考慮して
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
Secrets from the Algorithm: Google Search’s Internal Engineering Documentation Has Leaked
Watch Our Google Algorithm Leak Webinar Replay Google, if you’re reading this, it’s too late. Ok. Cracks knuckles. Let’s get right to the Google algorithm leak. Internal documentation for Google Search’s Content Warehouse API has been discovered. Google’s internal microservices appear to mirror what Google Cloud Platform offers and the internal version of documentation for the deprecated Document
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
ドメインの変更は26日に実施。旧URLへアクセスしても自動的に新URLへ転送されるという。会社情報やサポートページなどは旧URLのままで、変更はないとしている。 関連記事 任天堂、「Newニンテンドー3DS」など3製品の修理受付を終了へ 部品は在庫限り 任天堂は13日、携帯ゲーム機「ニンテンドー2DS」「Newニンテンドー3DS」「Newニンテンドー3DS LL」の本体について、現在保有している部品在庫がなくなり次第、修理サービスを終了すると発表した。 3DSとWii U、オンラインプレイは4月9日で終了へ 任天堂は、ニンテンドー3DSとWii Uのソフトでのオンラインプレイなどのサービスを4月9日で終了すると発表した。 任天堂、被災した製品の無償修理を発表 保証書の有無問わず 任天堂は16日、令和6年能登半島地震により被災したゲーム機などの任天堂製品を無償修理すると発表した。 ゆうちょ銀
ヒアリングに行くのではない。最初から価値を与えること。これは、プロジェクトの初期対応でデザイナーが取るべき基本的な態度です。 今回のテーマは、デザインの初期対応。その効果的な動き方を紹介します。 デザインプロジェクトのスタートは、他者から依頼を受ける場合と、デザイナー側から提案を始める場合の２つのパターンがありますが、今回はそのうちの「デザイナーが依頼を受けるパターン」について。 初期対応の時点で、デザインの成果の半分は決まってしまいます。それくらい重要なものですが、なせかデザインの世界ではあまり論点化されていません。自分の経験が何かの役に立てばとの期待を込めて。どうぞ。 ヒアリングじゃない。ディスカッションだ。依頼や問い合わせを受けてデザイナーが初期対応すること。これをヒアリングと呼ぶこともありますが、それには注意が必要です。 最初に関係性が固定されるヒアリングに行く。情報を聴きに行く。
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
[【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう！』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。
横スクロールバーの発生源はデベロッパーツールのConsoleですぐに特定できる横スクロールバーの発生源の特定方法として有名なのは全称セレクタですべての要素にoutlineを付与して確認する方法だと思われますが、次のスクリプトをデベロッパーツールのConsoleに貼り付けて確認したほうが手っ取り早いです。
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
セキュリティの不十分なサーバーを見つけるためにウェブサイトには日々多数の不審なアクセスが行われています。そうしたアクセスをしてくる相手に対して解凍すると容量が膨れ上がる「ZIP爆弾」を送りつけて撃退する方法がブログにまとめられています。 How to defend your website with ZIP bombs https://blog.haschek.at/2017/how-to-defend-your-website-with-zip-bombs.html ZIP爆弾とは、ZIPの圧縮アルゴリズムを最大限に活用することで巨大なファイルを小さなZIPファイルに収めたものです。例えば下記の記事ではたった10MBのZIPファイルを解凍すると281TBになってしまうZIP爆弾が登場しています。 「非再帰的ZIP爆弾」は10MBのファイルが281TBに膨らむ - GIGAZINE サーバ
日本語におけるtext-wrapプロパティの運用
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。
アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーションの原理を理解し、実装する方法を紹介します。 FLIPアニメーションとは FLIPとは、First, Last, Invert, Playをまとめた造語です。これらはFLIPアニメーションの手順を説明したものになります。 First：アニメーションを開始するときの状態 Last：アニメーション終了時の状態 Invert：変化量を計算し、Lastの状態に適用してFirstの状態を復元します Play：Invert量を徐々に減らしてLastの状態に近づけていきます FLIPのおもしろい点
ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり
SENDUNEは簡単にHTMLメールをデザインできるオープンソースのツールとのことなので、実際に使い勝手を確かめてみました。 Open source, drag and drop HTML email designer. | SENDUNE https://designer.sendune.com/ サイトにアクセスするとこんな感じ。あらかじめプリセットが用意されています。 「Your Logo」と書かれた部分をクリックすると左側でロゴの設定を編集できるようになりました。「Upload Image」をクリック。 標準でいくつかの画像が用意されていますが、今回は「Click To Upload JPEG or PNG or GIF」をクリックし、手持ちのGIGAZINEロゴ画像を選択して「開く」をクリックしました。 アップロードされた画像を確認し、「Select」をクリック。 ロゴの下の枠に
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
Tailwind CSSを本気でカスタマイズする方法
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
Tailwind CSS を使う時に一緒に入れたいライブラリ
jQuery 4.0.0 BETA! | Official jQuery Blog
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
メンテナンス画面の表示方法いろいろ | 外道父の匠
情報整理から視線誘導まで、レイアウトに関するテクニックがこれでよく分かるデザイン書 -知りたいレイアウトデザイン
美しいUIを作るために デザイナーが意識している ちょっとした考え方
2024年のWebアクセシビリティ | gihyo.jp
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
任天堂、Webサイトのドメイン変更へ 26日から 「nintendo.com/jp」に
ヒアリングを超えていく、デザインの初期対応｜大﨑 優｜CONCENT
横スクロールバーの発生源を素早く特定する方法と最新の防止策 – TAKLOG
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
ウェブサイトに侵入してくる相手にZIP爆弾を送りつけて撃退する方法
JavaScriptで実現するFLIPアニメーションの原理と基礎 - ICS MEDIA
Figmaのデザイン制作が楽になる時短プラグイン30選
見た目そのまま編集可能なオープンソースのHTMLメールデザインツール「SENDUNE」を使ってみた