Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

XDからコーディング

Posted at

##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のメニューリストの1番最初の単語につく無駄な余白を消すコード↓

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;
}
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?