レスポンシブ対応【ポートフォリオ作成】

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#30  レスポンシブ対応【ポートフォリオ作成】

web兄さん

＼SHARE／

レスポンシブ対応の概要を理解しよう

ブレイクポイントについて

ヘッダーのレスポンシブ対応

ヘッダーの正解コード

/* 小さいPC・タブレット
---------------------------*/
@media (max-width:1180px) {
    .header {
        padding: 40px 20px;
    }
}

/* モバイル
---------------------------*/
@media (max-width:768px) {
    .header {
        padding: 20px;
        border-bottom: solid 1px #ffffff;
    }
    .header__menu {
        display: none;
    }
    .header__logo {
        width: 130px;
    }
    .header__button {
        display: block;
    }
}

メインビジュアルのレスポンシブ対応

メインビジュアルの正解コード

mainvisualからmain

/* 小さいPC・タブレット
---------------------------*/
@media (max-width:1180px) {
    .mainvisual {
        padding: 120px 20px;
    }
}

/* モバイル
---------------------------*/
@media (max-width:768px) {
    .mainvisual {
        padding: 40px 20px;
        background-image: url(img/mainvisual__bg-sp.jpg);
        background-repeat: no-repeat;
    }
    .mainvisual__title {
        margin-bottom: 250px;
        font-size: 45px;
    }
    .mainvisual__copy {
        margin-bottom: 20px;
        line-height: 150%;
    }
}

自己紹介のレスポンシブ対応

自己紹介セクションの正解コード

/* 小さいPC・タブレット
---------------------------*/
@media (max-width:1180px) {
    .about {
        padding: 130px 20px;
    }
    .about__img img {
        width: 100%;
    }
}

/* モバイル
---------------------------*/
@media (max-width:768px) {
    .about {
        padding: 50px 20px;
    }
    .about__inner {
        display: block;
    }
    .about__img {
        margin-bottom: 40px;
    }
    .about__img img {
        width: 100%;
    }
    .about__content {
        margin-left: 0;
    }
}

使用ソフト・言語のレスポンシブ対応

使用ソフト・言語セクションの正解コード

/* 小さいPC・タブレット
---------------------------*/
@media (max-width:1180px) {
    .skill__list {
        flex-wrap: wrap;
    }
}

/* モバイル
---------------------------*/
@media (max-width:768px) {
    .skill {
        padding: 30px 0;
    }
    .skill__list {
        flex-direction: column;
        align-items: center;
    }
    .skill__list li + li {
        margin-top: 20px;
    }
}

提供可能なサービス

提供可能なサービスセクションの正解コード

/* 小さいPC・タブレット
  ---------------------------*/
@media (max-width:1180px) {
    .service {
        padding: 130px 20px;
    }
    .service__item {
        flex-basis: calc(100% / 3 - 48px / 3);
        /*48pxの余白を3割って均等に横幅から引く*/
    }
}

/* モバイル
  ---------------------------*/
@media (max-width:768px) {
    .service {
        padding: 50px 20px;
    }
    .service__headline {
        margin-bottom: 30px;
    }
    .service__lineup {
        display: block;
    }
    .service__item + .service__item {
        margin-top: 20px;
    }
}

実績のご紹介のレスポンシブ対応

実績のご紹介セクションの正解コード

/* 小さいPC・タブレット
  ---------------------------*/
@media (max-width:1180px) {
    .works {
        padding: 130px 20px;
    }
    .works__img img {
        width: 100%;
    }
}

/* モバイル
  ---------------------------*/
@media (max-width:768px) {
    .works {
        padding: 50px 20px;
    }
    .works__headline {
        margin-bottom: 30px;
    }
    .works__each {
        display: block;
    }
    .works__each:first-of-type {
        margin-bottom: 60px;
    }
    .works__content {
        margin-top: 20px;
        margin-left: 0;
    }
    .works__content.--reverse {
        margin-right: 0;
    }
    .works__link {
        margin-top: 60px;
        text-align: right;
    }
}

お客様の声のレスポンシブ対応

お客様の声セクションの正解コード

/* 小さいPC・タブレット
---------------------------*/
@media (max-width:1180px) {
    .review {
        padding: 130px 20px;
    }
}

/* モバイル
  ---------------------------*/
@media (max-width:768px) {
    .review {
        padding: 50px 20px;
    }
    .review__headline {
        margin-bottom: 30px;
    }
    .review__wrap {
        display: block;
    }
    .review__each + .review__each {
        margin-top: 50px;
    }
}

よくある質問のレスポンシブ対応

よくある質問セクションの正解コード

/* 小さいPC・タブレット
---------------------------*/
@media (max-width:1180px) {
    .question {
        padding: 130px 20px;
    }
}

/* モバイル
  ---------------------------*/
@media (max-width:768px) {
    .question {
        padding: 50px 20px;
    }
    .question__headline {
        margin-bottom: 30px;
    }
}

お問い合わせセクションのレスポンシブ対応

お問い合わせセクションの正解コード

/* 小さいPC・タブレット
---------------------------*/
@media (max-width:1180px) {
    .contact {
        padding: 130px 20px;
    }
}

/* モバイル
  ---------------------------*/
@media (max-width:768px) {
    .contact {
        padding: 100px 20px;
    }
    .contact__button {
        font-size: 40px;
    }
    .contact__button img {
        width: 40px;
    }
}