CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可能です。スタイルクエリを使えるようになると、どんな風に便利になるかを紹介します。 Add Superpowers to Your CSS Variables with Style Queries by Jared White 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スタイルクエリを使えるようになると スタイルクエリは変数と組み合わせると、さらに強力 スタイルクエリを使えるようになると CSSはスタイルクエリの登場により、さらなる
マンガや同人誌にぴったりなフリーフォント「GL-ノバンチカ源」 濁点・半濁点つきの仮名、小書き仮名、記号文字が盛りだくさん！
マンガ・同人誌向けのアンチック体フォントはたくさんあります。今回紹介する「GL-ノバンチカ源」はアンチゴチとしての読みやすさはもちろん、セリフや擬音・擬態語に使用する濁点・半濁点つきのひらがな・カタカナ、小書き仮名も揃っており、こんなにも仮名や記号文字が揃っているフォントはないと思います。小書きの「ん」や「ー」の濁点なども揃っています。 オープンソースなので、個人でも商用でも完全に無料で利用できます。しかも、改変や組み込みもOKの太っ腹ライセンス！ GL-ノバンチカ源 -GitHub 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」のダウンロード 「GL-ノバンチカ源」を使ってみた 「GL-ノバンチカ源」の特徴 「GL-ノバンチカ源」は、「GL-アンチック」「GL-オとマのペ」などマンガ・同人誌向けのフリーフォントや「GL-築地初号などを多数リリースされているGutenberg Lag
CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方
CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimgはターゲットにされません。 A quick introduction to CSS @scope by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS @scopeがなぜ必要なのか CSSカスケードの仕組み CSS @scopeの基本的な使い方 @scopeのさらに優れた使い方 はじめに CSSの@scopeについてご存じですか？ @sco
朗報！ CSS Flexboxの8年越しのバグがようやく修正されます
CSS Flexboxのこのバグに悩んだ人もいると思います。 リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。 左: バグ、右: 期待する表示 まずは、そのバグが確認できるデモをご覧ください。 すべてのアイテムはul内のliで実装されており、CSSでulにborder: 1px solid red;を設定しています。 しかし、ボーダーはリスト全体ではなく左端の1列のみに適用されます。このバグは現在、Chrome, Safari, Firefoxで確認できます。 参考: Issue 507397 ※上記ではEdge（non chromium version）は期待通りに表示されるとあり、Edge 115（chromium version）ではバグで表示されます。 See the Pen "flex-f
VS Codeにお勧めのフォント！ 似た字形をはっきり区別でき、プログラミング向けに読みやすさを追求 -Commit Mono
コードがはっきりときれいに見えるように、プログラミング向けに読みやすさを追求したフォント「Commit Mono」を紹介します。 似た字形（「tl1I|!ij」「O0QDØ38B」「:;.,''''"」「2Z5S7T6b」）ははっきりと区別できるようにデザインされており、また等幅フォントでよくある特定の文字間で幅が等しく見えない問題（「mm」「oの左右」など）も改善されています。 Commit Mono. Neutral programing typeface Commit Monoは、デンマーク出身のクリエイティブデベロッパー兼デザイナーであるEigil Nikolajsen氏によるプロジェクトで、プログラミング向けに読みやすさを追求して作成されたフォントです。 ライセンスはSIL OPEN FONT LICENSE Version 1.1で、商用利用は無料、Webフォントに変換したり改
これは嬉しい！ 漢字がJIS第2水準までしっかり揃ったピクセルフォントがリリース、しかも商用利用も無料 -マルミーニャ
ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」（紹介記事）も漢字対応です。 「マルミーニャ」はかわいさの中にまじめさがある丸ゴシック体のピクセルフォントで、幅広い用途でピクセルの表現を堪能できます。 マルミーニャ マルミーニャ -BOOTH マルミーニャのダウンロード マルミーニャの特徴 x0y0pxFreeFontの他のフォント マルミーニャのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイト。「マルミーニャ」リリースのタイミングでサイトがGitHubに移転されました。フォントのダウンロードは、フォント下の「Download」をクリックするだけです。
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。 Better Folding Better Foldingの特徴 Better Foldingのインストール Better Foldingを使ってみた Better Foldingの特徴 Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。 VS Code標準の折りたたみ機能をより使いやすくします。 左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ
画像生成AIの情報が整理されていて分かりやすい、一通り知っておきたいことがまとめられられた解説書 -先読み！IT×ビジネス講座 画像生成AI
画像生成AIが大きな注目を集めていますね。しかし、情報の量も非常に多く、少し混乱してしまうこともあるかもしれません。 画像生成AIとはどんなサービスなのか、どんな仕組みで生成されるのか、どうやって使用すればよいのか、お勧めのサービス、キーワードの作り方、思い通りの画像にするための呪文、著作権などの法律上の問題点、画像生成AIの活用方法など、これだけは理解しておきたいというのがまとまった一冊を紹介します。 『先読み！IT×ビジネス講座』シリーズは、「この先どうなっていくかがわかる」「リアルな話がわかる」「手っ取り早くわかる」の3つの「わかる」をコンセプトにした解説書。第1弾は『メタバース&NFT（Amazon） 』で、本書が第2弾となります。 第2弾は画像生成AIで、画像生成AIの技術的な仕組み、利用できる画像生成AIサービスと実際の作成方法、著作権などの法律上の問題点などについて、分かりや
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
iPhone, iPadの最新機種まですべてを網羅、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes
Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスのスクリーンサイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 2022年の最新モデル、iPhone 14シリーズ、iPad Air(5th Gen), Apple Watch Series 8をはじめ、最新機種から初代までの情報が網羅されています。 Screen Sizes サイトを利用するのは簡単、登録など面倒なことは一切不要です。 アクセスして、サイドバーから欲しい情報にアクセスするだけです。 iPhone 14 Pro Maxは今までになかった新しい解像度ですね。
神アップデート！ Win, Mac, Linux対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
HTML, CSS, JavaScriptをはじめとしたさまざまな言語に対応、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャー「massCode」がv3に神アップデートされたので、改めて紹介します。 macOS, Windows, Linux対応、日本語の入力など日本語環境も完全サポート。クラウドで同期できるので、すべての環境で同じコードスニペットを使用できます。 非常に快適で高速に動作し、VS Codeとの連携でさらに便利になっています！ massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 1
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
便利な無料ツールが登場！ 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でソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ
Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに使えるCSSのテクニックです。 my favorite clever CSS tricks by @Steve8708 下記は各ポイントを意訳したものです。 ※著者様の許諾のもと、翻訳・掲載しています。 Apple: ヘッダに使用されている美しい磨りガラスのエフェクト Appleのヘッダに使用されている、美しい磨りガラスのエフェクトはCSSで実装されています。 How does Apple make that awesome frosted glass effect
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
全部、商用利用も無料！ Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適
商用利用無料！ 医療・健康向けのUI用に美しくデザインされたSVGとFigmaのアイコン素材 -svg.health
