CSS辞典– category –
-
CSSだけでスライドインアニメーション（@keyframes）
画面外から要素をスライド表示する コンテンツをふわっと横からスライドインさせるアニメーションは、ページの動きにメリハリをつけたいときに役立ちます。JavaScriptを使わずCSSだけで実装できるのが魅力です。 HTML [crayon-685e4d1942124989187260/] 基... -
見出しに下線を引くスタイリッシュな方法（border-bottom）
シンプルな下線にデザインを加えることで、印象的な見出しを作れます。border-bottomを利用します。 CSS [crayon-685e4d1942543191523975/] display を inline-block にすることで横幅が要素に合うようになります。 応用：グラデーションの下線 グラデーシ... -
CSSで文字を省略して「…」を表示（text-overflow: ellipsis）
要素の幅を超えたテキストを省略して「…」を表示するには、text-overflow: ellipsisを使います。一行だけ省略することができます。※複数行には使えません。 基本CSS [crayon-685e4d19426b9060463119/] タイトルなどでの使用する場合 [crayon-685e4d19426bb... -
CSSで縁取り文字を作る（text-shadowの応用）
text-shadowプロパティを重ねることで、CSSだけで縁取り文字（アウトライン文字）を作ることが可能です。 テキストに輪郭をつけて目立たせる 基本のCSS [crayon-685e4d1942828177619774/] 太めの縁取り [crayon-685e4d194282b070379386/] text-shadowの数... -
CSSで画像を丸く切り抜く（border-radius）
丸いアイコンやプロフィール画像に便利 画像や要素を丸く表示するには、CSSの border-radius プロパティで簡単に表現できます。円形や楕円の形に切り抜くことで、デザインにやわらかさや親しみやすさを加えることができます。 基本のコード [crayon-685e4d... -
【CSS】背景をグラデーションにする（linear-gradient）
CSSだけで背景にグラデーションをかける方法です。 グラフィックソフト不要で、CSSだけでキレイなグラデーション背景が作れます。主にbackground: linear-gradient()を使用します。 CSS [crayon-685e4d1942b60163721044/] 斜めや縦方向にも対応 [crayon-68... -
【CSS】テキストに影をつける（text-shadow）
文字を立体的に見せるテキストシャドウ テキストに影をつけることで、文字が浮き上がって見えたり、読みやすさが向上します。text-shadowプロパティで簡単に追加可能です。 基本のCSS text-shadow: 横のズレ 縦のズレ ぼかしの範囲 色 ; となるイメージ... -
【CSS】特定の要素だけスクロールで固定する（position: sticky）
要素をスクロールに応じて固定表示する方法です。 ヘッダーやサイドメニューなど、一部の要素だけを画面上に固定したい場合に便利なのがposition: stickyです。topやleftなどと組み合わせて使用します。 基本のCSS [crayon-685e4d1942e2f972191860/] スク... -
【CSS】ホバー時に画像や要素を拡大表示する（transform: scale）
ホバーで画像や要素を拡大表示する方法 マウスを乗せたときに画像やボタンなどが拡大されると、視覚的にインパクトが出て注目度がアップします。transform: scale()で実装可能です。 基本のCSS hover時に要素を拡大するCSSです。「transition」を指定する... -
CSSで画像をぼかす方法（filter: blur）
画像をぼかすCSSテクニック 画像にぼかし（ブラー）をかけることで、背景を柔らかく見せたり、注目を外したりする演出が可能です。CSSのfilter: blur()を使えば、簡単に実装できます。 基本のコード [crayon-685e4d19430f3480788764/] hoverでぼかしをかけ...
