Text

テキストレイアウト用のCSS

詳しい導入事例は導入方法を参照してください。

  • DEMO

H1 テキスト Lorem ipsum 012345

H2 テキスト Lorem ipsum 012345

H3 テキスト Lorem ipsum 012345

H4 テキスト Lorem ipsum 012345

H5 テキスト Lorem ipsum 012345
H6 テキスト Lorem ipsum 012345

Bld テキスト Lorem ipsum 012345

body テキスト Lorem ipsum 012345

normal テキスト Lorem ipsum 012345

Min テキスト Lorem ipsum 012345

Sub テキスト Lorem ipsum 012345

Short テキスト Lorem ipsum 012345

monospace テキスト Lorem ipsum 012345

serif テキスト Lorem ipsum 012345

link テキスト Lorem ipsum 012345

text-align: left;

text-align: right;

text-align: center;

使い方

クラス名に+-h1-+等のHTMLタグ名を採用していますが、HTMLタグに関係なくサイズ指定として使用してください。

+-.mono-+は等幅フォント。ランキング等の数字の時に使える。

hover用のCSSはhoverページにあります。

  • CSS
.txt.link {
  color: var(--txt-link);
  cursor: pointer;
}

.txt.h1 {font-size: var(--typo-h1);}
.txt.h2 {font-size: var(--typo-h2);}
.txt.h3 {font-size: var(--typo-h3);}
.txt.h4 {font-size: var(--typo-h4);}
.txt.h5 {font-size: var(--typo-h5);}
.txt.h6 {font-size: var(--typo-h6);}
.txt.bd {font-size: var(--typo-bd);}
.txt.min {font-size: var(--typo-min);}
.txt.sub {opacity: 0.7;}
.txt.short {letter-spacing: -0.05em;}
.txt.bld {font-weight: bold;}
.txt.nml {font-weight: normal;}

.txt.al {text-align: left;}
.txt.ar {text-align: right;}
.txt.ac {text-align: center;}

@media screen and (max-width: 768px) {
  .XS_.bld {font-weight: bold;}
  .XS_nml {font-weight: normal;}

  .XS_al {text-align: left;}
  .XS_ar {text-align: right;}
  .XS_ac {text-align: center;}
}

Class Copy