【cssプロパティを分類しよう】サイズ・形状のプロパティ

cssプロパティを分類しよう。サイズ・形状のプロパティ。

コーディングのたびに毎度CSSプロパティを調べていると時間がいくらあっても足りません。

今回は、プロパティが覚えられない人やCSSの理解をもっと深めたい人に向けて、プロパティをいくつかの性質で分類する方法と、そのうちのサイズ・形状に関するcssプロパティについての解説をしていきます。

プロパティの6大分類

CSSプロパティを以下の6つのカテゴリーに分類すると整理がつきやすくなります。僕自身が個人的に使っているやり方なので一般的な物ではありません。

  1. サイズ・形状
    widthやheightなど。この後、解説します。
  2. デザイン(装飾や視覚効果)
    backgroundやborder、opacityなど
  3. レイアウト(子要素の並び方・親子間の余白)
    display: flexやpaddingなど
  4. テキスト
    colorやfont-sizeプロパティなど
  5. 配置(自身の余白・配置、兄弟間の余白)
    positionやmarginプロパティなど
  6. アニメーション
    transition、animationプロパティなど

他のサイトなどでは解説されていないので、わからない部分があれば質問してください。参考になれば幸いです。

サイズ・形状関連のcssプロパティ一覧

プロパティを6つに分類したうちのひとつであるサイズや形状のプロパティを解説します。すべてのブロックは大きさと形状をもっています。

border-radiusプロパティ

border-radiusプロパティの図解です。
border-radiusを使うことでボックスの角を丸める効果が得られます。

border-radiusプロパティを使うとボックスの角を丸める効果が得られます。図のように、pxや%を指定することができます。(emなども使用できます)
正円をつくるときはborder-radius: 50%;と指定すると簡単に実現できます。
右上のみ角を丸めるなど個別の頂点にのみ角丸を指定することもできます。
コーディングをする中での頻出度合いもかなり高いです。

個人的に詳しい解説が載っていてわかりやすいと思った参考サイトも紹介しておきます。

今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!
https://www.webcreatorbox.com/tech/border-radius

transformプロパティ

transformプロパティ4種の図解。
拡大・縮小、傾斜、回転、移動ができます。
  • 拡大と縮小のscale (例:transform: scale(0.8); )
  • 傾斜のskew (例:transform: skewX(15deg); )
  • 回転のrotate (例:transform: rotateZ(90deg); )
  • 移動のtranslate(例:transform: translateX(100px); )

transformプロパティは上記の通り4種類あります。コーディングをしていく中で複雑な形をしたデザインでつまづいたときにtransformプロパティに助けられることも多いです。使いこなせていると便利なので覚えておきましょう。

こちらもサンプルが豊富で直感で理解できそうだと思った参考サイトを紹介しておきます。デモの動きもみれるのでわかりやすいです。

【CSS】transformの使い方を解説!要素の変形や回転も自由自在
https://creive.me/archives/16145/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です