ES6 + jQuery でマウスホバーを実装する

See the Pen used es6 hover class new by nakanishi (@nakanishi) on CodePen.

AddHoverクラスの中に機能を実装し、ページ読み込み時にAddHoverクラスをnewでたたく。

注意:event.targetとevent.currentTargetの違いについて

次の記事を参照

 

ES6のクラス構文

See the Pen mOPoaG by nakanishi (@nakanishi) on CodePen.

class クラス名/冒頭は大文字  { 内容 }

内容にはコンストラクタとメンバ変数とメソッドを書く。

  • constructor(引数1,引数2) { this.引数1; this.引数2; this.call();等々}
  • メソッドはclassの中、constructorの外に書く call(){}

クラスを使うときはnew クラス名()、もしくはvar 変数名 = new クラス名()

new クラス名()をすると、コンストラクタに書かれた内容が実行される。変数名に代入すると、オブジェクトが変数に入る。

機能単位でクラスを作って、newをして実行するのが良い

最終的には機能毎にファイルを分けて、クラスを作成し、export/importをして、必要な時にnewで呼び出すのがよい。

CodePenでEmmetを使う

http://docs.emmet.io/cheat-sheet/

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-14-5-53-44

Emmetとは

Emmet は元々 Zen-coding という名前で開発されていた HTML と CSS のショートカットのようなもので、tag名や()を全て入力しなくても、簡略化した記法の最後に tab を押すことで、HTML や CSS へ展開できるコーディングのためのシステムです。

Emmetを各種エディター、CodePenで使うには

Emmet は Sublime Text や Atom 等、ほとんどのエディターのためにプラグインが用意されており、使用することができます。

CodePenでは最初からEmmetを使うことができます。

Emmetの例

Emmetの一例を以下に記します。全てのEmmetについては本家サイトのショートカット集から確認できます。http://docs.emmet.io/cheat-sheet/

See the Pen used emmet by nakanishi (@nakanishi) on CodePen.

CodePenでES6以上をBabelでコンパイルして使う

ES6とBabel

ES6ではclass構文が使えるようになり、素直なオブジェクト指向プログラミングが可能になったが、ES6は現状サポートしていないブラウザもある。そのためES6で書いたスクリプトはBabelを使ってES5にトランスコンパイルして使用する。

CodePenとBabel

CodePenではBabelをプリプロセッサーとして用いることができ、これによってES6記法のJSをES5記法に変換することができる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-13-14-31-37

ES6のfunction記法抜粋

ES6はarrow functionが使える。これとjQueryを組み合わせた記法を以下に示す。

特に、arrow functionとjQueryのhoverメソッドを用いる場合にthisの扱いに注意することがポイントである。

See the Pen NbNaXY by nakanishi (@nakanishi) on CodePen.

CoffeeScriptとの違い

CofeeScriptの開発はほぼ停止しているらしく、かつ一番必要とされていたクラス構文がES6で実装されたことから、基本的にはES6を中心に書いていけばよいものと思われる。

  • {}も()も;も基本的に必要で、通常のJSと同じ。
  • インデントは内容には関係しない (CoffeeScriptはインデントによって内容が変わる)
  • import,export,require関係は微妙に異なるようなので注意
  • クラス構文が使えるのはどちらも共通しているが、書き方が少し異なるようだ

よくあるヘッダーのナビを作る

See the Pen used nav by nakanishi (@nakanishi) on CodePen.

HTMLの構造

navを用いて、その中にul要素を配置する。

li要素の点と余計な空白を消す

li {
 list-style: none;
 padding: 0;
 margin: 0;
}

liを左に寄せて、隙間を調整する

li {
 text-align: center;
 float: left;
 border: solid 1px;
 padding: 0px 10px;
 margin-left: -1px;
}
list:first-child {
 margin-left: 0;
}

aリンクを修正

a {
 text-decoration: none;
 color: black;
}

補足

ボーダー1pxを追加すると、線が2本重なって2pxの線になってしまう。この場合は、全体をmargin: -1pxし、さらにfirst-childだけmargin: 0にすればよい。

