とりあえず基礎のおさらい
今回の実装について,まず以下の段階に分けて考えてみましょう.
- ボタンを押すと何かが動くものを作る
- ハンバーガーを表示する
- ハンバーガーを押すと何かが動くようにする
この3つが自力でできれば,入れ子的な実装は,そう難しくはないです
①の「ボタンを押すと何かが動く」の実装方法は,HTML,CSSでやる方法だけで,ざっくり3種類あります(もしかしたら,私が知らないだけで,もっとあるかも)
それぞれ,以下の「擬似クラス」が肝になります.
名前が怖いと思うかもしれませんが,気にしないでください.
CSSでボタンを実装するには,彼らの助けが必要なのです^^
一応,1つずつ説明します
:hover擬似クラス
もうご存知かと思うので説明を省略
トリガーに使うときの注意点:
常にマウスカーソルが対象に乗っている必要がある
:target擬似クラス
こんなHTMLに
html
1<a href="#sec_2">これはページ内リンク</a>
2:
3・
4<section id="sec_2">
5 <h2>小タイトル</h2>
6 <p>lorem ipsam...</p>
7</section>
こんなCSSを書くと,
css
1#sec_2:target{
2 background: green;
3}
ページ内リンクを押した際,idがsec_2の部分にスクロールされます
リンク先がtargetされ,背景色を緑にします
記事のトップに戻るボタンは,href="#"
使ってたりします
hrefに入れる文字は,要素のidでないとだめです
トリガーに使うときの注意点:
URLの末尾に#~~と書かれてしまうので,ただのボタンには向かない.ページ遷移の代替として,モーダルウィンドウを表示させたいときや,ダイナミックにページがスライドするときに使うのが自然
:checked擬似クラス
本来はフォーム要素で使うものですが,この際,細かいことには目をつむりましょう
こんなHTMLと
html
1<input type="checkbox" id="btn">
2<label for="btn">touch me</label>
こんなCSSを書くと
css
1input:checked +[for="btn"]{
2 background: red;
3}
こうなります(雑)
ちなみに,
「+」は隣の要素を指定するやつ,
「>」は直下の要素の指定,
「~」は下に続く,同じ階層の要素を指定するやつ,
「[foo="bar"]」は属性で指定できるやつです
トリガーに使うときの注意点:
注意点,というかかなり利点,内包関係を気にせず使えるので,hoverやtargetで手が届かないところをダイレクトにいじれる
「もう,ぜんぶこいつでいいんじゃないかな」
内容が濃すぎて,説明が雑になってきたので,Web上のリファレンスに頼ろう!
...と思ったけど,なかなか分かりやすいリファレンスが見つからないし,デモ作った方が早そうなので,とりあえず,ここでいったん休憩して,明日以降に,続きを書きます.
ZZZ...
( ˘ω˘)スヤァ
追記(20180811)
https://thimbleprojects.org/liveasnotes/531595/
ところどころ妥協してますが,:hover
でやるバージョンはこんな感じになりました
解説に使おうと思っていたデモコードが,左から初級・中級・上級のタブに分かれています.
説明もしっかり書きたいところですが,ここに書くには余白が狭すぎる()ので,いったん省略し,コードを読んでいただいた上で,分からないところがあれば,逐一答えていくようにしようかと思います.
上記リンク先ページの右上にある「リミックス」ボタンを押すとコードの閲覧・編集ができます
また,このリンク先のページは今後も更新します(まだ:target
と:checked
のデモが未完成なので...)
ちなみに,セマンティックなHTMLでやろうとすると,:hover
だけでやる方法がおそらく最も詰みやすいので,もし心が折れた場合は,素直に:checked
とか使いましょう^^
(ADVANCEDでいきなりセマンティックにやろうとしたのは痛恨のミス
追記(20180812)
とりあえず,目的のメニューのデモは一通りできたので,お知らせします
ちなみに,ページ内のタブ切替は:checked
による作例の1つです.
divでやる人が多いと思うのですが,構造がつかみやすくなるので,dl
,dt
,dd
で組みました
詳しい説明等は,今度Qiitaで記事を書いたときに,覚えていたら,URLを張りに来ようと思います