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

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

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

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

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

Web制作を学習している方に向けてWebページを作成するにあたり、HTML5で最低限必要な記述のベースとメディアクエリ（Media Queries）を使ったレスポンシブWebデザインの書き方をご紹介します。 また、後半ではちょっとした学習方...
続きを読む>>

画像や図などにキャプション（説明）を入れることで、ユーザーに画像や図を理解してもらいやすくなります。 またテキストコンテンツとしてGoogleが画像の近くにある画像の説明として認識しやすくなるため、SEOにも効果がでます。 画像の代替となる...
続きを読む>>

Webデザイン上、PCとスマホのレイアウトの順番を変える時にCSSでどうしてもコントロールしきれない時があります。 そんな時に使えるCSS3のFlexboxを使ってHTMLの記述を変えずに表示順を変えるテクニックをご紹介します。  ...
続きを読む>>

アクセスしてきたユーザーの情報を保存する時によく使われるCookie（クッキー）やSession（セッション）。ユーザーの情報を保存するにはいいんですが、サーバアクセスするたびに自動送信するのでセキュリティは低いと言えるでしょう。 また、サ...
続きを読む>>

HTML5のaudio要素は、HTML5から新しい追加された要素で音声コンテンツを埋め込むことができます。音声メディアを再生できるだけあって、Webサイト内でBGMを流す時などで使うことがあるのではないでしょうか。 Webサイト内で音楽を流...
続きを読む>>