JavaScript・jQuery - 気まぐれWEBLOG

【レスポンシブ】画像サイズの”縦横比を維持”してトリミングする裏技

縦横比を維持するのはCSSだけでは難しい実際に横幅100％だったりとかでの対応が多いと思うのですが、レスポンシブするにあたって、画像の縦横比を維持したまま横幅を％指定したい、という事がありますよね。その時の実装方法を簡単に説明します。 1,まず […]

jQueryでユーザーエージェント判定をして、レスポンシブ対応をする cssはメディアクエリでレスポンシブ対応が可能ですが、jQueryでも必要な場合があります。そんな時の一つの方法として【ユーザーエージェント判定】と言うものがあります。簡単に言 […]

jQueryの読み込みのタイミングは、プログラムを組んでいく上でとても重要なものです。順番を間違えるとその処理が動かなかったりするので、しっかりとした定義をして処理を実行させましょう。ページの読み込みが開始されたとき [crayon-673f0a […]

超便利！jQreryの基本 DOM操作！ WordPressのテンプレートタグや、自動生成されてしまってタグをカスタマイズ出来ない時があります。でも最初からプログラムを書いていると時間と手間が… という時には、指定した要素の前や後ろ、子要素の前や後 […]

コピペで簡単実装【TOPに戻るボタン】の紹介。何も考えない。コピペで簡単実装しましょう（笑） jQueryの呼び出しまずはjQueryをhtmlファイルに呼び出します。 htmlファイルにコピペ [crayon-673f0ae69c9da2303 […]

最近ではLPのみならず、通常の企業サイトでもアニメーションを使用して要素を出現させたり動かしたりするサイトが増えてきました。その中でも最も使いやすく動作が軽いjQueryのプラグイン【inview.js】と、cssのアニメーションプラグイン【Ani […]

レスポンシブで固定ヘッダーの高さが可変。アンカースクロールがうまく設定できない。ヘッダーにposition:fixed;を適用していて固定していると、ページ内スクロールでスルスルーっと移動するときにズレが生じてしまいます。そんな時はheaderの […]

CSSの”100vh”でも出来るんだけど、ブラウザ対応が気になる。。。今流行のサイトのファーストビューを画面いっぱいに画像や動画を表示する方法。 cssでもできるんですが、お客様によっては古いブラウザを使用していたりして、height:100vh; […]

WordPressで住所をカスタムフィールドで入力した際に、ついでにそのカスタムフィールドの情報を引っ張ってきてGoogle Mapを利用する方法。 1.住所から緯度経度を取得 phpテンプレート [crayon-673f0ae69d24b05360 […]

WordPressでサイト制作している際のjQueryの記述の注意点 WordPressでjQueryを使用するときに、htmlで制作しているときと同じように間違えているjsファイルの記述 [crayon-673f0ae69d48c27266723 […]