デザイン

デザイン実践ガイド — Devryo

WebデザインとCSSに関する実践的な知識を解説しています。カラーコードの種類と変換方法・CSSアニメーションの書き方・Flexboxのプロパティ一覧など、デザイナーとフロントエンドエンジニアの両方に役立つコンテンツを集めました。

4 記事

記事一覧

CSSのlinear-gradient・radial-gradient・conic-gradientの書き方をコード例で徹底解説。カラーストップの位置・透明度指定、テキストへのグラデーション、ボーダー・オーバーレイへの応用まで実装パターンを網羅します。

Webデザインで使うカラーコードの種類を徹底解説。#FF5733（HEX）・rgb(255,87,51)（RGB）・hsl(9,100%,60%)（HSL）の違い・使い分け・CSSでの指定方法・透明度の設定まで初心者向けに紹介します。

Webアクセシビリティに必要なカラーコントラスト比の仕組みを解説。WCAGのAAとAAAの基準値（4.5:1・3:1）、白地・黒字どちらが見やすいかの判定方法、コントラスト不足のNG例と改善例まで初心者向けに紹介します。

CSSのFlexboxの基本をdisplay: flexの使い方から丁寧に解説。justify-content・align-items・flex-wrap・flexプロパティの違いと動作、中央揃えの定番コード、レスポンシブ対応まで初心者向けに紹介します。

まずカラーコードの記事から読むのがおすすめです。HEX・RGB・HSLの違いを理解することが、Webデザインの第一歩になります。