[CSS] 上下左右の値指定のバリエーション[CSS] 上下左右の値指定のバリエーション
こういうヤツ。 margin: 0; margin: 8px 10px; margin: 0 0 10px; margin: 5px 5px 10px 5px; なかなか覚えられないので覚書。 1つ: [上下左右] 2つ […]
カテゴリー: CSS
[CSS] OOCSS、SMACSS、BEM 参考サイト[CSS] OOCSS、SMACSS、BEM 参考サイト
OOCSS Home · stubbornella/oocss Wiki · GitHub https://github.com/stubbornella/oocss/wiki An Introduction To Ob […]
[CSS] Grid Layout Module の予備知識[CSS] Grid Layout Module の予備知識
まだ仕様策定中とのことで、あくまで予備知識。 仕様策定中のCSS Grid Layout Moduleによるグリッドレイアウト入門 – WPJ https://www.webprofessional.jp/i […]
[CSS] 文字列を丸めて「…」を付ける[CSS] 文字列を丸めて「…」を付ける
text-overflow: ellipsis; – 幅を超えたら丸めて「…」を付加。 text-overflow: clip; – 幅を超えたらクリッピング。 参考サイト 文字列を省 […]
[CSS] 文字への影付け (text-shadow)[CSS] 文字への影付け (text-shadow)
画像の上に文字を配置するときに、文字を識別しやすくするために影付けすることがある。 そんな時に適当なパラメータを見つけるのに役立つサンプル付き解説サイトを覚え書きリンク。 CSS3 text-shadow box-sha […]
[CSS] CSS3生成支援サイト[CSS] CSS3生成支援サイト
便利なツールはありがたく使わせてもらおう。 総合 CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator http://www.css3m […]
[CSS] 基本メモ: セレクタいろいろ[CSS] 基本メモ: セレクタいろいろ
N番目に来る要素を選択する div要素の子要素のうち2番目に来るものがp要素だったら div p: nth-child(2) { color: red; } div要素の子要素のうち2番目に来る任意の要素 div *: […]
[CSS] 基本メモ: 属性セレクタ[CSS] 基本メモ: 属性セレクタ
サンプル 属性が一致したものだけ赤で表示する <p><a href="https://google.com">Google</a></p> <p><a h […]
[CSS] 基本メモ: キーフレームアニメーション (animation)[CSS] 基本メモ: キーフレームアニメーション (animation)
サンプル <style> #test1 { width: 50px; height: 50px; -webkit-animation: test1 5s linear 1s infinite alternat […]
[CSS] 基本メモ: アニメーション (transition)[CSS] 基本メモ: アニメーション (transition)
サンプル <style> div { width: 100px; height: 100px; padding: 10px; margin: 30px; background-color: orange; b […]
[CSS] 基本メモ: 幾何変換 傾斜[CSS] 基本メモ: 幾何変換 傾斜
サンプル <style> p { background-color: lightsalmon; padding: 20px; } </style> <style> p.test1 im […]
[CSS] 基本メモ: 幾何変換 回転[CSS] 基本メモ: 幾何変換 回転
サンプル <style> p { background-color: lightsalmon; padding: 20px; } </style> <style> p.test1 im […]
[CSS] 基本メモ: 幾何変換 移動[CSS] 基本メモ: 幾何変換 移動
サンプル <style> p { background-color: lightsalmon; padding: 20px; } </style> <style> p.test1 im […]
[CSS] 基本メモ: 幾何変換 スケーリング[CSS] 基本メモ: 幾何変換 スケーリング
サンプル <style> p { background-color: lightsalmon; padding: 20px; } </style> <style> p.test1 im […]
[CSS] 基本メモ: 円形グラデーション[CSS] 基本メモ: 円形グラデーション
書式 radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色); Google Chrome 及び Safariの実装 -webkit-gradient(radial, 開始位置, […]
[CSS] 基本メモ: 線形グラデーション[CSS] 基本メモ: 線形グラデーション
書式 linear-gradient(開始位置と角度, 開始色, 途中色, 終了色); (Google Chrome 及び Safariの実装) -webkit-gradient(linear, 開始位置, 終了位置, […]
[CSS] 基本メモ: テキストに影をつける[CSS] 基本メモ: テキストに影をつける
書式 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 サンプル <style> body { font-family: Impact; font-size: 40px; color: red; } & […]
[CSS] 基本メモ: ボックスに影をつける[CSS] 基本メモ: ボックスに影をつける
書式 box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset; サンプル <style> div { width: 100px; height: 20px; pad […]
[CSS] 基本メモ: アルファ値の指定[CSS] 基本メモ: アルファ値の指定
RGBの色成分に加えてアルファ値が指定できる。 サンプル <style> div { width: 100px; height: 20px; padding: 10px; margin: 30px; back […]
[CSS] 基本メモ: 角丸の指定[CSS] 基本メモ: 角丸の指定
ボックスの角を丸めることができる。 サンプル <style> div { width: 100px; height: 100px; padding: 10px; margin: 30px; backgroun […]