読者です 読者をやめる 読者になる 読者になる

気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【メモ】CSS3の勉強

最近、個人でのWebアプリ作成時にはBootstrap等のテンプレートに頼ることが多い。

非常に便利で、何度も助けてもらった。デザインセンスがなくても、良い感じのページが簡単にできてしまう。

しかしこれは、逆に僕に大きな問題を与えることとなる。

CSS3わからん

テンプレートに当てはまらない画面を作成する際に、CSS3の書き方が全くわからないのであった。 さすがにこれはまずいと思い、テンプレートを使わずに自分でページを作成しながら、CSS3を学び、メモすることにした。

昨日実際に利用したもの

  • 横並びのブロック要素

    • CSS3の場合、float以外に、display: inline-block;で対応できる
  • ブロック要素の角を丸める

    • border-radiusを利用する
    • border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?で指定。
      • 左上、右上、右下、左下の順序
      • 前半は水平方向の半径、スラッシュより後ろは垂直方向を指定。
    • MDNで見かけたが、勧告候補らしいので、ベンダープレフィックスは実装状況を見つつはずすのが良さそう

developer.mozilla.org

  • アニメーションを設定
    • transitionを指定