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

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

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

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

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

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

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

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

Webデザインをする上で、背景とテキストをうまく使った魅力的なデザインで人の目を引きつけたいものです。そこでテキストをマスクして透過部分から背景を見せることのできるCSS3のbackground-clipプロパティをご紹介します。 back...
続きを読む>>

CSSで変数を使うとなるとSassやLessが思い浮かぶと思いますが、CSSやWebブラウザも進化を続けて変数を扱えるようになりました。そこで今回は、CSSでも手軽に変数を扱えるようになったCSS Variables（カスタムプロパティ）の...
続きを読む>>