【デイトラ学習記録】Web制作コース旧課題中級編DAY41 準備編・ヘッダーとメインビジュアルのコーディング

2023年6月13日2023年12月7日

こんにちは。ここぽてとです。
デイトラ中級編が難しく、わからなくてコーディングをするですが、デザインカンプ通りに中々できずに時間がかかります。
正解を見て学習もしますが、解説を見てもわからずにまた調べての繰り返しです（笑）
だけど少しずつではありますが、できることが増えているような気もしています。
学習の挫折防止と新しく学んだことと復習のアウトプットとして勉強したことをまとめて書きたいと思います。

リセットCSS

色・大きさを定義

$color-main:#3F51B5;
$color-accent:#E81919;
$color-text:#333333;
$font-nomal:　24px;
$layout-width-inner:1200px;

よく使う色や大きさ、幅など最初に定義しておくと、呼び出して使えるので便利です。

ブレイクポイントとメディアクエリ

$layout-width-inner:1200px; //幅が変わっても1200pxは維持

$breakpoints:(
  'sp': "(max-width: 767px)", 
  'tab': "(min-width: 768px) and (max-width: #{$layout-width-inner - 1px})", 
  'pc': "(min-width: #{$layout-width-inner})"
) !default;

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

最初にSassでスマホとタブレット用の表示の設定をするために、ブレイクポイントとメディアクエリを指定しておきます。後で、@includeで呼び出して各クラスのスマホやタブレット表示を細かく設定することができます。
↓こんな風に

inner{
    width: $layout-width-inner;
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    @include mq('sp'){
     padding-left: 16px;
     padding-right: 16px;
    }

ヘッダーのコーディング

first-childの設定

.header__nav{
             margin-left: auto;
             display: flex;
 li{
    &:not(:first-child){
      margin-left: 40px;
    }
 }
}

ヘッダーナビ(メニュー)の余白を取る際にリストの最初の項目だけmarginの指定をつけたくない時にfirst-childを使います。

メインビジュアルのコーディング

.main-visual{
    height: 600px;
    width: 100%;
    background:url(../img/mainvisual.png) no-repeat center center / cover;
    font-size: $font-nomal;
    font-weight: bold;
    position: relative;
    }

.main-visual__content{
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   text-align: center;

backgroundの略式

/* 例 */
body{
background-image:url(image/example.png);
background-repeat:no-repeat;
background-position:top center;
}

上のようなタグも

body{
background:url(image/example.png) no-repeat top center;
}

backgroundだけ書くことで、image/repeat/positionを略して書くことができます。

position: absolute;で上下左右中央に配置する書き方

<div class="parent-class">
    <div class="child-class">この文章を上下左右中央に配置します</div>
</div>

.parent-class {
  position: relative;
}
.child-class {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ここで重要なのは、position:relative;はposition:absolute;とセットで使うこと。
親要素にposition:relative;を置いて、子要素にposition:absolute;とtransform:translate;を使うと、
文字の位置を真ん中に寄せることができます。

上下中央　top: 50%; transform: translateY(-50%);
左右中央　left: 50%; transform: translateX(-50%);
上下左右中央　top: 50%; left: 50%; transform: translate(-50%, -50%);

学習に参考にしたサイトはこちらです。図がとても分かりやすかったです。

ヘッダーの固定

<header class=”header”>
  /* ヘッダーのコンテンツ */
</header>

.header{
    height:100px;
    background: $color-main;
    position: fixed;
    width: 100%;
    z-index: 100;
    top:0;
    left:0;
}

トップにメニューを被せたい場合→position: absolute;
メニューを被せるのにに加えて、常にページ上部で固定させたい→position: fixed;

widthを100％にしておかないと端が切れてしまうので、忘れずに設定します。
z-indexとは手前に表示したいときに使いますが、数値を高く設定すればするほど、手前に表示されます。

レスポンシブ表示

inner{
    width: $layout-width-inner;
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    @include mq('sp'){
     padding-left: 16px;
     padding-right: 16px;
    }
    @include mq('tab'){
        padding-left: 24px;
        padding-right: 24px;
       }
}

Sassの入れ子を駆使して、@includeでスマートフォン表示やタブレットを使用した時の表示の調整をしていきます。効率良く、文字の大きさを変えたり、paddingを使って余白ができるように設定していきます。スマホ表示用のレスポンシブ込でコーディングすることは、コーディングのお仕事で必須らしいので練習して慣れていきたいと思います！

感想

ヘッダーのコーディングが難しく、中々デザインを見て思う通りにコーディングが出来なくて、悔しいです。デザインを見た瞬間にコーディングの流れが思い浮かぶ状態になるまで手を動かしまくることが上達するコツということなので、追加課題にチャレンジしてみたいと思います。追加課題でコーディングが出来次第またブログにコードをアップしたいと思います。

よかったらシェアしてね！