様々なmargin-topに対応したい

レイアウト設計を完璧にやるのは不可能

アイテムの上部アキはデザイン・レイアウト設計段階でしっかり決めて

  • 何pxのアキがあるのか?
  • 他の要素が来た場合はどうなるのか?
  • タイトルの直後はどうなるのか?
  • 同じアイテムが連続した場合は何pxあけるのか?

きっちり設計できればいいんですけど、なかなか完璧にはいかないのが現実……

基本的には30pxアケだけど、今回は24pxにしたい! そんなことありますよね。毎回スタイルシートに書けばいいんですけども、あまりにも特殊ケースすぎると再利用しないスタイルシートを量産しても無駄なので、自分の場合ですけど margin-top のスタイルを大量に用意するようにしてます。

コーディング美学的には邪道なのかも?

単発っぽいスタイルシートでも、きっちりクラスを付与してcssに書いていく。そういう考え方もあるんですけど、css側が「これどこで使ってるの?」みたいな再利用性の低いスタイルばかりになるのもなあ…と思ったのが発端。

私「margin-top を0~100px まで用意しておけばいいんじゃん!」

SCSSでの記述方法

CSSで101種類分記述していくのは大変なので、SCSSでの記述方法を紹介。

@for $i from 0 through 100 {
    .mt#{$i} {
        margin-top: #{$i}px !important;
    }
}

これで

margin-top: 0px; ~ margin-top: 100px; が生成されます。

HTML上ではclass名として mt0 ~ mt100 で指定します。

margin-top を1px単位で調整したい時とか、アドリブ的な margin-top が必要な時に重宝します。

コメントを残す

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

4 × 4 =