よく見るfont-family

@charset "utf-8";

body {
    font-family: Arial, sans-serif;
  }

複数書く理由はOSによって入っているフォントが異なるため。
左のものから優先的に使用される。

最後に総称フォントファミリー名を書く

個々のフォント名ではなく、フォントのカテゴリーを指定するもの。
もし指定したフォントが全く入っていなかった場合にせめてこういう系統のフォントを表示してほしいと伝えるためのもの。

総称ファミリー名	フォント
sans-serif	ゴシック体系
serif	明朝体系
cursive	筆記体系
monospace	等幅フォント

レイアウトが楽になる

body {
      box-sizing: border-box;
  }

こうすることでwidthとheightがmarginとborderを含めるようになる。

block要素 inline要素

display	配置方法	サイズの操作
block	下に追加されていく	有効
inline	左に詰めて追加される	無効
inline-block	左に詰めて追加される	有効

行の高さを調整する

どのタグでもページにテキストが配置されると、
行ごとに行ボックスと言われる四角い領域がline-heightプロパティで設定される。
テキストの大きさはfont-sizeで設定し、文字は上下中央に配置される。

line-heightは文字サイズの3倍にしたい場合はemを使う。単位なしで指定すると子要素に値が継承されない。

p {
  font-size: 16px;
  line-height: 48px;
  line-height: 3em;
  line-height: 3; 
  background-color: pink;
}

コンテンツが領域から溢れた時に使う

#box1 {
    overflow: hidden; /*隠れる*/
    overflow: scroll; /*スクロールバーがつく*/
  }

ボタンを無効っぽく見せる

#btn.disabled {
    opacity: 0.5;
  }

特定のinputタグにスタイルを当てる

  input[type=text] {
    width: 100%;
    height: 100%;
  }

複数のセレクタにスタイルを当てる

• セレクタをつなげて記述
  • 両方のセレクタを同時に満たす要素にのみ適用。
  • 例)h1.hogeの場合h1タグかつhogeクラスが付与されているセレクタ。
• セレクタの間に半角スペースを入れて記述
  • 入れ子構造の時に適用
• カンマ区切りで記述
  • 異なる要素にクラス名を複数指定している時に適用する

positon

absolute:基準の位置が「親要素」
fixed:基準の位置が「ウィンド全体」

※absolute注意点
子要素をabsoluteにした場合、親要素に必ずrelative(もしくはfixed)を指定しておく

flex-box

参考記事
https://ics.media/entry/13117/

• displayプロパティにflexを指定する。
• Flexboxはmarginの相殺が起きない。
• Flexboxにおけるレイアウトは、主軸と交差軸により決定され、初期状態では横方向の軸が主軸、縦方向の軸が交差軸となる。
  • 主軸の並びはjustify-contentプロパティで指定する。
  • 交差幅の並びはalign-itemsプロパティで指定する。

• ボックスを複数行に並べる

  • 初期設定では、ボックスは親要素の幅にかかわらず一行に並ぶ。設定を変えるにはflex-wrapプロパティの値を変える。
    • nowrap:ボックスを単一行に配置
    • wrap:ボックスを複数行に配置
  • ボックスごとの高さは揃う。これはalign-itemsプロパティの初期値(strech)によるもの。

• ボックスの並び方向

  • 初期状態ではボックスは横方向に並ぶ。並び方向を変更するにはflex-directionプロパティを用いる。

上下左右中央揃え

.container {
  display: flex;
  justify-content: center; /*主軸方向で中央*/
  align-items: center; /*交差軸で中央*/
}

margin

左右にautoを指定すると、左右中央に要素を配置できる。

.foo {
  margin: 0 auto;
}

画像を親要素の幅に合わせる場合は下のように設定する。

img {
　　width: 100%;
}

親要素に合わせるが、拡大しすぎたくないときは、以下のようにmax-widthを設定する。

img {
　　width: 100%;
　　max-width: 600px;
}

はじめに

アロー関数？書けるよ。あまり理解してないけどって人向けに具体的な使用例の一部をお伝えする記事です。
アロー関数とは、

アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。

つまり従来より簡潔に書けるし明瞭な構文で書けるってこと。
ちなみに関数とメソッドの違いは、

• 単独で 呼び出せる のが関数

myfunc(); <- こんな形の奴

• 単独で 呼び出せない のが関数

var str = 'user1,user2,user3';

var result = str.split(','); <- メソッド

従来の関数の書き方との書き換え方

引数の値を2倍にして返り値で返す関数で例えると、

• 従来の書き方

index.js

function doubleUp(num){
   return num * 2;
} 

• アロー関数で書き換えた書き方 その1

index.js

const doubleUp = (num) => {
   return num * 2;
} 

• アロー関数で書き換えた書き方 その2.0 (引数が一つの場合に限る)

index.js

const doubleUp = num => {
   return num * 2;
} 

• アロー関数で書き換えた書き方 その2.1 (引数が一つ以上の場合)

index.js

const doubleUp = (a, b) => a * b;

• アロー関数で書き換えた書き方 その3.0 (関数の処理が returnで一行の場合に限る)

index.js

const doubleUp = num => num * 2;

• アロー関数で書き換えた書き方 その3.1 (関数の処理が returnで一行以上の場合)

index.js

const doubleUp = num => {
   alert('hoge');
   return num * 2;
}

アロー関数と無名関数の挙動って一緒なの？

結論から言うと一緒じゃない。
関数内で this を使う場合は挙動が変わってくるんじゃい。
以下の関数を見るんじゃい。

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される

       window.setTimeout(function() {
          console.log(this.age) // undefined が出力される
      }, 1000);
   }
};

console.log(this)で両方とも出力してもらえればわかると思うんじゃい。
window に関してはそもそも callName というオブジェクトがないんじゃい。
なので参照しようとすると undefined になるんじゃい。

しかし上記のようなオブジェクトにおいてageプロパティをwindow.setTimeout...内で使用したいというケースはよくあるケース。

ではどうするかというと、こうする。

• やり方 その１

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //  "30" が出力される


       window.setTimeout(function() {
          console.log(this.age) //  "30" が出力される
      }.bind(this), 1000);
   }
};

bind()は引数とされている this と callName直下のスコープ内にある this を同じものとする機能があるんじゃい。
- やり方 その2

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される
      let hoge = this;

       window.setTimeout(function() {
          console.log(hoge.age) //"30" が出力される
      }, 1000);
   }
};

hoge変数にpersonオブジェクトのスコープを代入してあげるんじゃい。

• やり方 その3

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される

       window.setTimeout(function() {
          console.log(this.age) //"30" が出力される
      }.call(this), 1000);
   }
};

callメソッドを使うんじゃい。

• やり方 その4

index.js

let person = {
   age: "30",
   callName: function(){
      console.log(this.age); //"30" が出力される

       window.setTimeout(() => {
          console.log(this.age) //"30" が出力される
      }, 1000);
   }
};

アロー関数を使うんじゃい。
アロー関数内を使うと、アロー関数内でthisが定義されないんじゃい。
javascriptの性質上, アロー関数内でthisを見つけられない場合スコープチェーンを辿って
上の階層に同じ変数名のものを探すんじゃい。

最終的にグローバル変数まで探して見つかれなければ undefined を返すんじゃい。
こういう使い方があるんじゃい。

以上じゃい。

ps:
こういうやり方もあるよ〜」とかあれば教えて欲しいんじゃい。
勉強になるんじゃい。

はじめに

display: inline-block で並べた左の要素内の子要素数に応じて、右の要素の開始位置が下がってしまう。

つまり何がしたいの？

display: inline-block で並べた、２つの要素の高さを一致させたい。

左要素の子要素の divタグの個数 - 1 個分だけ右要素の開始位置がズレてしまう。

左要素と右要素の高さを揃えたい。

解決方法

右要素全体に vertical-align: top; を使用 。

なぜ、 divタグの個数 - 1 個分だけ右要素の開始位置がズレてしまうのかが分からない…。
根本的な解決には至ってない感。