Webエンジニアのブログ

Webサイトでは多くの画像を利用してデザインしながらコンテンツを作っていきますが、利用する画像のサイズが大きいと表示速度に影響します。またPCやタブレット端末、スマートフォンなど多くのデバイスにあう画像を表示させたいときは、デバイス幅によっ...
続きを読む>>

レンダリング処理でサーバとのデータのやり取りが行われる中で、Webブラウザに表示されるまでの時間をなるべく速くすることで、ユーザー体験としてもSEOとしても最適なWebページと言えるでしょう。 読み込みが多く必要な文書構造である場合、特に大...
続きを読む>>

HTML5から追加されたfigure要素は、主に画像を載せる時に利用することが多いかと思います。 figure要素は、写真、挿絵、図表、コードなどをまとまりとして表すときに利用します。そして、注釈を付けるためにfigcaption要素も使用...
続きを読む>>

フォームのデザインでユーザーに選択してもらう機能として、予め選択項目を表示しておくラジオボタンやチェックボックスがありますが、その他にもプルダウンメニューとして表示はしておかないけれども、選択項目を用意しておくセレクトボックスがあります。こ...
続きを読む>>

Webで使える画像のフォーマットは、JPEGやPNG、GIFなど多くのフォーマットがあります。Webサイトでも画像をよく利用していくわけですが、画質や透明色の利用、色数やサイズ容量といろんな特徴を考えて、適した画像を使い分けていきます。 昨...
続きを読む>>

Webサイトで利用する画像フォーマットとして拡大・縮小しても劣化しなく軽量なデータなので、SVGはこれからのWebサイトで多く利用されていくでしょう。そんな中、SVGの利用にあたって少し手こずるのが様々なデバイスで利用するためのレスポンシブ...
続きを読む>>

Webサイトのお問い合わせやWebアプリケーションの入力フォームなどでHTMLのinput要素を使ってフォーム入力欄を作成していきますが、ただHTMLでマークアップしてデザインを整えただけではちょっとした使いづらさでユーザーにストレスを与え...
続きを読む>>

Webデザインをする中で画面全体に背景画像を表示させるといったデザインにすることはよくあります。画像を大きく見せることで大きなインパクトを与えることができてWebサイトの印象からいろんなメッセージを使えることができます。 実際にHTMLとC...
続きを読む>>

Webサイトで背景として動画を画面全体に流すことでユーザーの目を引きつけて言葉では伝わらないメッセージや印象を与えることができます。 ここではHTML5のvideoタグとCSSで動画を背景として画面全体に表示させる方法をご紹介します。 HT...
続きを読む>>

Googleのサービスはすごく便利なものばかりで、その中でもGoogleカレンダーを利用されている方は多いんではないでしょうか。もちろんプライベートで使うことが多いですが、仕事用や事業のサービス等で使うこともよくあることです。事業のサービス...
続きを読む>>