関包スチール株式会社

関包スチールホールディングス株式会社
お問い合わせ

template テンプレート 基本のスニペット

基本のスニペット

ベースになるセレクタのスニペット集
あくまでも参考で作っているだけなので、基本的にはclassをコピーして使用するのではなく、mixinを使用して個別に作ってね。

フォント

英数字のフォント

読み込んでるフォントの種類は「assets/include/view/asset_head_css.php」を確認してください。

Roboto ABCDEFGHIJKLMNOPQRSTUVWXYZ

リンク

<a> テキスト内

ダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキスト

<a> アロー付き
<a> ファイル

リスト

<ul> デコレーション無し
  • あいうえおあいうえお
    あいうえお
  • かきくけこ
  • さしすせそ
<ul> デコレーション有り ポイントカラー
  • あいうえおあいうえお
    あいうえお
  • かきくけこ
  • さしすせそ
<ul> デコレーション有り 色なし
  • あいうえお
  • かきくけこ
<ul> 入れ子
  • あいうえおあいうえお
    あいうえお
    • かきくけこ
    • さしすせそ
  • あいうえおあいうえお
    あいうえお
    • あいうえお
    • かきくけこ
  • あいうえおあいうえお
    あいうえお
    • あいうえお
    • かきくけこ
<ol> 通常
  1. あいうえおあいうえお
    あいうえお
  2. かきくけこ
  3. さしすせそ
<ol> 2桁調整
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
  4. たちつてと
  5. なにぬねの
  6. はひふへほ
  7. まみむめも
  8. やゆよ
  9. らりるれろ
  10. わおん
<ol> 括弧
  1. あいうえおあいうえお
    あいうえお
  2. かきくけこ
  3. さしすせそ
<ol> 英語
  1. あいうえおあいうえお
    あいうえお
  2. かきくけこ
  3. さしすせそ
<ol> デコレーション無し
  1. あいうえおあいうえお
    あいうえお
  2. かきくけこ
  3. さしすせそ
<ol> 入れ子
  1. あいうえお
    1. かきくけこ
    2. かきくけこ
      1. さしすせそ
      2. さしすせそ
      3. さしすせそ
    3. かきくけこ
  2. あいうえお
    1. かきくけこ
    2. かきくけこ
      1. さしすせそ
      2. さしすせそ
      3. さしすせそ
    3. かきくけこ
  3. あいうえお

スマホ時にスワイプ（画像やtableなどで使用）

画像やtableなどで使用
sample

Flex-box (justify-content)の3列汎用mixin

3つ
4つ
5つ

Flex-box (justify-content)の4列汎用mixin

4つ
5つ
6つ
7つ