文字寄せ、空き、幅など

文字寄せ

左寄せ、右寄せ、中央、両端揃え

横方向の文字寄せのためのこんなクラス名を考えた。.textクラスのサブクラスにしよう。設定はやはり_form-styles.scssに。

align-l, align-r, align-c, align-j

読みにくいけど、最初のはalign-エルの小文字。

[scss]

.text {
  &.align-l {
    text-align: left;
  }
  &.align-r {
    ........
  }
  ........
}

[markdown]

Text left
{:.text.align-l}

Text left

[html]

<p class="text align-l">Text left</p>

以下プレヴューのみ

[Text right]

[Text center]

[Text left]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

[Text right]

[Text center]

[Text justify]

margin

margin-auto, margin-Xpx

marginで少し寄せることも考えてみる。.mgnと略記する。ただlとかrとか他と被りそうなのでmgn-rなどハイフンで繋いだクラス名にしよう。ファイルは_block-styles.scssという名前にする。

まず、autoとpx単位の寄せ。0から100pxまで用意。これは周囲全体に影響。

.mgn {
  &-auto { margin: auto; }

  &-0 { margin: 0; }

  @for $i from 1 through 100 {
    &-#{$i}px { margin: #{$i}px; }
  }
}

[.mgn-23px]

margin-left, margin-right

.mgn-l01から.mgn-l09で0.1rem〜0.9rem左マージン。 .mgn-l1で左マージン 1.0rem 寄り(エル１)。数字だけ変えて 10.0rem までの対応。一応念の為.mgn-l0などのゼロマージンも作る（部分的なリセット用）。同様に.mgn-r1など右マージン用も作る。

[Text margin left 1.0rem, align justify]

[Text margin left 2.0rem, align justify]

[Text margin left 3.0rem, align justify]

[Text margin right １.0rem, align right]

[Text margin right 2.0rem, align right]

[Text margin right 3.0rem, align right]

margin-x, margin-y

左右の組合せ。.mgn-l3 .mgn-r3でもいいが、X方向という意味で.mgn-x30pxで左右 margin 30px。同様の縦 Y方向もある。各1〜100pxまで対応。

[Text margin x30px, align justify]

px単位の左右 margin

これ以外に.mgn-lXpx,.mgn-rXpxで左右マージンを px単位で指定できるようにした。詳細は省く。

[.mgn-l21px, .mgn-r13px]

margin-top, margin-bottom

段落の改行ほどは要らないがちょっとだけ上下を空けたいときがある。

margin-top 1〜50px: .mgn-t1px,.mgn-t2px,.mgn-t3px,.mgn-t4px　….
margin-bottom 1〜50px: .mgn-b1px,.mgn-b2px,.mgn-b3px,.mgn-b4px　….

もちろん.mgn-t0と.mgn-b0もある。

□ 上に.mgn-b0、下に.mgn-t0

文章どうしの空き

□ 2行目にmargin-top:10px

[markdown]

文章どうしの空き

文章どうしの空き
{: .mgn-t10px}

文章どうしの空き

□ 2行目にmargin-top:20px

文章どうしの空き

□ 2行目にmargin-top:30px

文章どうしの空き

見た目わかりにくいけどこんどはmargin-bottom:xxx

□ 1行目にmargin-bottom:10px

文章どうしの空き

□ 1行目にmargin-bottom:20px

文章どうしの空き

□ 1行目にmargin-bottom:30px

文章どうしの空き

CSS変数渡し

これ以外の細かいバリエーションは作らずに、CSS変数渡しで対応する。

.mgn { margin: var(--mgn, 0); }

[Margin 3px 1.5rem 5px 2.3rem]
{:.text.align-c .mgn}
{: style="--mgn: 3px 1.5rem 5px 2.3rem"}

[Margin 3px 1.5rem 5px 2.3rem]

padding

paddingも同様に作る。ただし単位はpxのみ。クラス名は.pad-xx。

pad-0で周囲のpaddingが0，pad-t0でトップのpaddingが0、同じくpad-r0,pad-b0,pad-l0

pad-12pxなどで周囲のpadding対応。pad-t5pxなどで上下左右別。各1〜50px まで対応。

[外側のBOXに{:.pad-22px}]

[外側のBOXに{:.pad-t10px.pad-b15px.pad-l34px.pad-r43px}]

また paddingAxBの形でpadding: Apx Bpxの形。A-B各 0〜30px で5px単位。

[外側のBOXに{:.pad-10x30}]

[外側のBOXに{:.pad-15x25}]

[外側のBOXに{:.pad-20x0}]

だいたい想像つくと思うので細かい説明は省略。

width と height

width と height も省略形で指定。wd-xでwidth: x%、ht-Xpxでheight: Xpx。 width は 1〜100％、height は 1〜500px まで対応。wd-auto,ht-auto, width: fit-contentを表す.wd-fitもある。

[外側のBOXに{: .wd-62 .ht-125px}]

これも細かい説明は省略。

【文字寄せ、空き、幅など】

個人用ミニCSSフレームワーク（５）

文字寄せ

左寄せ、右寄せ、中央、両端揃え

margin

margin-auto, margin-Xpx

margin-left, margin-right

margin-x, margin-y

px単位の左右 margin

margin-top, margin-bottom

CSS変数渡し

padding

width と height

Article Attributes

Table of contents

【 文字寄せ、空き、幅など 】

個人用ミニCSSフレームワーク（５）

文字寄せ

左寄せ、右寄せ、中央、両端揃え

margin

margin-auto, margin-Xpx

margin-left, margin-right

margin-x, margin-y

px単位の左右 margin

margin-top, margin-bottom

CSS変数渡し

padding

width と height

Article Attributes

Next and previous

Table of contents

【文字寄せ、空き、幅など】