XDからコーディング

9181 ワード
Sass header Inherit Inner メディアクエリ Sass テキストリンク

headerを書くときに詰まったポイント

検証ツールの画面サイズが毎回安定しない。

→1920×1080だと見やすい

Scssの一番最初にそのサイトのキーカラーやinner(コンテナー)幅、メディアクエリを指定しておく。

Css/scss.
$color-text:#;
$color-main:#;
$color-accents:#;

$layout-width-inner: 1200px;

//ブレイクポイント
$breakpoints: (
  "sp": "(max-width: 767px)", //767px以下（スマホ）用の表示
  "tab": "(min-width: 768px) and (max-width: #{$layout-width-inner})", //768px以上（タブレット・PC）用の表示
  "pc": "(min-width: #{$layout-width-inner})", //1101px以上（PC）用の表示
);

//メディアクエリ
@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    //この中をカスタムできる
    @content;
  }
}

header内でロゴとのメニューを横並びにするにはflexを当てる。

flexとセットでよく使う”justify-content: space-between;”だとバグが起きる可能性が高いため、メニューの単語たち側から左側に押し出す感じで”margin-left: auto;”とするのがおすすめ。

header_inner.
.header__nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}

headerのメニューリストの１番最初の単語につく無駄な余白を消すコード↓

header_nav.
li {
    &:not(:first-child) {
    margin-left: 40px;
    }
}

header内のロゴはwidthで大きさを指定し、入れ子のimgにdisplay: block;を当てる。

header__logo.
.header__logo {
    width: 205px;

    img {
        display: block;
    }
}

reset.cssの参考例

reset.css
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0;
}

body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: #fff;
}

img {
    max-width: 100%;
    height: auto;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
}

a {
    color: inherit;
}

先にHTMLでつけたクラスを一気にScssに書き切ってから中身を書き始めると効率的。

親から継承するときはinhelitを使う。

inhelit
.header__inner {
    display: flex;
    align-items: center;
    height: inherit;
}