プログラミング独学day48。学習で得たことや気づきを教えて！
今日は
・CSS設計のBEM
・jQuery パララックス効果のスライド
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜0時に独学しています！
→プログラミング学習day48、もりけん塾day4
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
CSS設計 〜BEM〜
「CSS設計の教科書3-4 BEM」を学習しました。
BEMとは？
コンポーネント設計をするためのアイディア5つ、のうちの1つ。
BEMは、初心者のわたしでもよく聞く！使えるようになりたい。なります。
概要は以下のとおり。
ヘッダー、ナビゲーション、フォーム、フッターなどがBlockにあたります。
↓
たとえば、フォームBlockの中に「検索窓」と「ボタン」があります。これをそれぞれElementとよびます。子要素みたいな感じ。
↓
要素の状態をあらわす、たとえばボタンの色なんかがModifierにあたります。
BEMの書き方
基本の書き方は、
Block_ _Element– –Modifier
BlockとElementをアンダースコア2つでつないで、ElementとModifierをハイフン2つでつなぎます。書き方に違和感があるって人や企業は、独自にルールを設定してカスタマイズしているよう。
jQuery パララックス効果を使ったスライド
次に、jQueryの実装練習のアウトプットです。今回は、パララックス効果といわれる視差効果を背景画像に使ったアニメーションに挑戦です。
完成物
こんな感じで、スライドの背景（３枚重なってる）をそれぞれ違うスピードで動かして、奥行きをつけていきます。
構成の考え方
jQueryを組む時には、最初に構成を考えます。
②スライドが動いて、コンテンツが移動
③背景画像が移動
④ボタンのスタイルを変更
構成① ボタンをクリック
.click()メソッドを使用。中に、クリックしたときの内容を関数で書いていきます。セレクタの$(“a”)は、スライドボタン。
aに指定されているhref=”#”に飛ばないように、return false;します
構成② スライドが動いて、コンテンツが移動
「クリックするボタンのテキスト番号」を取得してdisという変数に代入します
なぜ、-1するのかは、次の6-7行目の計算式でわかります
6-7行目でスライドを動かしていきます。
4つあるコンテンツのなかで、n番目のコンテンツに移動する場合
なぜ、-700するの？
（画像引用：jQuery標準デザイン講座）
この図のように、4枚のスライドはfloatで横並びになっている。
700pxをはみ出る分は、overflow: hidden;で隠されている。
↓
#section を左に-700pxずつしていくことで、スライドが動く！
構成③ 背景画像が移動
ここでのポイントは2つ。
② css()メソッドを使って動かす
CSS（）メソッドを使って、背景画像にアニメーションをつける
重なっている３枚の背景画像を、それぞれ動かします。
構成④ ボタンのスタイルを変更
あとがき
jQueryの書籍「jQuery標準デザイン講座」30レッスン中、16レッスンまで終了。やっっっと半分です(;´д｀)簡単〜むずかしいレベルの順に並んでいるので、だんだんスピードダウンしてきてます；
しかし、暗記するのではなく「jQueryの構成の組み立て方を学ぶ」という姿勢で、そこを丁寧にやっていきます。
＊今日の工夫＊
・日中のスキマ時間に、BEMの解説youtubeをみて予習した。
→日中、全くPCや本を開けないので、ちょっとしたスキマ学習を大切にしていく。
今日は以上です。
Thanks：もりけんさん(@terrace_tec)
もりけんさんのHPはこちら→ 武骨日記
