Webエンジニアのブログ

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

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

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

HTMLのformタグを使った入力フォームでは入力文字数に制限をかけたい時はjQueryを利用することで入力文字数に制限をかけることができます。 Twitterでも投稿に文字数制限があるため、制限を超える入力があると投稿できないように制御さ...
続きを読む>>

Webサイトのスマートフォンのメニューボタンでよく見かけるデザインが三本ラインのハンバーガーメニューだと思います。 ハンバーガーメニューに関してはCSSのみでOPENとCLOSEのデザインを作りメニューの表示・非表示もCSSでできますので、...
続きを読む>>

Webページで見出しや特別なメッセージなどで少し凝った見せ方をしたいことはよくあります。 あまり使う機会があるかはわかりませんが、jQueryとCSSでテキストを一文字ずつ色を変えてカラフルにするといったデザインをご紹介します。  ...
続きを読む>>

jQueryを使う際にCDNを利用することでWebサイトの表示速度が少し上がりますので、自分の公開サーバからではなくCDNサーバからjQueryを読み込んでいるWebサイトは多いんではないでしょうか。 CDNとはコンテンツデリバリネットワー...
続きを読む>>

WebサイトでGIFアニメーションを使っているとうまく動かないといったことはないだろうか。おそらくそれはループしない一回だけのGIFアニメーションを使う時。 ループしない一回だけのGIFアニメは一度アクセスしてからリロードしてもアニメーショ...
続きを読む>>

WordPressでWebサイトやブログを構築する中で、HTMLやCSS、JavaScript、そしてWordPressの関数を利用してPHPスクリプトでオリジナルのテーマを作成する方もいるでしょう。よくあるサイドバーにカテゴリアーカイブリ...
続きを読む>>