ポートフォリオサイトの雛形が完成！　Web制作コース初級編Day30　「自分のポートフォリオサイトを作ろう（レスポンシブ対応と最終確認）」

ハック

こんにちは、運営者のハックです。

今回はデイトラWeb制作初級編Day30「自分のポートフォリオサイトを作ろう（レスポンシブ対応と最終確認）」の学習記録を紹介します。

レスポンシブ対応をしよう
まとめ　ポートフォリオサイトの雛形が完成！

レスポンシブ対応をしよう

今回は前回完成させたポートフォリオサイトのレスポンシブ対応を行い、パソコンやタブレットでサイトを見てもバランスよく表示されるように調整していきます。

ブレークポイントのSassファイルを分割

Day23「CSSの上位互換！Sassを学習しよう」の回で学んだ変数とmixinを使ってブレークポイントを設定します。
ファイル分割をして、ブレークポイント専用のscssファイルを作成します。

//_breakpoint.scss
// ブレークポイントとmixin
$breakpoints:(
    "sp": "screen and (max-width 767px)",
    "tb": "screen and (min-width 768px) and (max-width:1024px)" ,
    "pc": "screen and (min-width:768px)",
) !default;

@mixin mq($breakpoint:pc){
    @media #{map-get($breakpoints,$breakpoint)}{
        @content;
    }
}

//style.scss
@use"breakpoints";

ねこ奈

「!default」については書籍「Sassの教科書」の紹介記事で詳しく説明しているのにゃ。

モナ

今回はタブレット版とPC版を分けてレスポンシブ対応を行います。

レスポンシブheaderを整えよう

まずheader部分のレスポンシブ対応を行います。

//Sass
@include breakpoints.mq(pc){
  .wrapper {
    display: flex;
  }
…
  .header {
    position: relative;
    flex-basis: 20.8%;
    padding: 50px 20px;

    &__container {
      width: 160px;
      margin: 0 auto;
      position: sticky;
      top: 50px;
    }
…
}

flex-basis: 20.8%;…フレックスコンテナ内のフレックスアイテムの初期サイズを指定するプロパティです。20.8% は親要素のコンテナの幅に対する割合を示します。
position: sticky;…要素が特定の位置にスクロールしたときに、固定されるようにするプロパティです

画像左側にヘッダーのナビメニューが表示されるようにしました。

ねこ奈

ホバーも実装されているのにゃ！

モナ

この画面だけでも十分お洒落な感じがしますね！

メインコンテンツ前半を整えよう

次は画面右側のメインコンテンツを整えていきます。

//Sass
.service {
    &__list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8%
    }
    &__item {
      & + & {
        margin-top: 0;
      }
    }
  }

display: grid;…要素をグリッドコンテナとして設定します。グリッドレイアウトを使用して、要素を行と列に整列させることができます。フレックスボックスとは異なり、2次元（行と列）のレイアウトを管理するのに非常に便利です。
grid-template-columns: repeat(3, 1fr);…グリッドコンテナ内の列の数と幅を定義します。「repeat(3, 1fr)」は、同じ幅の列を3つ作成することを意味します。「1fr」は「フラクションユニット」を表し、利用可能なスペースを均等に分割します。

ねこ奈

きれいな横並びになったのにゃ！

モナ

display: grid；の基本的な考え方については、こちらの「はにわまん」さんの技術サイト様が参考になります。

メインコンテンツ後半

次はAboutからfooterまで整えていきます。

//Sass 
.about {
…
&__img {
      margin-left: 60px;
      img {
        width: 70%;
        height: auto;
      }
    }
  }

モナ

ChatGPTで生成した画像などは、そのまま使用すると大きすぎるので、コードのように個別に大きさを調整しました。

ねこ奈

PC版もお洒落なポートフォリオサイトになったのにゃ！

最終調整をしよう

最後に、どの画面でも崩れや不自然なレイアウトになっていないかの確認をします。

//Sass 
/*--------------------------------------------------------
// tb
--------------------------------------------------------*/
@include breakpoints.mq(tb) {
  .section {
    &__head-main {
      font-size: 54px;
    }
  }
  .fv {
    &__contents {
      bottom: 50%;
      transform: translateY(50%);
    }
  }
  .flow {
    &__list {
      grid-template-columns: repeat(2, 1fr);
      gap:40px 16px;
    }
  }
}