おぼえられないから

ただただ自分の覚え書きのためです。

個人的な覚書なので見ても役に立ちませんよ。

段組を簡単にcolumnsプロパティ

CSS3で作る簡単なマルチカラム
長い文章を読みやす段落に分けるスタイル

[ HTML ]
<div class=“任意のクラス名”>
   <p> カラムA </p>
   <p> カラムB </p>
   <p> カラムC </p>
</div>

※カラムにした文書を<p>で囲う

カラムの数を指定 、column-countプロパティ
[ CSS ]
カラムの数を指定
.任意のクラス名 {
   column-count: 3;
}
数字はカラム数で「3」で3カラムになる


1カラムの文字数を指定
.任意のクラス名 {
   column-width: 23em;
}
値「23em」は1カラムに23文字入るように設定

1カラムの幅をピクセルで指定
.任意のクラス名 {
   column-width: 200px;
}
値「200px」は1カラムの幅

カラムの間の余白を指定
.任意のクラス名 {
   column-gap: 60px;
}
値「60px」はカラムどうしの間を60px空ける

文章の区切り位置を指定する
※以下のプロパティは「.任意のクラス名 p」に指定しないと反映しない
指定要素の直前で段を区切りたい場合
.任意のクラス名 p {
   break-before: column;
}

指定要素の直後で段を区切りたい場合
.任意のクラス名 p {
   break-after: column;
}

文章を段落で丁度区切らなければ
.任意のクラス名 p {
   break-inside: avoid-column;
}


kaguya

これより先はプライベートモードに設定されています。閲覧するには許可ユーザーでログインが必要です。

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット