177 行
5.0 KiB
SCSS
177 行
5.0 KiB
SCSS
/* -----------------------------------------------------------------------------
|
|
#Text
|
|
-------------------------------------------------------------------------- */
|
|
/*doc
|
|
---
|
|
title: text
|
|
name: text
|
|
categories: [utility]
|
|
---
|
|
|
|
テキストのスタイルを指定する汎用クラスです。
|
|
|
|
```block
|
|
<p class="u-text-light">font-weight 300</p>
|
|
<p class="u-text-normal">font-weight 400</p>
|
|
<p class="u-text-bold">font-weight 600</p>
|
|
<p class="u-text-indent">先頭の1文字目を1文字分字下げします。</p>
|
|
<p class="u-text-note">2行目以降の1文字目を1文字分字下げします。<br>2行目以降の1文字目を1文字分字下げします。</p>
|
|
<p class="u-text-nowrap">テキストを折り返させません。横幅を超えても、このテキストは折り返さずに表示されます。</p>
|
|
<p class="u-text-breakword">テキストを折り返させます。長文になっても、このテキストは必ず折り返して表示されます。</p>
|
|
<p class="u-text-justify">テキストを両端揃え（均等割り付け）させます。通常のテキストと文字間が違うのが分かると思います。</p>
|
|
<p class="u-text-none">記述した通りに表示します。</p>
|
|
<p class="u-text-lowercase">abcdEFGH すべての英単語を小文字で表示します。</p>
|
|
<p class="u-text-uppercase">abcdEFGH すべての英単語を大文字で表示します。</p>
|
|
<p class="u-text-capitalize">abcdEFGH 英単語の先頭を大文字で表示します。</p>
|
|
<p class="u-text-smallcaps">abcdEFGH スモールキャップ（小文字と同じ高さで作られた大文字）で表示します。</p>
|
|
<p class="u-text-vertical">abcdEFGH 縦書きで表示します。</p>
|
|
<p class="u-text-vertical u-text-vertical--upright">abcdEFGH 英文も縦書きにする場合はModifierを指定します。</p>
|
|
<p class="u-text-right">text-align right</p>
|
|
<p class="u-text-center">text-align center</p>
|
|
<p class="u-text-left">text-align left</p>
|
|
<p class="u-text-top">vertical-align top</p>
|
|
<p class="u-text-middle">vertical-align middle</p>
|
|
<p class="u-text-bottom">vertical-align bottom</p>
|
|
<p class="u-text-baseline">vertical-align baseline</p>
|
|
```
|
|
*/
|
|
|
|
/* font-weightを指定します。 */
|
|
.u-text-light {
|
|
font-weight: $_font-weight-light !important;
|
|
}
|
|
|
|
.u-text-normal {
|
|
font-weight: $_font-weight-normal !important;
|
|
}
|
|
|
|
.u-text-bold {
|
|
font-weight: $_font-weight-bold !important;
|
|
}
|
|
|
|
/* 先頭の1文字目を1文字分字下げします。 */
|
|
.u-text-indent {
|
|
text-indent: 1em !important;
|
|
}
|
|
|
|
/* 2行目以降の1文字目を1文字分字下げします。 */
|
|
.u-text-note {
|
|
margin-left: 1em !important;
|
|
text-indent: -1em !important;
|
|
}
|
|
|
|
/* テキストを改行させません。 */
|
|
.u-text-nowrap {
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* テキストを改行させます。 */
|
|
.u-text-breakword {
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
/* テキストを両端揃えさせます。 */
|
|
.u-text-justify {
|
|
text-align: justify !important;
|
|
text-justify: inter-ideograph !important;
|
|
}
|
|
|
|
/* 記述した通りに表示します。 */
|
|
.u-text-none {
|
|
text-transform: none !important;
|
|
}
|
|
|
|
/* すべての英単語を小文字にします。 */
|
|
.u-text-lowercase {
|
|
text-transform: lowercase !important;
|
|
}
|
|
|
|
/* すべての英単語を大文字にします。 */
|
|
.u-text-uppercase {
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
/* 英単語の先頭を大文字にします。 */
|
|
.u-text-capitalize {
|
|
text-transform: capitalize !important;
|
|
}
|
|
|
|
/* スモールキャップ（小文字と同じ高さで作られた大文字）にします。 */
|
|
.u-text-smallcaps {
|
|
font-variant: small-caps !important;
|
|
}
|
|
|
|
/* 縦書きにします。 */
|
|
.u-text-vertical {
|
|
writing-mode: vertical-rl !important;
|
|
text-orientation: mixed !important;
|
|
}
|
|
|
|
/* 英文も縦書きにする場合はModifierを指定します。 */
|
|
.u-text-vertical--upright {
|
|
text-orientation: upright !important;
|
|
}
|
|
|
|
.u-text-right {
|
|
text-align: right !important;
|
|
}
|
|
.u-text-center {
|
|
text-align: center !important;
|
|
}
|
|
.u-text-left {
|
|
text-align: left !important;
|
|
}
|
|
@media screen and (max-width: 1023px){
|
|
.u-text_r-lg-c {
|
|
text-align: center !important;
|
|
}
|
|
.u-text_r-lg-l {
|
|
text-align: left !important;
|
|
}
|
|
.u-text_c-lg-r {
|
|
text-align: right !important;
|
|
}
|
|
.u-text_c-lg-l {
|
|
text-align: left !important;
|
|
}
|
|
.u-text_l-lg-c {
|
|
text-align: center !important;
|
|
}
|
|
.u-text_l-lg-r {
|
|
text-align: right !important;
|
|
}
|
|
}
|
|
@media print, screen and (min-width:768px) {
|
|
.u-text_r-sm-c {
|
|
text-align: center !important;
|
|
}
|
|
.u-text_r-sm-l {
|
|
text-align: left !important;
|
|
}
|
|
.u-text_c-sm-r {
|
|
text-align: right !important;
|
|
}
|
|
.u-text_c-sm-l {
|
|
text-align: left !important;
|
|
}
|
|
.u-text_l-sm-c {
|
|
text-align: center !important;
|
|
}
|
|
.u-text_l-sm-r {
|
|
text-align: right !important;
|
|
}
|
|
}
|
|
|
|
.u-text-top {
|
|
vertical-align: top !important;
|
|
}
|
|
.u-text-middle {
|
|
vertical-align: middle !important;
|
|
}
|
|
.u-text-bottom {
|
|
vertical-align: bottom !important;
|
|
}
|
|
.u-text-baseline {
|
|
vertical-align: baseline !important;
|
|
} |