Webエンジニアのブログ

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

Webサイト制作で気になる項目として、Webページで読み込むファイルサイズは表示速度に影響してきますので、なるべく軽くしておきたいところです。ここでは、手軽にCSSファイルやJSファイルを圧縮して軽量化できる、Visual Studio C...
続きを読む>>

Webサイトにアクセスした際に、オープニングビデオのように動画を流してから、動画再生後にフェード効果でメインコンテンツを表示するなど、動画を活用することで文字情報だけでなく、動きのある映像で豊富な情報をわかりやすく伝えることができます。 フ...
続きを読む>>

Webサイトを利用しているユーザーが現在どのページ（カテゴリ）のコンテンツを閲覧しているのかを、ナビゲーションメニューのリンクの色を変更するなどして、わかりやすくデザインしていくこともあるでしょう。現在表示しているWebページのリンクだけス...
続きを読む>>

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

要素のコンテンツ量が違いがあっても、左揃えのレイアウトで見た目をデザインしていくこともありますが、デザインによっては対象の要素の最大幅でレイアウト調整する必要が出てきます。ここでは、jQueryで複数要素の中から最も広い横幅の値を取得してレ...
続きを読む>>

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

CSSのbackgroundプロパティでWebP画像を利用する場合、WebPをサポートしていないWebブラウザに対して、サポートしている形式の画像を表示できるように対応する必要がありますが、JavaScriptライブラリ「Modernizr...
続きを読む>>

CSSファイルや、JavaScriptを記述して読み込んでいる外部ファイル（JSファイル）は、半角スペースや改行、コメントなど、無駄を省くことでファイルサイズを軽くすることができます。ファイルを圧縮・軽量化（Minify）することで、ファイ...
続きを読む>>

WebサイトやWebアプリケーション開発でよく使われるPHPスクリプト。変数でデータを管理してプログラムで処理していく中で、PHPで扱っている変数の値をJavaScriptでも利用したいこともあります。ここでは、PHPの変数の値をJavaS...
続きを読む>>