サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
yuntu-tek.com
WEBサイトには「ボタン」がつきものです。 別のページに移動するためのボタンやメッセージを送信するためのボタンなど、どんなWEBサイトでもたいてい1つか2つのボタンが設置されています。 ボタンはただ置いていてもそれほど目立ちません。 そして目立たないボタンはなかなかクリックをしてもらえません。 ですので影を付けて本当のボタンのように凹凸があるような見た目にするなど、見た目に趣向をこらしたボタンをよく目にします。 それ以外にもボタンを目立たせる方法の1つとしてボタンを「キラッ」と光らせるような仕掛けをしているサイトも良く見かけます。 マウスカーソルを乗せるとキラッとするボタン まずは基本的なマウスカーソルを乗せたらキラッとするボタンを作りたいと思います(下のボタンにマウスカーソルを乗せるとキラッとします)。 See the Pen shine1 by konpure (@yuntu) on
WEBサイトにを見ているとグローバルナビゲーションにマウスカーソルを乗せるとニューっとサブメニューが現れる「ドロップダウンメニュー」というのを見かけることがあります。 ドロップダウンメニューを一見すると何か複雑な仕掛けがありそうな気がしますが、実は割と簡単にCSSだけで実装することが出来ます。 今日はCSSを使ってロップダウンメニューを作りたいと思います。 基本的なドロップダウンメニュー とても基本的なドロップダウンメニューを作成したいと思います。 作成するサブメニューは 初期状態では隠しておく マウスカーソルがメインメニューの上に乗ったらサブメニューが現れるようにする サブメニューの開始位置はメインメニューの直下 というものです。 <body> <!-- /#header-nav --> <nav id="header-nav"> <ul class="header-list"> <li
この三本戦をタップすると、たいていの場合画面外の左や右からメニューがスライドして現れます。 これを「ハンバーガーメニュー」とか「ドロワーメニュー」とか言ったりします。 この「ハンバーガーメニュー」は「CSSとjQuery」で作ることもできますが、もっと手軽に「CSS」だけでも作ることができます。 今日はCSSだけで「ハンバーガーメニュー」を作る方法について書きたいと思います。 ハンバーガメニューの作り方 閉じるボタン有り メニューが表示された時に、そのメニューを閉じるための×印があるバージョンです。 See the Pen hamburger1 by konpure (@yuntu) on CodePen. 三本線をクリックしていただくと、メニューを閉じるための×印にかわります。 HTML <header class="header"> <div class="logo">TEST</di
このページを最初にブックマークしてみませんか?
『yuntu-tek.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く