コーディングでよく使う、便利なテクニックやTIPSをまとめました。
気になる項目をクリックして、詳細をご覧ください。
grid_viewレイアウト・配置テクニック集
カラムレイアウトの基本
Webサイトの基本となる2カラムや3カラムのレイアウトを、FlexboxとGridで作成する方法を解説します。
上下左右の「中央揃え」徹底解説
`Flexbox`や`Grid`、`position`など、様々な方法がある中央揃えを場面別に解説します。
ヘッダーを画面上部に固定する方法
スクロールしてもヘッダーが追従する「固定ヘッダー」の実装方法と注意点をまとめます。
z-indexで要素の重なり順をマスター
メニューが画像の下に隠れる、といった問題を解決するz-indexの仕組みを解説します。
positionプロパティを使いこなす
`position: relative;` と `absolute;` の関係性を図解し、要素を自由な位置に配置する方法を解説します。
「flexbox」と「grid」の使い分け
「どんな時に、どちらを使うべきか」という使い分けの指針を具体例と共に示します。
displayプロパティの基本
`block`, `inline`, `inline-block` の違いと、それがレイアウトにどう影響するのかを図を使って分かりやすく解説します。
全画面表示のヒーローイメージを作る
画面いっぱいに広がる、インパクトのあるメインビジュアルの作り方を解説します。
widgetsUIコンポーネント・レシピ集
タブ切り替えメニューの実装
クリックで表示内容が切り替わる「タブ」の、HTML/CSS/JavaScriptを使った基本的な作り方を解説します。
アコーディオンUI（開閉メニュー）の作り方
「よくある質問」などで定番の、クリックすると答えが開くアコーディオンメニューの実装方法です。
モーダルウィンドウ（ポップアップ）の実装
画像をクリックしたら拡大表示されたり、ボタンを押したらポップアップウィンドウが表示されたりする機能の実装方法を解説します。
ドロップダウンメニュー
マウスを乗せるとサブメニューが表示される、ナビゲーションの基本的なUIコンポーネントです。
画像スライダー / カルーセル
複数の画像やカードを、左右の矢印で切り替えながら表示する機能です。
ツールチップ
アイコンなどにマウスを乗せると、フワッと補足説明が表示される小さな吹き出しです。
パンくずリスト
サイトの階層構造を示し、ユーザーが今どのページにいるのかを分かりやすくするためのナビゲーションです。
auto_awesomeCSSエフェクト・小技集
リアルな影を表現するbox-shadow
複数の影を重ねて、より自然で美しいドロップシャドウを作るテクニックを紹介します。
グラデーション背景の作り方
`linear-gradient()`を使った、きれいなグラデーション背景の作り方と、よく使われる配色パターンを紹介します。
ガラスのような透明感「グラスモーフィズム」
背景をすりガラスのようにぼかし、要素が浮いているように見せるモダンなデザイン手法です。
文字にグラデーションをかける方法
テキストそのものを、背景色ではなくグラデーションで彩るテクニックです。
CSSだけで作るローディングアニメーション
ページ読み込み中などに表示される、クルクルと回るスピナーなどをCSSだけで作成します。
スクロール連動アニメーション
要素が画面内に入ってきた瞬間に、フワッと表示されるようなアニメーションを実装します。
美しい写真加工をCSSで実現するfilter
画像にモノクロやセピア、ぼかしといったエフェクトをかける方法です。
animationCSSアニメーション入門
transformで要素を動かす
`translate`（移動）、`rotate`（回転）、`scale`（拡大・縮小）といった、要素を変形させるための基本的なプロパティを紹介します。
キーフレームアニメーションの基礎
`@keyframes`を使い、要素がフェードインしたり、フワフワと浮いたりするような、より複雑なアニメーションの作り方を解説します。
パフォーマンスを意識したアニメーション
`transform`や`opacity`といった、描画が滑らかなプロパティを使うことの重要性を解説します。