2022年5月24日SHAREツイートシェアはてブLINEPocket今回は、HTMLとCSSを使ってカードグループをコーディングしていきます。美しいコードの書き方を解説していくことで、デザインを忠実に再現し、レスポンシブデザインにも対応できる模写力が身につきます。プログラミング初学者やコーディング練習として模写をしたい駆け出しエンジニアにもおすすめです。カードグループはブログ記事一覧などで出てくる定番のデザインパターンですが、カードの横並べや折り返しの方法は初心者にはすこしハードルが高いテクニックでもあります。コーディングの型を覚えてカードグループのコーディングへの苦手意識をなくしていきましょう。今回コーディングするお手本のデザイン完成形のデザインを確認しましょう完成デザイン今回のテーマはカードの大きさと間隔を制御するテクニックと、カードを横並べにして折り返しするテクニックの解説です。カード一つ一つのデザインは過去の記事で解説していますので、そちらをご参照ください。HTMLとCSSでカードのコーディングをするhttps://eclair.blog/make-card-with-html-and-css/【コピペで学ぶ実例集】HTMLとCSSを使ったカードのデザインhttps://eclair.blog/examples-of-card/デザインの特徴カードは2行2列で、間隔が縦横20pxずつカードグループではカード同士の間隔とカード自身の大きさを丁寧にコーディングしていくことが大切です。今回はカード同士の横の間隔が20px、縦の間隔が20pxとします。カード自身の大きさは縦幅はコンテンツの高さに応じて自動的に変わり、横幅は20pxの間隔を差し引いて2等分した幅になります。実際のソースコード実際のソースコードは以下の通りです。全体に目を通してください。わかりにくい部分は追って解説していきます。コピーすればそのまま動きますので、自分の手元でアレンジしながら動作を確認していって理解を深めるのもおすすめです。コーディングのお手本として参考にしてください。タイトルがはいります。タイトルがはいります。