Webエンジニアのブログ

Webサイト制作で気になる項目として、Webページの表示速度の改善は心がけていることでしょう。いろんな改善策がある中で、ソースコードも文字数からスペース、改行など、様々な情報がデータの量としてファイルサイズが決まってきますので、情報の量が多...
続きを読む>>

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

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

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

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

グローバルナビゲーションや文章内などのテキストリンクなどで、ユーザーの目を引くような下線アニメーションを実装することもあるでしょう。 マウスカーソルを合わせた時の処理として、PCの表示で有効な:hover擬似クラスを使った効果は、CSSのみ...
続きを読む>>

Webで利用していく画像形式は様々で、JPEGやPNG、GIFのほか、昨今では非可逆圧縮で軽量化され、画像の透過やアニメーションに対応している、WebP形式の画像の利用が進んでいます。 HTMLのマークアップでは、picture要素とsou...
続きを読む>>

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

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

昨今、多くのデバイスやブラウザの対応によって、Webサイトも目に優しいと言われているダークモードのデザインが求められるようになりました。 ダークモードとなると暗い色調のデザインをCSSで用意していくことになるので、既存のWebサイトでは対応...
続きを読む>>