Webエンジニアのブログ

Webデザインでwebフォントを利用してデザインを構築していくことがよくありますが、そこで使えるのがCSSの@font-face規則です。ここでは、CSSの@font-face規則の使い方をGoogle Fontsのwebフォントを利用する...
続きを読む>>

Webサイトでアニメーションを実装する中で、JavaScriptなどのプログラミングではなくCSSのみでデザインできることも増えてきました。Variable Font（可変フォント）を利用すれば、CSSのfont-variation-set...
続きを読む>>

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

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

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

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

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

Googleの検索エンジンでWebページの表示速度が速いと、ユーザーにストレスを与えないので検索順位が上がるなどいろいろ言われている中で、表示速度を速くする方法の1つとしてHTTPリクエストを減らすという方法があります。 その1つとして画像...
続きを読む>>

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

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