はてなブックマーク

※本ページは、アフィリエイト広告を利用しています。 Webのアクセシビリティについて一度しっかり学びたかった、アクセシブルな実装ってどうやるの、最新の動向（WCAG 3.0やAIによる影響など）を知りたい、そんな人たちにお勧めしたい解説書を紹介します。 本書は先週発売されたばかりの最新刊、書店にも並んでいると思うでの、ぜひ手に取って確認してみてください。 著者は加藤 善規氏、見たことがある名前だ！ と思った人は正解です。HTMLとCSSのリファレンス本の定番『Web制作必携 HTML&CSS全事典』（紹介記事）の著者で、本書ではHTMLとCSSのしっかりした知識を基盤にしたアクセシビリティについて詳しくていねいに解説されいます。 「いちばんやさしい」とあり、確かにやさしく教えてくれる感じですが、はっきり言って本書の中身は非常に濃いです。この「いちばんやさしい」シリーズは私の知る限り初心者を

Chromeのブラウザはアップデートをチェックしていましたが、デベロッパーツールはなんとなくしか見ていませんでした。 デベロッパーツールで、CSSのcalc()やclamp()などの複雑な計算式やvwやcqwなどの相対単 […]

iOSにLiquid Glassが採用されてから早半年が過ぎました。 当初はiPhoneやiPadのUIに使いにくさを感じていましたが、Liquid Glassを採用しているアプリも増えた最近では逆に採用されていないアプリのUIを見るとちょっと古くさい感じがしたりします。 UIで使われるカードやボタンをLiquid Glassをはじめ、GlassmorphismやNuemorphismにするCSSをコピペで簡単に実装できるコードを生成するツールを紹介します。

iPhoneやiPadのスクリーンサイズと解像度とピクセル密度っていくつだっけ？ GalaxyやPixelのスクリーンサイズと解像度とピクセル密度は？ もちろんそれぞれの公式サイトで探せば見つかりますが、けっこう手間です。さまざまなデバイスのスクリーンサイズや解像度やピクセル密度などの仕様が一覧できる便利なサイトを紹介します。 古いデバイスのスクリーンサイズや異なるブランド間での比較などもできるので、公式サイトではできないこともできます。 What Is My Screen Size? スクリーンサイズとは、デバイスに搭載されているスクリーンのサイズです。 画面解像度とは、ディスプレイに表示できるピクセル数で、幅×高さで表されます。1920×1080の解像度は水平方向に1,920ピクセル、垂直方向に1,080ピクセルが表示されることを意味し、ピクセルの総数は約207万ピクセルです。 ピクセ

「藍原相撲字」「藍原江戸文字」「藍原勘亭流」「藍原筆文字楷書」「藍原筆文字隷書」などの手書きフォントをリリースされている藍原彼方さんから、新作の筆文字フォントがリリースされました！ 無料版と有料版が用意されており、無料版ではひらがな・カタカナをはじめ、一部記号文字、教育漢字（240文字）などが収録されています。 まずはさっそく、フォントのダウンロード方法から。 下記ページにアクセスし、「無料ダウンロード」をクリックすると、ダウンロードできます（要ログイン、登録無料）。 ライセンスは独自で、「商用での利用も可能です。」とのことです。ダウンロードファイル「free_readme.txt」をご覧ください。 藍原筆文字 凜華（フリー版） 『BOOTHの「スキ！」ボタンを押していただけると「フォントに需要がある」とわかるので、漢字が更新されるかもしれません。』とのことです。 「藍原筆文字 凜華」はす

カーソルで下からホバーすると弓の弦のように上から弾け、上からホバーすると下から弾ける、操作するのが楽しくなるホバーエフェクトを紹介します。 弓の弦のように弾けるホバーエフェクトはモダンCSSの機能（shape(), sibling-index()/sibling-count(), linear()など）で実現されており、コピペで簡単に実装できます。 実際の動作は、デモページをご覧ください。 まずは一方向のみに対応した弾けるホバーエフェクト、対応ブラウザはChrome, Edgeのみです。 See the Pen 伸び縮みするホバーエフェクト(Chromeのみ) by coliss (@coliss) on CodePen. 続いてこちらのデモは、上下の方向を認識する弾けるホバーエフェクト。 See the Pen 伸び縮みするホバーエフェクト: 方向認識(Chromeのみ) by coli

