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（カスタムプロパティ）の...
続きを読む>>

Web制作を学習している方に向けてWebページを作成するにあたり、HTML5で最低限必要な記述のベースとメディアクエリ（Media Queries）を使ったレスポンシブWebデザインの書き方をご紹介します。 また、後半ではちょっとした学習方...
続きを読む>>

Webデザイン上、PCとスマホのレイアウトの順番を変える時にCSSでどうしてもコントロールしきれない時があります。 そんな時に使えるCSS3のFlexboxを使ってHTMLの記述を変えずに表示順を変えるテクニックをご紹介します。  ...
続きを読む>>

CSSハックとは各ブラウザごとでCSSの実装状況やバグの影響で表示が崩れてしまう時に、特定のブラウザのみにCSSの指定ができるテクニックです。 Chrome、Firefox、Safari、IEの4つブラウザが主に使われていて、最近ではWin...
続きを読む>>

Webサイト（ホームページ）やブログの表示スピードが遅いとユーザーがちょっとイライラしたりするので改善しておきたい。また、Googleのアルゴリズムで表示速度が検索順位に左右されるってもんですから気になる人は気になりますよね。 いろいろな対...
続きを読む>>