サイト構築
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 […]
CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
Post on:2023年11月9日
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの […]
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
Post on:2023年11月7日
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し […]
sponsors
