2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ

2024/12/19 118 users CSS GitHub WEB制作者 一行 まとめ

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳し... 続きを読む

2024年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ

2024/07/30 8 users ロゴ トレンド デザインテクニック ロゴデザイン まとめ

デザインの引き出しを増やすためには、トレンドを知っておくことが大切です。 デザインの基本となるタイポグラフィ、カラー、形などの要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2024 Logo Trend Report by BILL GARDNER 下記は各ポイントを意訳したものです。 ※元サ... 続きを読む

Chrome 127で新しく追加された3つのCSSの機能、使用するフォントに関係なく読みやすくするなど

2024/07/29 7 users CSS iframe フォント 代替テキスト 要チェック

Chrome 127で追加された、CSSの新しい機能3つを紹介します。 今回のアップデートでは、使用するフォントに関係なく読みやすさを確保したり、生成コンテンツ内の代替テキスト、iframeでのビュー遷移のサポートなど、Web制作者は要チェックです！ New in Chrome 127 Chrome 127 beta 下記は各ポイントを意訳したものです。... 続きを読む

Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック

2024/07/25 14 users CSS テクニック almost Webサイト 一行

Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に... 続きを読む

Web制作者は要チェック！ Chrome 122で新しく追加された3つのCSSの機能

2024/02/27 9 users CSS デフォルト 既存 新しいプロパティ 仕様

Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効になっています。 Chrome 122 beta New in Chrome 122 下記は各ポイントを意訳したものです。 ※元... 続きを読む

Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能

2023/11/02 17 users 疑似クラス 新しいCSS 要チェック RCS WEB制作者

New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) ... 続きを読む

Chrome 116 デベロッパーツールの新機能が便利！ 正常に読み込まれなかったスタイルシートのデバッグが簡単に

2023/08/22 11 users ライセンス 改良 デバッグ 下記 多く

先日リリースされたChrome 116 デベロッパーツールの新機能で、正常に読み込まれなかったスタイルシートを簡単にデバッグできるようにするための多くの改良が加えられました。 What's New in DevTools (Chrome 116) 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてと... 続きを読む

最近のロゴデザインに使われている、すごいデザインテクニックのまとめ -2023 Logo Trends Report

2023/06/22 272 users すごいデザインテクニック ロゴデザイン タイポグラフィ 要素

デザインの引き出しを増やすためには、トレンドを押さえておくことは大切です。 デザインの基本となるタイポグラフィ、カラー、形などの要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2023 Logo Trend Report by BILL GARDNER 下記は各ポイントを意訳したものです。 ※元... 続きを読む

CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました

2023/05/09 49 users update CSS リフレッシュレート メディアクエリ 下記

2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様の... 続きを読む

divはボタンではない、ボタンの実装について知っておくべきすべてのこと

2023/02/09 160 users div Button 実装 buttonタグ divタグ

クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したも... 続きを読む

JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説

2023/01/11 48 users 配列 オブジェクト filter JavaScript 解説

JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに filter()メソッド: オ... 続きを読む

この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

2022/08/09 121 users ボーダー モダンCSS 発想 テクニック 矩形

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと... 続きを読む

Web制作者がチェックしておきたい！ 2022年版、CSSフレームワークのまとめ

2022/04/07 23 users CSSフレームワーク グラスレス WEB制作者 GitHub

ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。 Awesome CSS Frameworks -GitHub 下記は各ポイント... 続きを読む

最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ

2022/03/31 202 users UIコンポーネント エフェクト デベロッパー CSS 一昔前

最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを... 続きを読む

Webページやアプリの実装に、知っておくと便利なHTMLの属性のまとめ

2022/02/17 41 users 属性 実装 HTML アプリ Webページ

Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。 24 Lesser-Known HTML Attributes You May Want to Use ✨📚 by Madza (@madzadev) 下記は各ポイントを意訳したものです。 ※当... 続きを読む

グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

2022/01/27 576 users CSS グラデーション 美しいグラデーション 中央 解説

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当... 続きを読む

プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9

2021/12/15 10 users UX Micro-Tips 見出し UIデザイナー 本文 印象

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第9弾は見出しや本文など、テキストのデザインのテクニックです。 UI & UX Micro-Tips: Volume Nine. by Marc Andrew 下記は各ポイント... 続きを読む

CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法

2021/12/07 30 users スティッキー sticky position 2カラム メイン

CSS Gridで2カラムのレイアウト（メインとサイドバー）を実装し、サイドバーにposition: sticky;を定義したけど、機能しなかったことはありませんか？ CSS Gridでスティッキーが効かないときの原因とその対応方法を紹介します。 Using Position Sticky With CSS Grid by Ahmad Shadeed 下記は各ポイントを意訳したもので... 続きを読む

Figmaでデザインする時に作業効率がアップする便利なテクニックのまとめ

2021/10/19 11 users figma テクニック by Marc Andrew 周り

私の周りでも、Figmaを使用する人がだいぶ増えてきました。 Figmaでデザインする時に役立つ、便利なテクニックを紹介します。Figmaでの日常的な作業から、デザインシステムや巨大なデザインファイルを扱う場合に作業効率がアップします。 9 Figma Design System Tips. by Marc Andrew 下記は各ポイントを意訳したもので... 続きを読む

デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ | コリス

2021/09/14 207 users コンバージョン コリス UIデザイン ユーザー 翻訳記事

フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト... 続きを読む

CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる | コリス

2021/08/26 17 users プログレスバー コリス CSS ライ 新しいプロパティ

フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。 CSS accent-color by Adam Argyle, Joey Arhar 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライ... 続きを読む

CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック | コリス

2021/08/24 26 users 疑似要素 HTML テクニック コリス CSS

ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか？ ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。 Aligning a Button Label Vertically by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記... 続きを読む

HTMLを書いたり、修正する時に役立つVS Codeの機能拡張のまとめ | コリス

2021/06/11 30 users ライセンス たくさん コリス 翻訳記事 下記

VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修... 続きを読む

知っておくと実装に役立つ！JavaScriptのテクニックのまとめ | コリス

2021/04/22 137 users コリス デベロッパー 実装 テクニック ヒント

デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches ? by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様... 続きを読む

CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方 | コリス

2021/04/07 8 users セレクタ where コリス CSS ＩＳ

CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました（ただし、IEは除く）。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。 :where() has a cool specificity trick, too. by Chris Coyier 下記は各ポイントを... 続きを読む