CSS3から追加されたFlexboxは、PCからタブレット端末、スマートフォン端末に対応したレスポンシブWebデザインのレイアウト構築に優れています。要素の横並びから要素の高さを揃えたり、また上下左右中央寄せなども手軽に実装することができま...
続きを読む>>

webデザインでwebフォントを利用してデザインを構築していくことがよくあります。そこで使えるのがCSSの@font-face規則です。 @font-face規則はwebフォントを利用するために用意された規則です。webフォントで有名なのが...
続きを読む>>

webサイトでアニメーションを実装する中で、JavaScriptなどのプログラミングではなくCSSのみでデザインできることも増えてきました。 今回は、CSSのfont-variation-settingsプロパティを利用したテキストの可変ア...
続きを読む>>

昨今、WindowsやMacといったOSからアプリケーション、webサイトなどなど何かとダークモードに対応してきています。 普段からPCやタブレット、スマートフォンといったコンピュータに触れる機会が多くなり、デザインの配色によっては長時間利...
続きを読む>>

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

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

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

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

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

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