【CSS】デバイス幅に合わせたサイズ可変のメニューボタンをbackgroundで作る
こんにちは。転職して、コーディングする機会も増えてきましたコーダー初心者井畑です。 今回はスマホのコーディングで苦戦したところがあったので、備忘録としてメモしておきます。 同じような悩みをもっている方の助けになれば幸いです。それではどうぞ! 今回作りたいもの 今回作りたかったのは、上図のようにデバイスの幅にあわせてサイズ可変するメニューボタンです。 問題は、メニューボタンを背景画像(background)として表示することです。これが難しかった… 問題点:背景画像の高さ指定がうまくいかない… 背景画像(background)の幅はデバイスの幅サイズによって可変できるので問題ないのですが、高さは基準となるサイズが無いので、指定しないと高さが0になってしまいます。 だからといって高さを100pxのように指定してしまうと、デバイス幅が変わった時に画像が切れたり、無駄な余白ができてしまいますX(
背景にした画像をドラッグ&ドロップ出来る様にするjQueryプラグイン・Draggable Background
背景の画像をD&D出来る様にする、というスクリプトのご紹介です。jQuery依存になります。ECサイト等で使えるかも・・・しれない。 用途はちょっと限定されそうですけど面白かったのでメモ。軽量で使い方も簡単です。 動作デモです。 テキストは普通にボックス内に書いてるだけ。背景はCSSで指定しています。あとはD&D出来る様に設定するだけ。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <script src="draggable_background.js"></script>本体とプラグインを読み込み。 $('div').backgroundDraggable();あとはセレクタを指定するだけ。 X軸のみ、Y軸のみの
CSS Lecture: CSS backgroundプロパティについてのまとめ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
