【RaiseTech】超初心者が1から学ぶプログラミング記〜その9〜
こんにちは！ナガタロックです！
このブログでは2020年6月より
RaiseTech 〜WordPress副業コース〜
を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。
今回で9回目！
今回のテーマはハンバーガーメニューの実装です！
jQueryを用いた講義というのは今回で一区切りという感じです。
ハンバーガーメニューとは
タップ（クリック）すると出現するメニューのこと
「あっ、あれハンバーガーメニューって言うんだ？！」
と誰もが思うくらい、近年よく見ますね。
漢数字の「三」や「＝」みたいなところをタップすると
横からニュッって出てくるメニューの事ですね
横から見たハンバーガーのようだから
そう呼ばれるようになったそうです（発想がアメリカン！）
それぞれのメリット・デメリットが
★メリット★
狭い領域でメニューの領域が確保出来る
■デメリット■
それがメニューボタンだとユーザーに認識をしてもらえないと無意味
との事。
メリットに関しては
スマフォが覇権を握っている
昨今のネット業界を考えると納得。
PCに比べて狭い画面でやりくりする必要がある為だ！
デメリットは正直
「今どき誰でもわかるでしょ〜！(*´Д｀)」
と思ったが、高齢者ユーザーを想定するような
Webサイトの場合は注意が必要と聞いて
なるほど！( ﾟдﾟ)と思いました
ボタンの実装 -HTML+CSS-
HTMLとCSSとjQueryで実装する
・buttonタグを使う
・CSSで3本線を表現
・ボタンをタップしたらCSSで「3本線」をアニメーションさせて「×」に切り替える
・PCで閲覧する時はテキスト表示させる
コードはYATさんのYATさんのGitHubにあげてくれてます
要はクリックする前と後をそれぞれCSSで装飾
開閉の動きをjQueryとtransformで実装する
ってイメージかな？
コード自体は長いけど
1行1行に意味があって、
それをコンピューターに伝えてるって感覚
まさに
「お母ちゃん僕プログラミングしてる！！」
って気分になります。帰省したい！
ボタンの実装 -SVG-
SVGとは
・Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略
・Webで表現できるベクター画像
・イラストレーターのデータのように拡大しても画像が荒くならない
・レスポンシブにおいて扱いやすい画像データ
SVGで実装する
・こちらもbuttonタグを使う
・中身をSVGで
・ボタンの線のアニメーションはJavaScriptで
・PCで閲覧する時はテキスト表示させる
こちらは三本線をイラレで作成して
SVGで保存して
そのソースコードを貼り付けるイメージ。
こちらもYATさんのGitHubにてソース公開してくれています。
HTML+CSSで実装するよりも
画像を使う分CSSの記述はシンプルで
その分JavaScriptの記述が複雑になります。
CSSはコード見ればなんとな〜く意味合いがわかってきたけど
JavaScriptは見てもサッパリ・・・
xとかyが出てくると蕁麻疹が・・・(；´Д｀)
まずはYATさんが公開してくれているソースを
自分で書いてみて体験してみようと思います！
最初はあやつり人形のようでも
そのうち自ら動けるようにならないと(｀･ω･´)ゞ
メニューの実装
PCとスマホ・タブレットの挙動を考える
・PCの場合は画面サイズが大きいので、メニューを隠す必要がない
・スマホ・タブレットは通常非表示でボタンを押すと表示
・スマホ・タブレットはメニューが多い場合、縦スクロールが必要になる
・非表示中横スクロールバーが出ないようにする
・メニュー部分の記述は、HTML+CSSでもSVGでも同じ
さきほどのはあくまでメニューの動きの記述で
実際のメニューの関する記述がコチラ
基本的に
PCはメニューを表示させる
スマホ・タブレットはボタンを押すことでメニューを表示させる
という構成。
自らWebサイトを作成するにあたっては
ハンバーガーメニューの実装は必須！
ここはしっかり押さえておきたいポイントです。
アニメーションについて
CSSにおけるアニメーションについて
transform＝要素を回転、拡大縮小、傾斜、移動を行う
・matrix・・・2D変形を適用させる
・translate・・・表示位置を移動
・scale・・・拡大縮小
・rotate・・・回転
・skew・・・斜頸変形
transition・・・変化する際の時間を定義
・transition-duration ・・・変化の始まりから終わりまでの時間を指定
・transition-property ・・・ 変化を適用するプロパティを指定
・transition-timing-function ・・・変化の度合いを指定
・transition-delay ・・・変化が始まる時間を指定
・transition ・・・上記の4つのプロパティを一括で指定
様々な動きの種類があるので
Qiita を参考にする（実際の動きがすぐ確認出来て便利！）
transitionはサッカー解説でもよく使われる言葉なので、
非常に馴染みがある！
常に動いているスポーツなので、
攻めから守り、守りから攻めにの際のtransitionが大事！！
とよく聞きます
プログラミングにおいては
transitionによって様々な動きをさせることが可能。
アニメーションを取り入れることで
見やすかったり、オシャレだったり、見ていて楽しい
サイトを表現出来るので、しっかり身につけたい技術です！
質疑応答
大手企業から求められる事はあるが、全体的に需要は減ってきている。
YATさんの所感では、IE対応の要望は3割程度とのこと
現代は基本モバイルファーストで作り始める意識でOK！
目安を数値化すると100KB。スピーディーな表示が出来る。
ただ、ネット通信の高速化により以前よりはシビアになる必要はなくなってきている。
すべてのsassファイルで使う物を定義つけしておいて、@includeで使う。
定義部分を変更すればまとめて変更できるので便利。
PC・スマホ・タブレットの画面サイズに合わせた動きを指定するときに使う。
※よく解説にあるscreen andはsassで補完してくれるので省いてOK。
今日の感想
今回はアニメーションについて！
静的な装飾ばかりだと
どうしてもおとなしくなってしまうが、
アニメーションを取り入れる事で
動きが出て一気に彩りが加えられる事が学べた＼(^o^)／
CSSの方でもアップデートがあったりで
出来る事が増えているとのことなので
そういう時流を感じながら
サイトを作っていく必要があるとわかった。
自分やお客様が表現したいことを
コンピューターに伝える事が
プログラミング
しっかり目の前の愛機MacBookProと
コミュニケーションをとって行こう(*´ｪ｀*)
そしてRaiseTechが気になるという方は
是非公式サイトより無料体験会or受講のお申し込みを(●´ω｀●)
