-
【保存版】CSS Gridカードレイアウト完全ガイド｜auto-fit・minmaxでレスポンシブ対応する方法
1. はじめに：なぜCSS Gridでカードレイアウトを組むのか Webサイトのトップページやブログ一覧、制作実績ギャラリーなどで頻繁に使われるのが「カードレイアウト」です。画像＋テキストを整然と配置できるため、視認性が高く、情報を整理して伝えるのに適... -
レイアウト：CSS Gridでカードを並べよう
作成ファイル・保存場所 css-practice フォルダを作成し、以下のファイルを用意してください。 ファイル名内容css-grid-cards.htmlGridレイアウト用のHTMLファイル（コード模写）css-grid-cards.cssCSS Gridを使ったスタイルシートファイル HTMLファイルと... -
画像にキャプションを重ねよう（Gridとアニメーション）
figure + figcaption で、画像にキャプションを重ねて表示 GridやFlexを使ってレイアウトを統一させる ::before / ::after を使って見出しにデザインを加える :root に色指定を集約してテーマ化を進める 作成ファイル... -
独立した記事カードをCSSのGridでレイアウトしよう（rem設計）
複数の記事（<article>）を Grid を使ってスマホでは1列／PCでは2列のカード型レイアウトに切り替える方法を学びます。また、記事単位で <header>・<footer> を使い、1つ1つが独立した情報ブロックであることを意識した構造を練習します。 この課...
1