【コーディング週間日報】3/24（水）〜 3/27（土）の学習

たーやま

3/24（水）〜 3/27（土）の間に
学習したメモをまとめます。

3/24（水）のアウトプット

モバイルファーストのCSS（Sass）設計

モバイル版のCSS（Sass）をベースにして、デスクトップでの差分を追加していく方法のこと。

レスポンシブ対応にすること ＝ モバイルファーストって意味ではない。誤解しやすいので注意。

基本的にモバイルファーストで CSS（Sass）は設計していく。

CSS（Sass）は基本的にデスクトップの方が記述は複雑になる。

デスクトップのスタイルが残っている状態でモバイルのスタイルの差分を追加すると、複雑な分の CSS を打ち消す CSS を余分に記述する必要があるため。

Sassで例にしてみると…。

@import ‘mobile.scss’;

@media screen and (max-width: 601px) {
	@import ‘desktop.scss’;
}

モバイルファーストの場合は、モバイル ＞ タブレット ＞ PC ＞ Retina ディスプレイ…って感じで書く。

ディスプレイサイズが大きいものほど @import を後に記述すること。

補足として、画面の解像度やアスペクト比でも変更できるスタイルもある。

メディアクエリの意味

screen = 画面表示時
print = 印刷時
all = 印刷時と画面表示時。all で指定するときは、all と and は省略できる。
only = 古いブラウザで、media が使えないブラウザがあったときに記載する。そのブラウザでは適応しないようにする。基本は使わん。

and 以外にも、or も使える。けど、or とは書かずにコンマ「 , 」を書くこと。

metaタグの”viewport”について

画面に表示する Webサイトのコンテンツの幅や、拡大・縮小を定義するときに使用する。画面領域のこと。

content=”width=device-width” とすると、現在表示しているブラウザ（ Chrome とか Safari とか）の横幅を値としてとる。

width は固定値の設定もできる。ただ、固定値を設定すると、メディアクエリがうまく働かなくなる場合がある。やから基本は content=”width=device-width” で OK。

メディアクエリがうまく働いてない場合は、content=”width=device-width” になってるかの確認をすること。

3/25（木）のアウトプット

メディアクエリの補足（ Retina ディスプレイ）

そもそも Retina ディスプレイって？

高解像度でハイコントラストな色彩表現を可能にしたディスプレイのこと。Macbook とか iPhone とかをイメージするとわかりやすい。

Retina ディスプレイ用に表示するメディアクエリもある。

@media (min-resolution: 192dpi) ,
　　　　(-webkit-min-device-pixel-ratio: 2){
	@import ‘XXXXX.scss’;
}

resolution = 解像度って意味。

dpi = 画素数。1インチあたりにどれだけの画素（px）が敷き詰められているかを表す単位。画素数が高いほど表示は美しくなる。

-webkit-min-device-pixel-ratio：resolution のベンダープレフィックスやな。ここでは、通常よりも2倍の解像度やったときにスタイルを適用させるように設定してるで。

Retina ディスプレイは大体2倍のパターンが多いらしい。

reset.css と normalize.css について

reset.css = ブラウザ間での表示の差異をなるべく減らすように設計したCSSのこと。

ブラウザ間によって微妙に margin とか行間とかが違うから、それらをある程度統一させる必要がある。

だから reset.css を使う。まぁこれはデイトラで習うわ。

たーやま

デイトラ知らんくて興味あったらググってみてください。

normalize.css = ブラウザで表示されるデフォルトのスタイルを良い部分だけ残して差異をなくす CSS のこと。

例えば、input タグとか checkbox とかは、ブラウザによって変わるケースがある。

そこだけを統一して、あとはデフォルトのブラウザ表示でいいってのが normalize.css やで。

ちなみに、BootStrap の reboot.css は Github で公開されてる normalize.css と割と似てる。

全部ではないけど。

3/26（金）のアウトプット

Sass の @extend と HTML でのクラス付与

HTML では、クラスは複数指定することができるのはみんな知っての通りやろう。

<div class=”hero__inner inner hoge”>

この場合なら、「hero__inner」、「inner」、「hoge」という3つのクラスがついてるよね。

Sass 使ったら、わざわざ HTML タグにクラス書かんでも、継承というものが使える。

継承に使うのが、@extend。

.inner {
　width: 1280px;
　max-width: 100%;
　margin: 0 auto;
}

.hero__inner {
　@extend .inner;
　display: flex;
　flex-wrap: wrap;
}

こうしたら、「inner」のクラスを持ちながら「hero__inner」のスタイルも当てられる。

もちろん「hero__inner」内で width の値が気に入らんかったら、書き換えたらいい。

書き換えた方が新しいスタイルとなって反映される。

