ここに掲載の記事は備忘録的内容です。詳細な説明に欠ける部分が多々あります。ご了承ください。
スマホなどデバイスごとにheightサイズ合わせをする
トップページのロゴが下に隠れてしまったりしないように高さをデバイスに合わせて取得する方法。 jsに以下を追加してビューポートの内側の高さを取得する。 で目的のボックスに以下のcssを追加する。
iPhoneとAndroidの時のみリンクをつける
電話番号などはよく使うかも、特にお店関係。 まず電話番号をspanで囲む あとはjsに以下を追加。
ページのトップへ戻るボタンsampleコード
いつも忘れるのでコピペできるように！ HTML scss こちらは矢印をcssで設定しているのでちょっと長くなっているがAwesome等でアイコンを読み込む方法もあり。その場合はa:hoverの設定を忘れないように。 j […]
loader設置用コードsample01
サイトにloaderを設置する基本形。 先ずHTML 続いてscss javascriptは以下
Humburger Navigation Smaple01
基本的なハンバーガーナビのコード。 mobile基準のレスポンシブ仕様。 モバイル表示の際にメニュー下部にSNS（Instagram）アイコン表示させている。 （Kureai BAKERYのsammpleより） HTML […]
横長の要素をマウスホィールで横スクロール
縦書きサイトで実装。 縦書きなので画面右端が出発点にし、マウスホイールを手前に回すと右から左にスクロールするという仕様にした。 参考サイト：https://atelierroi.com/tecnicalnote/js/m […]
モバイル端末のみ表示させるjs
サイトのアクセスページなどで地図を掲載した場合、PCでの閲覧時は画面がある程度大きいので問題ないが モバイル端末の場合は地図が見づらいので、端末の地図アプリでも開らけるように、「地図アプリで開く」ボタンを 設置したい。 […]
要素が画面に入ったところでフェードイン inview.js
最近多い、ちょっと動きのある表示の仕方なので実装してみた。 inview.jsを読みこませで以下のjsでclassを付与。 参考サイト：http://on-ze.com/archives/2679 inview.js: […]
他ページ指定箇所へのリンクをスクロールしながら移動する
他のページの指定箇所へのリンクで躓いたので備忘録。 基本的なjsは以下を。 これで問題ないが、MS Edge MS ieのみ何故か指定箇所からズレる。 HTMLも問題なく、jsの読み込み順などが原因かと思ったら Adbo […]
iQuery ページ遷移時のフェードイン、フェードアウト
ページの遷移時にフェードイン・アウトを行うscript。