ブラウザに表示したあらゆるWebページにレスポンシブに対応したFigmaみたいなグリッドをオーバーレイー表示できるChromeの機能拡張を紹介します。 グリッドのオーバーレイはブラウザ内で完全にローカルで実行されるため、オンラインのWebページだけでなく、ステージングやローカル環境でもグリッドを表示できます。 Grid Overlay Proとは Grid Overlay Proの特徴 Grid Overlay Proのインストール Grid Overlay Proの使い方 Grid Overlay Proとは Grid Overlay Proは、無料で利用できるChromeの拡張機能で、表示しているWebページにレスポンシブ用のブレイクポイントを備えたグリッドをオーバーレイで表示します。簡単に言うと、FigmaのようなグリッドをあらゆるWebページに導入できます。 デベロッパーやデザイナ

2/11にアップデートされたChrome 145に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、まずタブの分割が正式サポートされたこと。そしてテキストの配置方法を制御するtext-justifyプロパティ、border-radiusのレンダリング変更、letter-spacingの%値、マルチカラムレイアウトにおける列の折り返しなど、Web制作者は要チェックです！ New in Chrome 145 Chrome 145 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに タブの分割 text-justifyプロパティ border-radiusの値が大きい場合のシャドウエッジ計算を最適化 CSS マルチカラムレイアウトにおける

※本ページは、アフィリエイト広告を利用しています。 「デジタルアイデンティティ」とは、オンラインサービスにログインするときに使用するIDなど、個人に関連づけされた属性情報の集合です。日常的に使用しているログイン認証・当人認証・身元確認といったアイデンティティは、デベロッパーによる緻密な設計の元に成り立っています。 オンラインサービスやショップ、アプリなどで使用される身元確認、当人認証、ID連携、アクセス制御など、ID管理機能を設計・実装するときに必要となる知識をしっかり学べる解説書を紹介します。 本書の対象となるのは、デジタルアイデンティティの専門的な知識を学びたいITエンジニア。Webサービスやアプリの設計に携わるエンジニア、認証機能を実装しているサービス開発者、認証機能をもったシステムの発注者などです。セキュリティのリスクを可能な限り低減させたいと考えている人に、特にお勧めします。

Gitってなんだか難しそう、と思っている人もいるかもしれません。 Gitはすべてのコマンドを暗記する必要はありません。必要になったら調べるのは、ごく普通のことです。重要なのは、そのコマンドがどのような影響を与えるかを理解することです。 Gitの出発点として、日常的によく使用するコマンドとそれらのコマンドがどのような影響を与えるのか、そしてやってはいけない間違いを紹介します。 The 15 Git Commands Every Software Engineer Uses by Hadil Ben Abdallah 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに git status -リポジトリの現在の状態を確認する git init —新しいGitリポジトリを初期化する git clone —リモートリポジトリをロー

CSSの新機能を早く使ってみたいと思うかもしれませんが、その前に古いCSSのメンテナンスをしなくてはと思っている人にお勧めの無料ツールを紹介します。 CSSをコピペするだけで、現在では必要のない古いCSSのハックを検出し、W3Cの仕様に準拠したCSSを提案してくれます。 ReliCSS ReliCSSは、古いブラウザ固有のCSSハックを識別し、デベロッパーが現在の仕様に準拠したCSSに置き換えることができるように設計されたCSSハックの検出ツールです。 このツールの目的は、クリーンでメンテナンス性の高いCSSを記述できるよう支援したいと考えたもので、古いCSSとモダンCSSとの間のギャップを埋めることを目指しています。

