posted:2021年3月7日 CSS

CSSだけで文字にグラデーションカラーを付ける方法

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

ここフッター

Posted in CSS
posted:2021年2月12日 CSS

CSSでメニュー表や目次のデザインを作る方法

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

ここフッター

Posted in CSS
posted:2021年1月31日 CSS

CSSのtext-shadowが薄い場合の重ね掛け対策と実験

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

ここフッター

Posted in CSS
posted:2020年5月5日 CSS

WEBフォントの表示が遅い場合の対処方法

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

ここフッター

Posted in CSS
posted:2019年11月12日 CSS

WEBデザインで三角形を作る方法まとめ

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

ここフッター

Posted in CSS
posted:2019年10月6日 CSS

CSSで要素を上下中央にする方法まとめ

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

ここフッター

Posted in CSS
posted:2019年9月10日 CSS

上marginか下marginか、どちらに統一すべきかの結論

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

ここフッター

Posted in CSS
posted:2019年4月25日 CSS

CSSで横並びにする方法3種類とその使い分け

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

ここフッター

Posted in CSS