ただし @extend では、どこに何のクラスを継承したかを覚えとかなあかん。

修正の時にえらいこっちゃしてまう。

部分的に共通のクラスを付与したい時なんかに使えるから、うまく塩梅みて使いこなせるといいかも。

Sass の @mixin について

継承の @extend とは違って、似たようなクラスを共通化させて呼び出したいところに呼び出せるのが @mixin。

呼び出すときは、@include を使うこと。

@mixin container {
　width: 1280px;
　max-width: 100%;
}

.hero__container {
　@include container;
　height: 100vh;
}

意味を説明すると、「container」って変数はこれですよ〜って定義して、「.hero__container」で変数「container」を呼び出したって感じ。

この記事がめっちゃわかりやすい。

Houn(ほううん)

SASS（SCSS）のmixinとは？が図解で分かる | Houn(ほううん)SASSの便利機能のひとつ、mixinについて基礎的な部分を図解してみました。 mixinとは、よく使うスタイル等をあらかじめ変数として定義しておいて、欲しいときに呼び出し使...

変数には引数を渡すこともできて、before などの擬似要素も @mixin として定義することもできる。

@mixin before (
　$cls: before, 
　$position: absolute,
　$top: 0,
　$left: 0,
　$content: “”
) {
　&::#{$cls} {
　　$cls: before, 
　　$position: absolute,
　　$top: 0,
　　$left: 0,
　　$content: “”
　　@content;
　}
}

この場合は、引数は $cls: before, $position: absolute, $top: 0, $left: 0, $content: “” たち。

「@content;」ってのは、@mixin にブロックコンテンツを渡せるもの。

@content は、メディアクエリでよく見かけると思う。

@include を使う時にコンテンツが渡せる。@content については、これがわかりやすかった。

WebTecNote

[Sass] Sass 3.2で実装された新機能がヤバい8/10に3.2、8/15にバグフィックスした3.2.1がリリースされて ただでさえヤバイくらい高機能なSas…

emとremについてのおさらい

どっちも相対値。ただ、基準にするところが違う。

em：親要素にある font-size の大きさが基準。

<div class=”wrap-title”>
　<div class=”wrap__main-title”>らっぷ</div>
</div>

.wrap-title {
　font-size: 20px;
}

.wrap__main-title {
　font-size: 0.8em;
}

この場合の「wrap__main-title」の font-size は、親要素「wrap-title」の大きさを基準にして計算されている。

故に、20(px) × 0.8 = 16(px) が wrap__main-title の font-size である。

rem：html 要素にある font-size の大きさが基準

ちなみに、「root em」やからrem。

<div class=”wrap-title”>
　<div class=”wrap__main-title”>らっぷ</div>
</div>

.wrap-title {
　font-size: 24px;
}


.wrap__main-title {
　font-size: 1.25em;
}

この場合の「wrap__main-title」の font-size は、html 要素の大きさを基準にして計算されている。

html 要素の font-size は指定されてない場合が多いけど、そのときは16pxになっている。

故に、16(px) × 1.25 = 20(px) が wrap__main-title の font-size である。

rem を指定する場合、親要素「wrap-title」の font-size は関係ないから気をつけよう。

3/27（土）のアウトプット

アップロード関係の用語と補足

サーバーにアップロードすることを、デプロイもしくはホスティングという。

いきなり専門用語使われたら訳わからんと思うし、一応メモしておいた。

インターネットに公開するときは、タイトルタグとメタタグ、その他imgタグないにあるalt属性などを見直ししておくこと。

CSSやJavaScriptの圧縮方法について…

「Webpack」とか「gulp」で圧縮できる。

「gulp」は Sass をコンパイルするときも役に立つから、いずれ覚えておきたいやつ。

3/24（水）〜 3/27（土）で感じたこと

HTML と CSS ですらも奥が深すぎるということ。

レスポンシブ対応はデイトラで既に学習をしていたので理解はできていました。

しかし、Retina ディスプレイという存在は知りませんでしたし、それに適用するためのメディアクエリがあることも知りませんでした。

何なら印刷用のメディアクエリすら知りませんでしたし…（笑）

また、モバイルファーストの設計というのは、単純にスマホ対応ができたら良いものだと思っていました。

が、モバイルのスタイルを基準としてディスプレイ毎にスタイルを書き足していくことがモバイルファーストだと知りました。

余分なCSSの記述を積み重ねることにより、表示速度に差が出る可能性もあります。

より美しいコーディングや SEO を意識したいのであれば、そうした細かい知識を拾っていくことも大切だと感じました。

たーやま

今回は初回なので中途半端になりました（笑）
これから日曜 〜 土曜の1週間をまとめます。