Web制作者の長年の悩みがようやく解決されます！ CSSで100vwを使用して幅いっぱいにすると、垂直のスクロールバー分が含まれて、水平スクロールバーが表示されてしまいます。この問題はWindowsで起こり、macOSでもクラシックのスクロールバーを使用していると起こります。 Chromeの次のバージョンである145では、vwのサイズに垂直スクロールバーの幅が認識されるようになり、100vwにした場合スクロールバーの幅のサイズを含まずに幅いっぱいとして機能するようになります。 まずはChromeのみですが、CSSワーキンググループで議決されたので、他のブラウザも随時サポートすると思います。 Using 100vw is now scrollbar-aware by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CursorやVS Codeのエディタで、インデントのガイドラインをアクティブなガイドラインだけハイライト表示させる方法を紹介します。 通常（左）はその箇所を含むすべてのインデントのガイドラインが表示されますが、右のようにアクティブなガイドラインだけを表示できるようになります。 参考: VS Code – highlight just the active indent guide インデントのガイドラインを表示させる方法 アクティブなガイドラインだけ表示させる方法 インデントのガイドラインを表示させる方法 まずは、インデントのガイドラインを表示させる方法から。 CursorもVS Codeもデフォルトではガイドラインをホバーで表示するになっていますが、一応。 設定を変更する方法はCursorとVS Codeは同じ。歯車アイコンをクリックして「設定」を開く、または右上のアイコンをクリックし

※本ページは、アフィリエイト広告を利用しています。 『HTML＆CSSポケットリファレンス』の改訂第4版が、発売されました！ 先週発売されたばかりの最新刊で、HTML Living StandardとモダンCSSに対応したリファレンス本です。もちろん、最新のブラウザにも対応しており、HTMLとCSSの基礎知識からこれから使うであろう最新機能まで、収録されています。 2026年になり、よし今年もがんばるぞ！ という人にぴったりの一冊です。 本書は2014年に刊行されて以来、だいたい4年ごとに改訂版となり、2026年ついに改訂第4版が発売されました。リファレンス本として本書の大きな特徴は、逆引きの目的別で掲載されており、サンプルコードもシンプルで、分かりやすいことです。

WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。 直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善することで、UIデザインのクオリティは格段にアップします。 14 logic-driven UI design tips to improve any interface by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペース要素は関連性に基づいて分類される 2. UI要素のコントラスト比が3:1であることを確認する 3. もっとも重要なアクションには単一のプライマリボタンを使用する 4. ボタンは十分なサイズを確保する 5. 重要なコンテンツが視認可能であることを確

Chromeは先日のアップデートで、1つのタブ内を分割して2つのWebページを表示できるようになりましたが、さらに便利に進化して、タブを垂直で管理できるようになります！ 水平だとタブを10個くらい開くと、タイトルが小さくなってしまいますが、垂直だとタブを20個くらいにしても問題ないので、使い勝手がよさそうです。 Chromeで垂直タブを有効にする方法 Chromeで垂直タブを使ってみた Chromeで垂直タブを有効にする方法 垂直タブはChrome 145で機能フラグを設定することで利用できます。 アドレスバーに「chrome://flags/#vertical-tabs」を入力。 「Vertical Tabs」のフラグを「Enabled（有効）」にしてChromeを再起動。

昨年末にリリースされたばかり、Chromeの便利な拡張機能を紹介します。 MiroMiroは1クリックするだけで、表示しているサイトを分析、デザイン要素を抽出、本番環境で使えるアセットに変換するオールインワンの拡張機能です。 デベロッパーツールや似た拡張機能よりも直感的に操作でき、かなり便利です。 MiroMiro -Chromeウェブストア この拡張機能は年末にリリースされたばかりで、まだユーザー数は多くありませんが、これから伸びてくると思います。 MiroMiroの主な機能は、下記の通り。 使用されているカラー・フルパレットを抽出 使用されているフォントを抽出 画像ファイル、アイコン、SVGを抽出 Lottieアニメーションを抽出 CSSスタイルを抽出 これらを1クリックするだけで、すべてを見ることができ、必要なものだけダウンロードすることもできます。 ということで、MiroMiroを

1/13にアップデートされたChrome 144に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、ページ内検索の検索結果をスタイルする::search-text疑似要素、スクロールの方向を探知する@scroll-stateなど、Web制作者は要チェックです！ また、ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるようになりました！ New in Chrome 144 Chrome 144 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 1つのタブ内を分割して2つのWebページを表示 CSSのアンカーポジショニングとトランスフォーム ページ内検索でハイライトする疑似要素 アンカーポジショニングにaria

