全体のレイアウトには display: grid; を採用し、grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); というコードを使用した。これにより、閲覧するデバイス(PC、タブレット、スマートフォン)の画面幅に応じて、アーティストカード(.artist-card)の列数が自動的に最適化される、柔軟で現代的なグリッドシステムを実現した。難しかった。独自に作成した外部HTMLコードをDrupalサイト内へ統合するプロセスを検証した。Drupalの標準メニュー機能は、デザインとデータを分離して管理する構造であるため、HTMLタグを直接挿入することができなかった。これを生かしてCSSでまた考え直す。
タグ