レスポンシブに対応した簡単メニュー – mororeco
PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。 サンプルを用意しましたのでまずは確認してみてください。 ウィンドウサイズを小さくしてみたり広げてみたりすると、２列になり、メニュータブにと変化するようにしてあります。 デモサンプル それでは、作り方を見ていきましょう。 1.HTMLを記述 <nav id="menu-box"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu" class=""> <li><a href="#">Navi1</a></li> <li><a href="#">Navi2</a></li> <li><a href="#">Navi3</a></li> <li><a href="
IE8以下でメディアクエリが効かないとき… – mororeco
レスポンシブデザインを制作する際に「Media Queries（メディアクエリ）」を使用してCSSの表示を切り替えますが、IE8以下ではこの「Media Queries」に標準対応していません。そこで「css3-mediaqueries.js」等を読み込むことで対応させたりしますが、それでもこのMedia Queriesが効かないということがあります。そこで、確実にMedia Queriesを使ってcssを読み込む方法をまとめておきます。 Media Queriesを使用してcssを読み込む3つの方法 まずは、Media Queriesを利用してCSSを切り替える際の方法には3つあります。 (1).Linkタグのmedia属性で指定する <link rel="stylesheet" media="screen and (min-device-width: 781px)" href="pc.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
