【PR】

2019/10/13 18:51

これ使ってみて!すげー効果だから!
  • 19お気に入り
  • 2491view

まずは使った感想を書いてみる!

基本の文章はこんな感じで記載されます。基本の文章のクラスは.noteです。

■文字系装飾
文字サイズ:極小(.text-xsmall)小(.text-small)、普通、大(.text-large)特大(.text-xlarge)極大(.text-big)
文字の色:赤(.color-red)青(.color-blue)緑(.color-green)ピンク(.color-pink)オレンジ(.color-orange)
グレー:不透明度でグレーを表現します。デフォルトは100%、.alpha-dark.alpha-light
文字の背景色:黄(.bg-yellow)青(.bg-blue)赤(.bg-red)ピンク(.bg-pink)
太字:<strong>タグ
文字マーカー:黄(.mk-yellow)青(.mk-blue)赤(.mk-red)ピンク(.mk-pink)
下線:黄(.ud-yellow)青(.ud-blue)赤(.ud-red)ピンク(.ud-pink)
太字:<strong>タグ
その他装飾:下線<u>タグ打ち消し<s>タグ
テキストリンク

■配置
中央配置は.align-center
右は.align-right

大見出しはクラス.primary-heading

.secondary-heading

.tertiary-heading

.quaternary-heading

.quinary-heading

■画像

引き延ばし

必ず引き延ばしたいときは、クラス.fit-img

デフォルトサイズセンター配置

画像は引き延ばさずオリジナルサイズの時で真ん中に配置するときはクラス.align-center-img

デフォルトサイズ左配置

画像は引き延ばさずオリジナルサイズの時で左に配置するときはクラス.align-left-img

回り込み

回り込みテキストはこんな感じです。imgタグにクラス.float-imgをつけると回り込みます。
親の要素に.clearfixを入れるのを忘れないようにしましょう。回り込みを解除することができます。

フレックス フレックス フレックス

横並びの場合は.flex-imgで囲みます

■リスト

  • 基本リストは.general-list
  • 基本リストは.general-list
  • 基本リストは.general-list
  1. 番号リストは.ordered-list
  2. 番号リストは.ordered-list
  3. 番号リストは.ordered-list

■テーブル

基本テーブル 基本 基本
.general-table 基本 基本
基本 基本 基本

■レビュー

タイトルはクラス.review-title

文字はクラス.review-content。ボックスは.review-boxになる。.review-wrapperで囲う

山田くん 男性 (45)

タイトルはクラス.review-title

文字はクラス.review-content。ボックスは.review-boxになる。.review-wrapperで囲う

山田くん 男性 (45)

■インタビュー

はなさん
ここにテキストが入ります。クラスは.interview-content
左側は.interview-left。写真周りは.interviewr。写真は.interview-thumbでbackground-imageで表示するよ。.nameは名前を入れる。ない場合もOK。
.interview-contentに.bg-primaryをつけると色が着くよ。
ここにテキストが入ります。クラスは.interview-content
右側は.interview-right。
わたる

■引用

blockquoteタグでpタグを囲う

引用元などはfooterタグに記載してURLはciteタグで囲う

© Men's Style