CSS スタイリングをマスターして、Web デザインを向上させましょう

はじめに

この実験では、CSS プログラミングの基本を学びます。CSS を使って Web ページをスタイリッシュにし、視覚的に魅力的なデザインを作成する方法を学びます。この実験が終わるとき、CSS の構文、セレクター、プロパティについて十分に理解し、自分自身のプロジェクトに適用できるようになります。

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

フル幅画像

コードは index.html と style.css に記述できます。

フル幅の画像を作成します。

left: 50% と right: 50% を使って、画像を親要素の中央に配置します。
margin-left: -50vw と margin-right: -50vw を使って、画像をビューポートのサイズに対して両側にオフセットします。
width: 100vw と max-width: 100vw を使って、画像をビューポートに対してサイズを設定します。

<main>
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
    eu, faucibus interdum felis.
  </p>
  <p>
    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
  </p>
</main>

main {
  margin: 0 auto;
  max-width: 640px;
}

img {
  height: auto;
  max-width: 100%;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

まとめ

おめでとうございます！あなたはフル幅画像の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。

CSS スタイリングの基本

はじめに

フル幅画像

まとめ