隠し要素：このdivはページ上部に固定されているヘッダー分コンテンツが見れなくなってしまうのを防ぐため作成されています。
See the Pen Untitled by tetra-mix (@tetra-mix) on CodePen.
基本的にパソコンで使用するメニューは上のようなコードで作れます。
このコードを簡単に説明するとリストを横に並べて装飾をしただけです。
一番重要になるのが横に並べるためのdisplay: inline-block;です。
これは要素の並び方を変更するときに使用します。displayで横に並べる方法は2つあり、
inlineとinline-blockがあります。inlineでは大きさなどを指定できなくなってしまうので、
今回はinline-blockを使用しました。また、縦に並べたいときはblockを使用します。
あともう一つ、:hoverについても説明します。これは疑似クラスと呼ばれボタンを作る時にも使用しましたが、
マウスが乗っているとき限定のCSSを設定できます。ただし、注意点としてスマートフォンなど
のマウスを使わないディバイスでうまく表示されないことがあります。この場合、<li>の属性に
ontouchstart=""を追加してください。
そのほかのコードはすべて基本的なものなので解説を省略します。
| Back | Home | Next |