タグ

ブックマーク / cotodama.co (2)

  • position: absolute;を中央寄せする方法 | コトダマウェブ

    positionプロパティをabsoluteに指定したときって、どうやって中央に寄せるんだっけ?と意外と覚えられない自分のための備忘録です。なんかposition: absolute;になった時点で配置についてどう考えたらよいか分からなくなってしまいますよね。 左右を中央寄せる方法 See the Pen img_center03 by kenichi (@ken81) on CodePen. CSS img{ position: absolute; left: 0; right: 0; margin: auto; } これは理屈というよりは覚えた方が良いと思います。左右のpositionをゼロにしてmargin: auto;と。 上下を中央に寄せる方法 See the Pen img_center04 by kenichi (@ken81) on CodePen. CSS img{ po

  • CSSでドット柄(水玉)を作る方法 | コトダマウェブ

    円形グラデーションというのはこんな感じのグラデーションです。 ここでは円形のグラデーションをスタイルシートで実装する方法について見ていきます。 線形グラデーションについて知りたい方は下記の記事もご参照ください。 radial-gr... radial-gradient関数を理解していないと、この先の話がよく分からないと思いますので、気をつけてくださいね。 それでは、最初にドットをひとつだけ作ってみます。 See the Pen dot01 by kenichi (@ken81) on CodePen. まずは、分かりやすくするために要素のサイズとbackground-sizeの値を同じにしました。radial-gradientを使って中心の色を黄色に、外側の色を青に指定してあります。 余談ですが、正方形の要素にぴったり収まる円を作るには、radial-gradientでグラデーションの終了

  • 1