左右を振り分ける

ゆう＠お金の奮闘記

2021年1月22日 10:34

画像と文字を交互に左右に振り分けるレイアウトを作成する。

必要となるコード

・擬似クラスの :nth-childプロパティ

　:nth-childとは、兄弟要素のグループの中での位置に基づいて選択します。

　→ :nth-child(odd)は、奇数番目の要素

　→ :nth-child(even)は、奇数番目の要素

・Flexboxの flex-directionプロパティ

コードを書いてみる

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="css/styles.css">
</head>
<body>
   <section class="practice">
        <h1>画像と文字の振り分け練習</h1>
        
       <div class="container">
           <div class="row">
               <div class="col-img">
                   <img src="img/dual-screen.png">
               </div>
               <div class="col-p">
                   <h1>練習</h1>
                   <p>
                       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet tempora magnam doloremque placeat, accusantium dolor incidunt quia? Voluptates necessitatibus dolorum illum earum, in facere cum vero corrupti cupiditate dignissimos.
                   </p>
               </div>
           </div>
           
           <div class="row">
               <div class="col-img">
                   <img src="img/frontend.png">
               </div>
               <div class="col-p">
                   <h1>練習</h1>
                   <p>
                       Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae similique ut facere dolor recusandae quia dolore eos ad officia quidem quam repellendus, placeat, nemo provident. Quae nemo rerum debitis quis!
                   </p>
               </div>
           </div>
           
           <div class="row">
               <div class="col-img">
                   <img src="img/video.png">
               </div>
               <div class="col-p">
                   <h1>練習</h1>
                   <p>
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda sunt nesciunt molestias excepturi temporibus provident vitae animi incidunt vel. Asperiores cumque enim omnis nobis quasi dolor minus? Eveniet, harum placeat.
                   </p>
               </div>
           </div>
       </div>
   </section>
   </body>
   </html>

CSSコード

.practice img{
   width: 100%;　　　　　　　　　　　　　→　画像サイズ
}

.practice > h1{
   text-align: center;　　　　　　　　　→　主題を中央揃え
}

.practice .row{
   display: flex;　　　　　　　　　　　　→　Flexboxに設定
   justify-content: space-between;　　 →　文字と画像の中央に余白
   margin-bottom: 20px;　　　　　　　　 →　要素下の余白
}

.practice .row:nth-child(even){　　　　→　擬似クラス（偶数番に指定）
   flex-direction: row-reverse;　　　　→　左右を入れ替える
}

.practice .col-img{
   width: 50%;　　　　　　　　　　　　　→　画像サイズ
}

.practice .col-p{
   width: calc(50% - 32px);　　　　　　→　calcで中央に余白を作る
}

この記事が気に入ったらサポートをしてみませんか？