TOP > サンプルページ

SAMPLE PAGE

サンプルページ

ff-montserrat fw-regular

ff-montserrat fw-medium

ff-montserrat fw-semibold

Zen Kaku Gothic New　人々の豊かな暮らしと

Zen Kaku Gothic New fw-medium　人々の豊かな暮らしと

Zen Kaku Gothic New fw-bold　人々の豊かな暮らしと

● 業務内容

https://st-holdings.co.jp/sample-page/

https://st-holdings.co.jp/info/--- お知らせ（アーカイブ）カスタム投稿
https://st-holdings.co.jp/info/information/--- お知らせ
https://st-holdings.co.jp/info/human-r/--- 人材事業
https://st-holdings.co.jp/info/air-water/--- 水事業
https://st-holdings.co.jp/info/glamping/--- グランピング事業
https://st-holdings.co.jp/info/energy/--- エナジー事業
https://st-holdings.co.jp/info-detail/39/

https://st-holdings.co.jp/blog/--- ブログ（アーカイブ）カスタム投稿
https://st-holdings.co.jp/blog/human-r/--- 人材事業
https://st-holdings.co.jp/blog/air-water/--- 水事業
https://st-holdings.co.jp/blog/energy/--- エナジー事業

お問い合わせフォームリクナビエントリーはこちら

Human Resources Water Business

Contact

Human Resources [English]

.season-mt-01 01-150 rounded

.season-mt-02 01-90

.season-mt-03 01-180

.season-mt-04 01-120

Bootstrap

Build fast, responsive sites with Bootstrap

Currently v5.3.0-alpha1

Style Guide Container Artpro Breakpoints Root Font Size Color Font Family Font Weight ／ Font Style Line Height Reset color Text decoration inview Swiper Img Max

Style Guide

::selection {
  background-color: $text-70;
  color: #fff;
}

.empty-none

<p class="p-20 bg-main empty-none"></p>
<p class="p-20 bg-main empty-none">.empty-none</p>

.ff-gothic 游ゴシック

.font-smoothing

.ff-gothic 游ゴシック

.ff-mincyo 游明朝体

.font-smoothing

.ff-mincyo 游明朝体

.ff-gothic fw-bold 游ゴシック

.font-smoothing

.ff-gothic fw-bold 游ゴシック

.ff-mincyo fw-bold 游明朝体

.font-smoothing

.ff-mincyo fw-bold 游明朝体

.font-smoothing{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
デフォルト↓
.font-smoothing-none{
  -webkit-font-smoothing: subpixel-antialiased;//antialiased
  -moz-osx-font-smoothing: unset;//grayscale
}

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとな...にぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえ..おかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

.text-justify

.text-justify

・あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

-　あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

デフォルト .text-indent：1em
<p class="fs-18 ls-none text-indent">・あいうえおかきくけこ…</p>
<p class="fs-18 ls-none text-indent" style="--ap-indent:1.5em"> -　あいうえおかきくけこ…</p>

Container Artpro

fs-16

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬ

font-size: 16px;

fs-10

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつて

font-size: 10px;

Breakpoints

$grid-breakpoints: (
  xs: 0,
  sm: $sm-breakpoint,//def 576px @620
  md: (10 * ($artboards-container-width / $font-size-root)) / ($artboards-container-width / $xl-breakpoint),//768px
  lg: 992px,//def 992px
  xl: $xl-breakpoint,//def 1200px @1110+30+100=1240
  xxl: $artboards-size //def 1400px @1300px
) !default;

Root Font Size

1rem

:root {
  //font-size: calc(((100vw * 335 / 375)) / ( 335 / 16));
  @include root-fsr($sp-artboards-container-width, $sp-artboards-container-max, $font-size-root);
  @include media-breakpoint-up(sm) {
    //font-size: calc(((100vw * 1110 / 1240)) / ( 1110 / 16));
    @include root-fsr($artboards-container-width, $artboards-container-max, $font-size-root);
  }
  @include media-breakpoint-up(xl) {
    font-size: #{$font-size-root};
  }
}

Color

.text-default

.text-main

.text-accent

.bg-default

.bg-main

.bg-accent

.bg-primary

.bg-secondary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-light

.bg-dark

$default-text:  #343434;//文字色
$mainColor:     #3a7bc6;//青1
$accentColor:   #48acbc;//青3

Font Family

.ff-gothic 游ゴシック

.ff-mincyo 游明朝体

$font-family-sans-serif: "Yu Gothic", YuGothic, Verdana, Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-serif: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝",serif;

Font Weight ／ Font Style

Bold text. 700

Bolder weight text (relative to the parent element). bolder

Semibold weight text. 600

Medium weight text. 500

Normal weight text. 400

Light weight text. 300

Lighter weight text (relative to the parent element). lighter

Regular weight text .fw-regular 400

Demibold weight text .fw-demibold 600

Italic text .fst-italic

Text with normal font style .fst-normal

Line Height

.lh-season fs-14 ホテルの一流シェフたちが自信をもって贈る多彩な料理。うれしい「飲み放題」の特典も付いたお得なプラン。

.lh-season fs-14 mincyo 熊本ホテルキャッスルでは、
おすすめご宿泊プランをご用意しております。

.lh-10 ロレム・イプサムと呼ばれるダミーテキストです。これは、印刷・出版などのデザインやレイアウト作業で、実際の文章を入れる前に、仮の文章として使用されます。意味のある文章ではありませんが、文章の流れや見た目を確認するために、しばしば使用されます。上記の文章は、ロレム・イプサムの一種で、200文字の長さで、一般的に使用される日本語版ロレム・イプサムの例文です。

.lh-50 ロレム・イプサムと呼ばれるダミーテキストです。これは、印刷・出版などのデザインやレイアウト作業で、実際の文章を入れる前に、仮の文章として使用されます。意味のある文章ではありませんが、文章の流れや見た目を確認するために、しばしば使用されます。上記の文章は、ロレム・イプサムの一種で、200文字の長さで、一般的に使用される日本語版ロレム・イプサムの例文です。

//フォントサイズ+10px
.lh-season{
 line-height: calc(1em + #{10 / $font-size-root-num}rem);
}

Reset color

reset link.
Muted text with a reset link.

<p class="text-danger">
 <a href="#" class="text-decoration-underline">reset link</a>.<br>
 Muted text with a <a href="#" class="text-reset text-decoration-underline">reset link</a>.
</p>

Text decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

This link has its hover text decoration

This text has a line underneath it.

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="">This link has its text decoration removed</a>
<a href="#" class="td-hover-underline">This link has its hover text decoration</a>
<a href="#" class="text-decoration-underline">This link has its text decoration removed</a>

Inview

no class data-inview

.inview-up data-inview

.inview-left data-inview

.inview-right data-inview

.inview-blocks data-inview span.char

<h2 class="" data-inview>no class data-inview</h2>
<h2 class="inview-up" data-inview>.inview-up data-inview</h2>
<h2 class="inview-left" data-inview>.inview-left data-inview</h2>
<h2 class="inview-right" data-inview>.inview-right data-inview</h2>
<h2 class="inview-blocks" data-inview><span class="char">.inview-blocks data-inview span.char</span></h2>
<h2 class="inview-lettering" data-inview data-lettering>.inview-lettering data-inview data-lettering</h2>
<h2 class="" data-inview data-shuffle>data-inview data-shuffle</h2><h2 class="" data-taicha data-lettering>お客様とのご縁に、心より感謝。</h2>