More than 3 years have passed since last update.

【CSS】calc()関数を使う

Last updated at 2020-11-13Posted at 2020-11-08

#プログラミング勉強日記
2020年11月8日

左側に画像、右側にテキストを配置するモジュールを作成。
上記のようなモジュールをメディアと呼ぶ。
今回、calc()関数を使い、画像を固定幅、テキストを可変幅にするレイアウトに挑戦。

#完成コード

装飾はSassで記述

index.html

 <div class="media">
        <figure class="media__img-wrapper">
            <img class="media__img" src="img/img1.jpg" alt="タイピングしている人">
        </figure>
        <div class="media__body">
            <h3 class="media__title">Lorem ipsum dolor</h3>
            <p class="media__text">
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam sapiente odit,
               veritatis maiores ipsum dolore voluptatibus ipsam ullam explicabo exercitationem 
               consequuntur quidem dolores praesentium, doloremque nam eaque molestias inventore! Modi!
            </p>
        </div>
 </div>

style.scss


body {
//今回の練習用のレイアウト
    max-width: 1200px;
    margin: 100px auto;
}

 img {
        max-width: 100%;
        vertical-align: bottom;
     }

.media {
    display: flex;//画像とテキストを横並びに
    justify-content: space-between;//均等に横並び
    align-items: center;//画像とテキスト縦方向を中央揃え
    padding: 0 20px;//画面幅を縮めたときの余白
    @media screen and (max-width: 768px) {
        display: block;
    }

    &__img-wrapper {
        width: 200px;//画像幅200pxで固定
        @media screen and (max-width: 768px) {
            width: 100%;
            margin-bottom: 20px;
        }
    }

    &__body {
        //親要素の幅から左右のpaddingを引いた値(1200px - 40px) - 画像の幅と右側余白(200px + 30px) = 960px
        width: calc(100% - 230px); 
        @media screen and (max-width: 768px) {
            width: 100%;
        }
    }

    &__title {
        font-size: 24px;
        margin-bottom: 15px;
    }
}

#挙動動画
実際作成したモジュールをツイートしました。

【CSS】calc()関数の練習

左側に画像、右側にテキストが配置されているモジュールでcalc()関数の練習をしました。

画像の横幅を固定、テキストを可変 pic.twitter.com/MQcqngIXCn
— ミキ🐹@プログラミング (@mikiprogram) November 8, 2020

#参考資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up