CSS

CSSだけでテキスト文字にグラデーションカラーを付ける方法をご紹介します。 コピペで使えるコードもありますので、ぜひ参考にしてください。 グラデーション文字のサンプル ここに実際のサンプルを用意しました。 １、普通にグラ続きを読む

CSSで、「項目は左側、内容は右側、その2つを点線でつなぐ」といったメニュー表や目次によくあるデザインの作り方をご紹介します。 この表現は“項目と内容”で構成されたレイアウトなので、次のような場面続きを読む

CSSのtext-shadowを使い文字にシャドウを付け、背景との差を出したいときなどにシャドウが薄すぎて困ったことはありませんか？ もしtext-shadowのシャドウが薄い場合には“複数の同じ影を重ね掛け”することで続きを読む

CSSのanimationプロパティは便利だし表現力豊かなのですが、どうしてもコードが長くなりがちですよね。 効率的でスマートなCSS animationの書き方をご紹介します。 なにか特別な技術や表現ということではなく続きを読む

WEBフォントを使うとサイトが重くなり、表示スピードが遅くなります。 「サイトにアクセスしても数秒の間、文字が表示されない」 と言う現象がある場合には、WEBフォントに対しての設定が適切にできていない可能性が高いです。 続きを読む

CSSのみで平行四辺形を作る方法を紹介します。 この方法を使うことで、以下のことなどがCSSのみで可能になります。 ボタンやナビゲーションを平行四辺形にする エリアの境目を斜めにする 水平垂直が基本であるWEBデザインに続きを読む

WEBサイトのデザインで三角形を作る方法をまとめます。 方法は大きく分けて、下記の3パターンがあります。 画像で作る方法 CSSで作る方法 テキストで作る方法 それぞれの方法と、使いどころ、メリットデメリットを解説してい続きを読む

WEBサイトをコーディングしているときに上下中央にする方法に迷ったことはありませんか？ 左右中央ならtext-align:center;かmargin:0 auto;で簡単にできますが、上下中央は少しテクニックが必要です続きを読む

WEB制作のCSS設計において、marginのルールを上か下かどちらに統一すべきかという議論は色々なところで行われてきました。 私もWEBサイトの制作を仕事にしてから10年ほどになりますが、この問題を日常的に考えてきまし続きを読む

HTMLで作るWEBページの要素は、基本的に縦積みになります。上に向かって重力がかかっているイメージですね。 そのため、要素を横並びにするには、なにかCSSで操作をする必要があります。 CSSで要素を横並びにする方法は、続きを読む

CSSの:hoverで子要素や擬似要素を操作する方法です。初心者から一歩進んだホバーエフェクトを作るのに役立つテクニックです。

ストライプやボーダーはCSSで作れます。直線的な柄なら、画像のリピート配置よりも楽です。その方法をご紹介します。