Webエンジニアのブログ

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

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

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

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

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

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

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

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

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

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