Webエンジニアのブログ

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

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

WindowsやMacといったOSからアプリケーション、webサイトなどなどダークモード対応が進んできています。ここではCSS3のメディアクエリの特性「prefers-color-scheme」を利用して、端末のダークモード設定を判断し、w...
続きを読む>>

Webサイトの構築の際にCSS3でアニメーションを実装することはよくありますが、ユーザーによっては動かされても見にくかったり操作しづらいと感じることもあります。スマートフォンではiPhoneの視差効果を減らす設定をオンしているユーザーもいま...
続きを読む>>

Webページの構成の中で各セクションごとで見出しを載せてコンテンツを作っていきますが、コンテンツをよりわかりやすく見せるデザインとしてコンテンツごとに見出しをヘッダーに固定するといったデザインを採用しても面白いかもしれません。 グローバルナ...
続きを読む>>

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

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

Webサイトにアクセスしたとき、メインビジュアルでダイナミックに写真や動画を使ってインパクトを与えることができますが、そこに文字やメッセージなどをなんらかのアニメーションで表示させることもまたユーザーの目を引くポイントになります。 Webサ...
続きを読む>>

今ではCSSのみでいろんなデザインが表現できるようになりました。そこで少し面白いことが出来るCSS Shapesをご紹介します。CSS Shapesを使うと円や多角形などの領域をうまく利用してコンテンツ要素のレイアウトを自由にデザインするこ...
続きを読む>>

HTMLとCSSでWebページを構築しているとbefore、afterなどの疑似要素を利用することは多々あります。その中で時と場合によってはHTMLの特殊文字を使うことがあります。 日本語入力システムからは入力出来ない文字や記号などを使う際...
続きを読む>>