各アイテム間の隙間はmarginではなくpaddingを使用する。

CodePenでVelocity.jsを使う

See the Pen used velocity by nakanishi (@nakanishi) on CodePen.

CodePenは各種JSライブラリを使用することができる。今回はアニメーションに特化したライブラリ「Velocity.js」を使ってみた。

Velocity自体がjQueryに依存しているので、まずjQueryをaddし、次にVelocityをaddする。基本的にCDNから引っ張ってくればよい。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-13-0-14-19

Web標準とブラウザの対応状況

Web標準化の流れ

HTMLやCSSといった技術の標準化は、基本的にW3C(World Wide Web Consortium)によって行われており、草案(WD)→最終草案(LC)→勧告案(PR)→勧告(REC)という仕様策定プロセスを経て「勧告」の段階で正式採用となる。

先行実装とベンダープレフィックス

しかし実際には、勧告=正式採用される前、草案に掲載される頃には「各社が先行して機能を実装」しており、勧告段階よりも早く実質的に使用に耐える仕様も多い。このように勧告前に各ブラウザが先行して搭載した機能に関してはベンダープレフィックス(例:-moz-、-webkit-) が付加された状態で運用される。

ブラウザの対応状況をCaniuse.comで確認する

http://caniuse.com/ で各機能の対応状況を確認できる。緑が対応、黄色が部分的に対応、赤が未対応である。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-12_23_57_30

ユーザー数の比率を確認できることもできる。また Showing all を選択すると(現行だけではなく)全てのブラウザの状況を確認できる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-12_23_57_45

 

CodePenでSassを書く

See the Pen used sass add to codepen by nakanishi (@nakanishi) on CodePen.

CodePenではCSSをSassを使って記述することができる。また、CoffeeScriptやBabelでJSを書くこともできる。

設定

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-11_0_18_57

AUTOPREFIXER

上記のSassの設定時、AUTOPREFIXERにチェックを入れると、CSSへコンパイルする際にベンダープレフィックスを自動的に追加してくれる。

どんなプレフィクスが付加されているかは、コンパイル後のCSSモードに遷移し確認することができる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-11-14-53-36

ここでは、column-countにベンダープレフィックスが付加されている。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-11-14-57-42

ベンダープレフィックスとは

次の記事を参照

block要素とinline要素の考察

See the Pen used block-inline by nakanishi (@nakanishi) on CodePen.

block要素とinline要素の性質は「経験的」にはわかることが断片的にはあるものの、理論的にはわからない、ので実験する

block要素とinline要素はCSSにおいて重要な性質のうちの1つであるが、私は「経験的」にはわかることが断片的にはあるものの、理論的にはよくわかっていない。リファレンスを読んでも今一歩わからない…

そこで実際に全パターンを書いてみることで理解を深めたい。

ブロック要素は幅を決めなければ、親要素と同じになる

まず基本的なことだが、ブロック要素は幅を指定しなければ、親要素と同じ幅になる。対して、インライン要素は、コンテンツによって幅が自動的に決まる。

インライン要素に幅を指定しても意味がない

インライン要素はコンテンツによって幅が自動的に決定されるため、幅を指定しても無効である。

要素を中心に置きたくても、(3)、(4)のようにインライン要素には幅指定ができないので、margin: autoを使っても、中心にはこない

(1)と比較するとわかるが、インライン要素のようにコンテンツによって幅が自動に決まるものにmargin: autoを与えても、中心には来ない。

これは幅が明示的ではない要素はmargin: autoが機能しないということだろうか。

(5)インラインブロック要素の幅は、何も指定しなければコンテンツによって決まるが、インライン要素と違って幅を指定することもできる。ただしインライン要素と同じく、改行されない。

インラインブロック要素は、インライン要素と同じく、改行されずに右側に次のコンテンツがくる。しかし、インライン要素と異なり、幅を与えることができる。

参考

その他インライン要素とブロック要素の癖について情報がまとめられている。

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

課題:冒頭の例のような場合、上下も中央に配置するにはどうすればいいか

vertical-align: middle;で良さそうだが、上手くいかない。手段を見つけたい。