Webエンジニアのブログ

Webページにアクセスした時に、コンテンツが綺麗に表示されるまでの時間が長いとユーザーにストレスを与えてしまいますが、ストレスを軽減するのにローディングアニメーションは非常に効果的です。ここでは、リソースが読み込まれるまでのローディングアニ...
続きを読む>>

昨今では多くのWebサイトで動画が使われており、Webページにアクセスした時にファーストビューで動画が流れるサイトもよく見かけるかと思います。 Webページにアクセスした時にはじめに動画が流れて、動画再生の終了時に動画がフェードアウトし、そ...
続きを読む>>

要素のコンテンツ量が違いがあっても、左揃えのレイアウトで見た目をデザインしていくこともありますが、デザインによっては対象の要素の最大幅でレイアウト調整する必要が出てきます。 WordPress等のCMSであれば、投稿の内容によって幅が変わる...
続きを読む>>

マウスカーソルを合わせた時の処理として、PCの表示で有効な:hover擬似クラスを使った効果は、CSSのみで実装することができます。また、スクロール時のアニメーションでしたら、スマートフォンやタブレット端末で効果的です。ここでは、hover...
続きを読む>>

JavaScriptを簡易的に記述できるjQueryでは、便利なメソッドがいろいろ用意されており、手軽にWebページに動きを加えることができます。ただ、Webデザインでよくある複数の画像を切り替えて表示するスライドショーは、jQueryのプ...
続きを読む>>

Webページのコンテンツの見せ方として、アニメーションの動きを加えることもユーザーの目を引く一つのデザインです。スクロール時のアニメーションはいろんなデザインで採用されています。ここでは、jQueryのみでスクロール時に要素が可視範囲に入っ...
続きを読む>>

Webサイトのデザインを構築していくうえで、画像に対してクリックアクションで表示に変化を加えることはよくあります。画像ギャラリーや画像にフォーカスし画像を効率良く見せる方法として、ポップアップで拡大表示するなどを実装したいこともあるでしょう...
続きを読む>>

jQueryでアニメーションを作る際に、何かのアニメーションの後にもう一つアニメーションをさせたい時にはコールバックを利用します。animateメソッドの後に実行される関数としてコールバック関数を呼び出して、関数内で次のアニメーションを実行...
続きを読む>>

HTMLのformタグを使った入力フォームでは入力文字数に制限をかけたい時はjQueryを利用することで入力文字数に制限をかけることができます。ここではjQueryを使ってユーザーからの入力テキストの文字数に制限をかける方法をご紹介します。...
続きを読む>>

Webサイトでよく見るスマートフォン用のハンバーガーメニューはCSSのみで作成して表示・非表示まで実装することができますが、少し高度な技術はちょっと苦手だなという方はいるでしょう。ここではクリックして画像を切り替えるスマホ用メニューを作成す...
続きを読む>>