サイドバー付きのレスポンシブレイアウト

はじめに

この実験では、CSS プログラミングの世界を探ります。この実験の主な目的は、サイドバー付きのレスポンシブレイアウトを作成する実践的な経験を提供することです。この実験が終了するまでに、display: grid と minmax() プロパティを使用して効果的で視覚的に魅力的なレイアウトを作成する方法をより深く理解するようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

VM には既に index.html と style.css が用意されています。

コンテンツエリアとサイドバー付きのレスポンシブレイアウトを作成するには、親コンテナに display: grid を使用し、2 番目の列（サイドバー）に minmax() を使用して、それが 150px から 20% の間で領域を占めるようにし、1 番目の列（メインコンテンツ）に 1fr を使用して残りの空間を占めるようにします。以下は、HTML と CSS のコードの例です。

<div class="container">
  <main>This element is 1fr large.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはサイドバー付きのレスポンシブレイアウトの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。