サイト構築
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
Post on:2023年12月5日
朗報です! 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURL […]
UIデザインに最適! 文字サイズが小さくてもくっきりと美しいフリーフォント「Inter」が待望のバージョンアップ
Post on:2023年11月30日
2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 I […]
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes
Post on:2023年11月29日
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できるCSS Ribbon Shapesを紹介します。 リボンは、よく見かけるシンプルなリボンをはじめ、パネルに垂れ下がるようなリボン […]
CSSの進化がすごすぎる! 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
Post on:2023年11月28日
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの […]
朗報! これでCSSネストの記述方法がより簡単になります
Post on:2023年11月22日
2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定 […]
Adobeユーザーはダウンロードしておこう! Adobe Fontsで使用できる日本語フォントすべてを一覧できるPDF 2023年最新版
Post on:2023年11月21日
11/15に、Adobe Fontsで使用できる日本語フォントが増えました! 今回のアップデートでは、マンガ制作用にデザインされたアンティーク書体「貂明朝アンチック」をはじめ、砧書体制作所、FONT1000、視覚デザイン […]
CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック
Post on:2023年11月16日
margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル […]
Adobe CCユーザーに朗報🎉 2023年11月、Adobe Fontsに日本語フォントが大量追加、CCユーザーは無料で使えます
Post on:2023年11月15日
11/16から開催されるAdobe MAXに先駆けて、Adobe Fontsに日本語フォントが大量に追加されました! 今回は、マンガ制作用にデザインされたアンティーク書体「貂明朝アンチック」をはじめ、砧書体制作所、FON […]
地味だけど嬉しい新機能! フォームのセレクトボックスで区切り線にhrを使用できるようになりました
Post on:2023年11月14日
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでC […]
ターミナルのシンプルなUIが好きな人に! モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS
Post on:2023年11月13日
ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。 ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。 Ter […]
sponsors








