CSS辞典– category –
-
CSSで画像を丸く切り抜く（border-radius）
丸いアイコンやプロフィール画像に便利 画像や要素を丸く表示するには、CSSの border-radius プロパティで簡単に表現できます。円形や楕円の形に切り抜くことで、デザインにやわらかさや親しみやすさを加えることができます。 基本のコード [crayon-6a2c9f... -
【CSS】背景をグラデーションにする（linear-gradient）
CSSだけで背景にグラデーションをかける方法です。 グラフィックソフト不要で、CSSだけでキレイなグラデーション背景が作れます。主にbackground: linear-gradient()を使用します。 CSS [crayon-6a2c9faa1c340987474322/] 斜めや縦方向にも対応 [crayon-6a... -
【CSS】テキストに影をつける（text-shadow）
文字を立体的に見せるテキストシャドウ テキストに影をつけることで、文字が浮き上がって見えたり、読みやすさが向上します。text-shadowプロパティで簡単に追加可能です。 基本のCSS text-shadow: 横のズレ 縦のズレ ぼかしの範囲 色 ; となるイメージ... -
【CSS】特定の要素だけスクロールで固定する（position: sticky）
要素をスクロールに応じて固定表示する方法です。 ヘッダーやサイドメニューなど、一部の要素だけを画面上に固定したい場合に便利なのがposition: stickyです。topやleftなどと組み合わせて使用します。 基本のCSS [crayon-6a2c9faa1dc7b719907652/] スク... -
【CSS】ホバー時に画像や要素を拡大表示する（transform: scale）
ホバーで画像や要素を拡大表示する方法 マウスを乗せたときに画像やボタンなどが拡大されると、視覚的にインパクトが出て注目度がアップします。transform: scale()で実装可能です。 基本のCSS hover時に要素を拡大するCSSです。「transition」を指定する... -
CSSで画像をぼかす方法（filter: blur）
画像をぼかすCSSテクニック 画像にぼかし（ブラー）をかけることで、背景を柔らかく見せたり、注目を外したりする演出が可能です。CSSのfilter: blur()を使えば、簡単に実装できます。 基本のコード [crayon-6a2c9faa1e897732340999/] hoverでぼかしをかけ... -
【CSS】絶対配置（position: absolute;） の要素を中央に配置する
CSSで絶対配置の要素、position: absolute; を親要素に対して、中央に配置する方法です。 対象の要素のサイズが固定されていない時は、transform を使う方法が手軽で便利です。transform で要素の中心点をずらして中央にするイメージです。 下記の様にする... -
tableのセル（td）の幅を均等にする
tableのセル（ td ）の幅を均等に揃えるには、CSSで以下のように指定すると簡単に設定ができます。 [crayon-6a2c9faa1f480485977993/] table-layout: fixed を使うと、中のコンテンツの幅に関係なく強制的に均等になります。画像やテキストが大きい場合、... -
テーブルを横スクロールできるようにするためのCSS
スマホなどのモバイル端末ではどうしても幅が小さく、画面に収めようとすると、表のバランスが崩れてしまいます。 比較表などでよく見かける、テーブルをスクロールできるようにするためのコードを紹介します。 HTML テーブルタグをdivなどのボックスで囲... -
CSSで画像をモノクロにする方法
Webデザインにおいて、画像の色調を変更することで、シンプルで洗練されたデザインを実現できます。特に、画像をモノクロ（グレースケール）にすることで、背景を引き立たせたり、ユーザーの注目を特定の部分に誘導したりできます。本記事では、CSSを使っ...
