カテゴリを追加したい！カラーミーショップのBit（無料テンプレート）で第三回目！！！
2016
15
こんにちは。
前回は、htmlで終わりました。
実は、一気にcssもやっちゃおうかなとも思ったのですが、長くなるので分けることにしました。
画像がたくさんでてきますが、見えにくい場合はクリックしていただくと大きくなります。
HTML全体
CSS全体
クラス名headdrop1がcategory、クラス名headdropheadがcategoryにマウスオンで出てくるところですね。
全体だけ表示してもわかりにくいので、headdrophead、headdrop1、その2つの両方に関わってくる部分に分けて紹介していきます。
category部分のクラス名headdrophead単体に関しては何とこれだけです。
幅なんかは既にあるCSSで指定されちゃうので、これだけで十分なんですね。
前回でちょこっとだけ触れましたが、「:hover」は疑似クラスです。
後ろにこれをつけると、マウスオンしたとき、という条件が付けられます。
cursor:pointerなので、マウスオンしたときカーソルを変えてくださいね、という意味ですね。
なんかたくさんあります（笑）
opacityは透明度を操作するものですね。これのおかげで、リストが出てこれたりドロンできたりするわけです。
displayでも代用できます。
headdrop1とheaddrop1:hoverではopacityの値が違うのがわかりますか？
headdrop1ではopacityが０で完全な透明です。ドロンした状態ですね。
このドロンした状態だと、クリックなどはできません。
追記：すみません。opacity:0でもクリックやhover（マウスオン）は効きます。
一方、headdrop1:hoverではopacityが1で普通に見えます。
headdrop1にhoverできる、つまりマウスオンしているなら消えないでね～ということです。
これを書いておかないと、リストが出てきてもクリックする前にドロンされちゃいますからね。
でてきたリストを消えないようにするための部分です。
青色部分は位置調整です。
position:absoluteとleft25%で、左から25%の部分に配置してくださいね～といってます。
次に、width50%で、幅を50%にしてくださいね～といいます。
すると、残る右の余白は絶対に25%になりますよね。（全体１００％-左２５％－幅50％＝右25％）
左も右も余白が決まるので、でてくるリストの位置がしっかり固定できるわけです。
一つだけ紫色の部分があります。z-indexです。
これは初期値が0で、大きな値をいれるほど、重なったときに上に来てくれます。
実は、このリストの下にはスライドがあるのですが、z-indexで指定しないとスライドの方が上に来てしまうのです。
このスライドは、カラーミーショップのスライドを簡単に制作できるアプリようなモノで作ったのですが、そのせいかもしれませんね。
アニメーションと書いてある部分は、基本気にしなくてもOKです。
省いてくれても問題ありません。
これはリストの出てき方をゆっくりにしますよ～、という意味です。
無駄にたくさん書いてあるのは、ブラウザごとに指定しないといけないからですね。
さぁ、PC版、最後の部分です！
カテゴリのドロップリストを作るには、categoryの部分にマウスオンしてリストが出てこないといけませんよね。
これは言い換えると、categoryのheaddropheadと出てくるリスト部分のheaddrop1を関連付けないといけないということです。
その一文がこちら！
これだけです！
でも、重要なopacityを指定していますね。
この部分は一文だけですがめちゃくちゃ重要です。
まず、.headdrophead:hover~headdrop1について。
.headdrophead:hover→categoryのところにマウスオンしたら
~.headdrop1→弟のリスト部分に何かしちゃうよ～
という意味ですね。
｛｝の中に「何か」を記載します。
この場合はopacity1なので、リストが出てくることになります。
つまり.headdrophead:hover~headdrop1{opacity:1;}は、
categoryにマウスオンでリストが出てくる（透明じゃなくなる）よ～
ということになるわけです。
さらっと、弟のリスト部分とか書きましたが、htmlには兄弟関係があります。
このあたりは色んなサイトでたくさん説明されているので、そちらにお任せしたいっ。
もし、「ヘイ！ブラザーがわからない」という声があったら、また別に説明させていただきます。
間接セレクタで参考になるサイト
次回は、スマホ用のドロップリストを作っていきます。 こちらに一か所修正があります。すみませんでした。
前回は、htmlで終わりました。
実は、一気にcssもやっちゃおうかなとも思ったのですが、長くなるので分けることにしました。
cssの全体とhtmlの復習
画像がたくさんでてきますが、見えにくい場合はクリックしていただくと大きくなります。
HTML全体
CSS全体
クラス名headdrop1がcategory、クラス名headdropheadがcategoryにマウスオンで出てくるところですね。
部品ごとに分けていくよ。
全体だけ表示してもわかりにくいので、headdrophead、headdrop1、その2つの両方に関わってくる部分に分けて紹介していきます。
まずは、categoryのheaddrophead
category部分のクラス名headdrophead単体に関しては何とこれだけです。
幅なんかは既にあるCSSで指定されちゃうので、これだけで十分なんですね。
前回でちょこっとだけ触れましたが、「:hover」は疑似クラスです。
後ろにこれをつけると、マウスオンしたとき、という条件が付けられます。
cursor:pointerなので、マウスオンしたときカーソルを変えてくださいね、という意味ですね。
でてくるリスト部分、headdrop1
なんかたくさんあります（笑）
一番重要なのは赤文字のopacityです。
opacityは透明度を操作するものですね。これのおかげで、リストが出てこれたりドロンできたりするわけです。
displayでも代用できます。
headdrop1とheaddrop1:hoverではopacityの値が違うのがわかりますか？
headdrop1ではopacityが０で完全な透明です。ドロンした状態ですね。
このドロンした状態だと、
追記：すみません。opacity:0でもクリックやhover（マウスオン）は効きます。
一方、headdrop1:hoverではopacityが1で普通に見えます。
headdrop1にhoverできる、つまりマウスオンしているなら消えないでね～ということです。
これを書いておかないと、リストが出てきてもクリックする前にドロンされちゃいますからね。
でてきたリストを消えないようにするための部分です。
青色は位置調整。％は便利です。
青色部分は位置調整です。
position:absoluteとleft25%で、左から25%の部分に配置してくださいね～といってます。
次に、width50%で、幅を50%にしてくださいね～といいます。
すると、残る右の余白は絶対に25%になりますよね。（全体１００％-左２５％－幅50％＝右25％）
左も右も余白が決まるので、でてくるリストの位置がしっかり固定できるわけです。
紫のz-indexは重なり対策
一つだけ紫色の部分があります。z-indexです。
これは初期値が0で、大きな値をいれるほど、重なったときに上に来てくれます。
実は、このリストの下にはスライドがあるのですが、z-indexで指定しないとスライドの方が上に来てしまうのです。
このスライドは、カラーミーショップのスライドを簡単に制作できるアプリようなモノで作ったのですが、そのせいかもしれませんね。
アニメーションと書いてある部分は、基本気にしなくてもOKです。
省いてくれても問題ありません。
これはリストの出てき方をゆっくりにしますよ～、という意味です。
無駄にたくさん書いてあるのは、ブラウザごとに指定しないといけないからですね。
2つがかかわる部分！ニョロニョロこと間接セレクタをご存じ？
さぁ、PC版、最後の部分です！
カテゴリのドロップリストを作るには、categoryの部分にマウスオンしてリストが出てこないといけませんよね。
これは言い換えると、categoryのheaddropheadと出てくるリスト部分のheaddrop1を関連付けないといけないということです。
その一文がこちら！
これだけです！
でも、重要なopacityを指定していますね。
この部分は一文だけですがめちゃくちゃ重要です。
まず、.headdrophead:hover~headdrop1について。
.headdrophead:hover→categoryのところにマウスオンしたら
~.headdrop1→弟のリスト部分に何かしちゃうよ～
という意味ですね。
｛｝の中に「何か」を記載します。
この場合はopacity1なので、リストが出てくることになります。
つまり.headdrophead:hover~headdrop1{opacity:1;}は、
categoryにマウスオンでリストが出てくる（透明じゃなくなる）よ～
ということになるわけです。
間接セレクタ「~」は、ヘイ！マイブラザーということ！
さらっと、弟のリスト部分とか書きましたが、htmlには兄弟関係があります。
このあたりは色んなサイトでたくさん説明されているので、そちらにお任せしたいっ。
もし、「ヘイ！ブラザーがわからない」という声があったら、また別に説明させていただきます。
間接セレクタで参考になるサイト
次回は、スマホ用のドロップリストを作っていきます。 こちらに一か所修正があります。すみませんでした。