当ページのリンクには広告が含まれています。
CSS 関連の記事です。Sass を使ったコードで紹介しています。
-
CSSで簡単に作れる袋文字
背景の画像で文字が読みにくい 背景の画像が単色でシンプルな場合は、白か黒のフィルターを付ければ視認性が良く読みやすくなります。 しかし、背景の画像が複雑だったり、白や黒が混在している時は、白黒どちらかに寄せると良いという訳ではなくなってき... -
Flex-boxで横並びにしたボタンの位置の揃え方
flexbox で横並びにした要素のボタンの位置を下揃えにする方法を紹介 -
grid レイアウトの基本的な使い方
今更聞けないgridを使ったCSSの組み立て方を解説します。 -
一つの角だけを丸める[border-radius の使い方]
border-radius の活用方法。角の指定から値の入力方法まで -
画像の焦点・注目ポイントの合わせ方[CSS]
WordPress のアイキャッチやサムネの画像の表示位置を微調整したい時は object-position で調整できる。 -
画像の文字色を反転させる[黒文字を白文字に]
画像のテキストの色を反転させて白文字にする -
transition と display: none でフェードインアニメーション
transition と display: none を使って fade-in アニメーションを作るときの方法 -
スマホの時だけ改行させる方法
テキストをスマホの時だけ任意で改行する方法 方法は2つあります。 <br> を PC表示のときだけ display: none; で隠す<span>で改行させたくない位置を囲って、 white-space: nowrap; で特定箇所の改行を禁止する See the Pen Untitled by ぼぶ@朝活in... -
背景が黒くても黒い文字を使用する方法
黒い背景に黒い文字を表示する方法。ロゴにも使使える。 -
背景を固定、コンテンツだけをスクロール
position: fixed; と background-attachment: fixed; で背景の固定 -
画像が転がるアニメーション、画像の回転[transform: rotate]
スピードに変化がある、転がるモーション -
Flexbox の配置、間隔の調整CSS(display: flex)
justify-content で flex を操作
12