年明けは気分一新したいですね。日常的に使用しているものを新調すると、良い1年が過ごせると言われています。 とは言っても、新調するのにはお金がかかるので、エディタのテーマを新調して、気分を一新てみるのはどうでしょうか。CursorやVS Codeで使用できる最近人気のテーマや機能拡張を紹介します。 下記のリンク先は、すべてVisual Studio Marketplaceです。 VS Codeにインストールするには「Install」ボタン、Cursorにインストールするには拡張機能から検索してインストールできます。 Cosmic Nebula Themes 宇宙・星雲の名の通り、宇宙の神秘的な美しさにインスパイアされてデザインされたテーマ。星雲の深みのあるパープルの背景と地球外生物を思わせるグリーンのアクセントカラーが読みやすさを向上させるコントラスト比を確保し、長時間のコーディングでも目の

2025年、当サイトで公開した記事の中から注目された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 AI関連 デザインのテクニック・インスピレーション Adobe, Figma, Affinity, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2025年はこれまで以上に大きく変化した年でした。2024年まではAIは活躍の場が限定されていましたが、2025年はさまざまなシーンに取り入れられ、仕事や生活の場で欠かせないも

※本ページは、アフィリエイト広告を利用しています。 Webサイトやスマホアプリの制作、UIデザインにFigmaを使用している人も多いと思います。確かに初期のFigmaはデザイナーがUIデザインに使うツールとしてがメインでしたが、現在のFigmaはアップデートが重ねられ、上流工程から下流工程まで幅広く活用できるツールに進化しています。 Figmaをデザイナーだけでなく、エンジニアやPMなどを含むチーム全体で活用し、デザインのコラボレーションツールとして生産性を向上させるための手順やテクニックを詳しく解説した解説書を紹介します。 本書は株式会社ニジボックスの2冊目となるFigmaの解説書です。前書『つくって、みなおす、デザインシステム』（紹介記事）では、実際のワークフローに基づいたデザインシステムの解説書でFigmaは部分的にしか触れられていませんでした。 本書は完全にFigmaの解説書、デザ

2025年11月にAffinityが無料化という大きなニュースがありましたが、同時に既存のv1, v2ユーザーに有料フォントを無料でプレゼントするという予告も実はありました。 気がつかなかった人や忘れていた人もいるかと思いますが、ようやく既存ユーザーに有料フォントをプレゼントする企画が実施されたので、紹介します。 Affinity 1/V2 ユーザーへの特別な感謝 対象はAffinity v1, v2のユーザーで、2025年11月1日以前に Affinityを購入した人限定。かつ、Affinityに登録済みである必要があります。 ※無料化になったv3からのユーザーは、対象外です。 購入したけど、Affinityに未登録の場合は、Affinity 1/V2 ユーザーへの特別な感謝の下部のFAQに登録する方法が記載されています。 無料でダウンロードできる有料フォントは、41書体453スタイル。

2025年のCSSの新機能のまとめは、いよいよ最終回。 今回はCSSのワークフローがより便利になる新機能が盛りだくさんです！ attr()関数の進化 テキストの配置をより細かく制御できるtext-boxプロパティ ついにCSSで使えるようになったif()関数 関数を自分で定義できる@function スタイルクエリとif()における範囲構文 width: 100%;より便利なstretchキーワード など、2026年はこれらの機能を使用していきたいですね。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに エルゴノミクス: CSSのattr()関数がパワーアップ エル

ぱっと見、なんてことはないエフェクトのように見えるかもしれませんが、ボタンのハイライトを繊細なアニメーションでパルスさせるエフェクトを紹介します。 シンプルなHTMLに、CSSをコピペするだけで簡単に実装できます。 実際の動作は、デモページでご覧ください。 「config」でそれぞれの数値を大きくすると、挙動がより分かりやすくなります。 See the Pen CSSで実装する繊細なパルスエフェクト by coliss (@coliss) on CodePen. HTMLはシンプル、ボタンはbutton要素で実装し、data-border-pulseを付与します。

先日紹介したカスタマイズ可能な新しいコンポーネント編に続いて、2025年、CSSの新機能のまとめ: 進化しているインタラクション編を紹介します。 今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 CSS Wrapped 2025 -Google Blog CSS Wrapped 2025 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスとApache 2.0に基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに インタラクション: scroll-stateクエリ インタラクション: ツリーカウント関数 インタラクション: scrollIntoView()コンテナ インタラクション: ネストされたビュー