はてなブックマーク

html・cssの記述 html <img src="./star.svg" class="keyframe0 animation"> 共通css .animation{ animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; } htmlとcssは、上記をベースに動かしていきます。 position: absoluteで動かすとカクカクする See the Pen by むぅ (@mugenweb) on CodePen.0 css .keyframe0{ animation-name: anim_po; position: absolute; } @keyframes ani

iPhoneやipadでアドレスバーを非表示にしてフルスクリーンモードにすることで、サイトをアプリっぽく表示する、apple-mobile-web-app-capableと、ステータスバーの表示を変更できるapple-mobile-web-app-status-bar-styleのメモ。 webアプリ関連記事 jQueryとaudioタグでクリックすると音が鳴るiOSのwebアプリを作る iPhoneでアドレスバーを非表示にしてサイトをアプリっぽくする、apple-mobile-web-app-capable apple-mobile-web-app-capableとは apple-mobile-web-app-capableはiosのSafariで使えるmetaタグで、設定することでiosのSafariのUIを変更することができます。 apple-mobile-web-app-capab

jQuery関連記事 【jQuery】pdfが存在するか、mimeタイプのバリデーションする jQuery UIのsortableを使ってリストをドラッグで並び替える jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種 bxSliderの使い方と、オプションでのカスタマイズ方法 select・optionタグをjQueryで、プルダウンの選択値を取得、変更する jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる 関連記事をもっとみる クエリパラメーターとは？ xxx/test.html?sex=men&i

デモのデータはこちら。 csv URL,性別,リンク文字 https://mugenweb-note.com/web/,1,メンズシューズ https://mugenweb-note.com/web/,2,レディース財布 https://mugenweb-note.com/web/,1,メンズバッグ 性別は1→メンズ、2→レディースで定義してます。 エクセルで作ったcsvを「itemlist.csv」で保存します。 文字コードはhtmlと合わせてくださいね。 外部csvを、Excelで変更するならS-JISだと思うので、htmlがUTF-8なら文字コードの変更が必要です。 readcsv.jsを用意する 次に実際の処理をするjs、「readcsv.js」を用意します。 上の表のセル番号がthis[?]の数字です。0から始まることに注意！ 下のコードをコピーし「readcsv.js」で保存し

jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、8種類実装しました。 クリックしたときに開いたままにしておくものや、マウスオーバー時にスタイルを変える、開いたアコーディオンメニュー以外は自動で閉じる、最初から開いておく、閉じるボタンで閉じる、多階層のアコーディオンメニュー、アンカーリンクをクリックで、スクロール＆該当アコーディオンメニューの開閉などのサンプルです。 ナビゲーションメニュー関連記事 cssで要素を上下左右に中央寄せするサンプル スクロールしてもコンテンツの範囲内を固定されて追従するサイドメニューの作り方【jQuery】 スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】 jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる cssで作る、横