Webエンジニアのブログ

CSS3から追加されたFlexboxは、PCからタブレット端末、スマートフォン端末に対応したレスポンシブ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...
続きを読む>>

HTMLのformタグを使った入力フォームでは入力文字数に制限をかけたい時はjQueryを利用することで入力文字数に制限をかけることができます。ここではjQueryを使ってユーザーからの入力テキストの文字数に制限をかける方法をご紹介します。...
続きを読む>>

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

Webページで見出しや特別なメッセージなどで少し凝った見せ方をしたいことはよくあります。あまり使う機会があるかはわかりませんが、jQueryとCSSでテキストを一文字ずつ色を変えてカラフルにするといったデザインをご紹介します。ちょっとしたこ...
続きを読む>>

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