Try   HackMD
tags: framework,abisu,css

基本クラス

レイアウト

display (d)

Class Properties
.up-d-block display: block;
.up-d-iblock display: inline-block;
.up-d-flex display: flex;
.up-d-none display: none;

box-sizing (bz)

Class Properties
.up-bz-content box-sizing: content-box;

clear

Class Properties
.up-clear clear: both;
.up-clearfix display: block;
.up-clearfix:before content: "";
display: block;
clear: both;
.up-clearfix:after content: "";
display: block;
clear: both;

overflow (over)

Class Properties
.up-over-hidden overflow: hidden;

position (pos)

Class Properties
.up-pos-rel position: relative;
.up-pos-abs position: absolute;
.up-pos-fix position: fixed;

z-index (z)

-5~5 (1刻み)

Class Properties
.up-z-n5 z-index: -5;
..
.up-z-5 z-index: 5;


色

color (c)

Class Properties
.up-c-red color: red;
.up-c-blue color: blue;
.up-c-yellow color: yellow;
.up-c-gray color: gray;
.up-c-black color: black;
.up-c-white color: white;

background-color (bgc)

Class Properties
.up-bgc-red background-color: red;
.up-bgc-blue background-color: blue;
.up-bgc-yellow background-color: yellow;
.up-bgc-gray background-color: gray;
.up-bgc-black background-color: black;
.up-bgc-white background-color: white;


テキスト

font-family(ff)

Class Properties
.up-ff-gothic font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
.up-ff-mincho font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
.up-ff-meiryo font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

font-style (fs)

Class Properties
.up-fs-italic font-style: italic;

text-align (ta)

Class Properties
.up-ta-l text-align: left;
.up-ta-c text-align: center;
.up-ta-r text-align: right;

text-decoration (td)

Class Properties
.up-td-under text-decoration: underline;

list-style-type (lst)

Class Properties
.up-lst-disc list-style-type: disc;
.up-lst-deci list-style-type: decimal;

list-style-position (lsp)

Class Properties
.up-lsp-in list-style-position: inside;
.up-lsp-out list-style-position: outside;

font-weight (fw)

Class Properties
.up-fw-lighter font-weight: lighter;
.up-fw-normal font-weight: normal;
.up-fw-bold font-weight: bold;

font-size (fz)

px

10px~20px (1px刻み)
Class Properties
.up-fz-10 font-size: 10px;
.up-fz-11 font-size: 11px;
..
.up-fz-19 font-size: 19px;
.up-fz-20 font-size: 20px;
22px~70px (2px刻み)
Class Properties
.up-fz-22 font-size: 22px;
.up-fz-24 font-size: 24px;
..
.up-fz-68 font-size: 68px;
.up-fz-70 font-size: 70px;
80px~300px (20px刻み)
Class Properties
.up-fz-80 font-size: 80px;
.up-fz-100 font-size: 100px;
..
.up-fz-280 font-size: 280px;
.up-fz-300 font-size: 300px;

vw

1vw~3vw (0.1刻み)
Class Properties
.up-fz-1vw font-size: 1vw;
.up-fz-1.1vw font-size: 1.1vw;
..
.up-fz-2.9vw font-size: 2.9vw;
.up-fz-3vw font-size: 3vw;

line-height (lh)

1~3 (0.1刻み)
Class Properties
.up-lh-1 line-height: 1;
.up-lh-1.1 line-height: 1.1;
…
.up-lh-2.9 line-height: 2.9;
.up-lh-3 line-height: 3;

cursor (cur)

Class Properties
.up-cur-pointer cursor: pointer;

br

改行の有無

Class Properties
.up-br br display: inline;
.up-br-none br display: none;


フレックス

Class Properties
.up-d-flex display: flex;

flex-wrap (fxw)

Class Properties
.up-fxw-wrap flex-wrap: wrap;
.up-fxw-wrapr flex-wrap: wrap-reverse;
.up-fxw-nowrap flex-wrap: nowrap;

flex-direction (fxd)

Class Properties
.up-fxd-row flex-direction: row;
.up-fxd-rowr flex-direction: row-reverse;
.up-fxd-col flex-direction: column;
.up-fxd-colr flex-direction: column-reverse;

偶数と奇数番目で左右反転

Class Properties
.up-fxd-even > *:nth-child(even) flex-direction: row-reverse;
.up-fxd-odd > *:nth-child(odd) flex-direction: row-reverse;

justify-content (jc)

Class Properties
.up-jc-fs justify-content: flex-start;
.up-jc-fe justify-content: flex-end;
.up-jc-c justify-content: center;
.up-jc-sb justify-content: space-between;
.up-jc-sa justify-content: space-around;
.up-jc-se justify-content: space-evenly;

align-items (ai)

Class Properties
.up-ai-fs align-items: flex-start;
.up-ai-fe align-items: flex-end;
.up-ai-c align-items: center;
.up-ai-b align-items: baseline;
.up-ai-s align-items: stretch;

align-content (ac)

Class Properties
.up-ac-fs align-content: flex-start;
.up-ac-fe align-content: flex-end;
.up-ac-c align-content: center;
.up-ac-sb align-content: space-between;
.up-ac-sa align-content: space-around;

align-self (as)

Class Properties
.up-as-fs align-self: flex-start;
.up-as-fe align-self: flex-end;
.up-as-c align-self: center;
.up-as-s align-self: stretch;
.up-as-auto align-self: auto;

grow (fxg), shirnk (fxsh)

Class Properties
.up-fxg-0 flex-grow: 0;
.up-fxg-1 flex-grow: 1;
.up-fxsh-0 flex-shrink: 0;
.up-fxsh-1 flex-shrink: 1;


サイズ

width (w)

Class Properties
up-w-auto width: auto;

px

0~10px (1px刻み)
Class Properties
up-w-0 width: 0;
up-w-1 width: 1px;
..
up-w-9 width: 9px;
up-w-10 width: 10px;
20~300px (10px刻み)
Class Properties
up-w-20 width: 20px;
up-w-30 width: 30px;
..
up-w-290 width: 290px;
up-w-300 width: 300px;
350~1000px (50px刻み)
Class Properties
up-w-350 width: 350px;
up-w-400 width: 400px;
..
up-w-950 width: 950px;
up-w-1000 width: 1000px;

%

Class Properties
up-w-48% width: 48%;
5~100% (5%刻み)
Class Properties
up-w-5% width: 5%;
up-w-10% width: 10%;
..
up-w-95% width: 95%;
up-w-100% width: 100%;

min-width (minw)

px

0~10px (1px刻み)
Class Properties
up-minw-0 min-width: 0;
up-minw-1 min-width: 1px;
..
up-minw-9 min-width: 9px;
up-minw-10 min-width: 10px;
20~300px (10px刻み)
Class Properties
up-minw-20 min-width: 20px;
up-minw-30 min-width: 30px;
..
up-minw-290 min-width: 290px;
up-minw-300 min-width: 300px;
350~1000px (50px刻み)
Class Properties
up-minw-350 min-width: 350px;
up-minw-400 min-width: 400px;
..
up-minw-950 min-width: 950px;
up-minw-1000 min-width: 1000px;

%

Class Properties
up-minw-48% min-width: 48%;
5~100% (5%刻み)
Class Properties
up-minw-5% min-width: 5%;
up-minw-10% min-width: 10%;
..
up-minw-95% min-width: 95%;
up-minw-100% min-width: 100%;

max-width (maxw)

px

0~10px (1px刻み)
Class Properties
up-maxw-0 max-width: 0;
up-maxw-1 max-width: 1px;
..
up-maxw-9 max-width: 9px;
up-maxw-10 max-width: 10px;
20~300px (10px刻み)
Class Properties
up-maxw-20 max-width: 20px;
up-maxw-30 max-width: 30px;
..
up-maxw-290 max-width: 290px;
up-maxw-300 max-width: 300px;
350~1000px (50px刻み)
Class Properties
up-maxw-350 max-width: 350px;
up-maxw-400 max-width: 400px;
..
up-maxw-950 max-width: 950px;
up-maxw-1000 max-width: 1000px;

%

Class Properties
up-maxw-48% max-width: 48%;
5~100% (5%刻み)
Class Properties
up-maxw-5% max-width: 5%;
up-maxw-10% max-width: 10%;
..
up-maxw-95% max-width: 95%;
up-maxw-100% max-width: 100%;

height (h)

Class Properties
up-h-auto height: auto;
up-h-auto-i height: auto !important;

px

0~10px (1px刻み)
Class Properties
up-h-0 height: 0;
up-h-1 height: 1px;
..
up-h-9 height: 9px;
up-h-10 height: 10px;
10~300px (10px刻み)
Class Properties
up-h-10 height: 10px;
up-h-20 height: 20px;
..
up-h-290 height: 290px;
up-h-300 height: 300px;
300~1000px (50px刻み)
Class Properties
up-h-350 height: 350px;
up-h-400 height: 400px;
..
up-h-950 height: 950px;
up-h-1000 height: 1000px;

%

Class Properties
up-h-48% height: 48%;
5~100% (5%刻み)
Class Properties
up-h-5% height: 5%;
up-h-10% height: 10%;
..
up-h-95% height: 95%;
up-h-100% height: 100%;

min-height (minh)

px

0~10px (1px刻み)
Class Properties
up-minh-0 min-height: 0;
up-minh-1 min-height: 1px;
..
up-minh-9 min-height: 9px;
up-minh-10 min-height: 10px;
10~300px (10px刻み)
Class Properties
up-minh-10 min-height: 10px;
up-minh-20 min-height: 20px;
..
up-minh-290 min-height: 290px;
up-minh-300 min-height: 300px;
300~1000px (50px刻み)
Class Properties
up-minh-350 min-height: 350px;
up-minh-400 min-height: 400px;
..
up-minh-950 min-height: 950px;
up-minh-1000 min-height: 1000px;

%

Class Properties
up-minh-48% min-height: 48%;
5~100% (5%刻み)
Class Properties
up-minh-5% min-height: 5%;
up-minh-10% min-height: 10%;
..
up-minh-95% min-height: 95%;
up-minh-100% min-height: 100%;

max-height (maxh)

px

0~10px (1px刻み)
Class Properties
up-maxh-0 max-height: 0;
up-maxh-1 max-height: 1px;
..
up-maxh-9 max-height: 9px;
up-maxh-10 max-height: 10px;
10~300px (10px刻み)
Class Properties
up-maxh-10 max-height: 10px;
up-maxh-20 max-height: 20px;
..
up-maxh-290 max-height: 290px;
up-maxh-300 max-height: 300px;
300~1000px (50px刻み)
Class Properties
up-maxh-350 max-height: 350px;
up-maxh-400 max-height: 400px;
..
up-maxh-950 max-height: 950px;
up-maxh-1000 max-height: 1000px;

%

Class Properties
up-maxh-48% max-height: 48%;
5~100% (5%刻み)
Class Properties
up-maxh-5% max-height: 5%;
up-maxh-10% max-height: 10%;
..
up-maxh-95% max-height: 95%;
up-maxh-100% max-height: 100%;


マージン (m)

Class Properties
.up-m-auto margin: auto;
.up-ml-auto margin-left: auto;
.up-mr-auto margin-right: auto;
.up-mx-auto margin-left: auto;
margin-right: auto;

px

0~10px (1px刻み)

Class Properties
.up-m-0 margin: 0;
.up-mx-0 margin-left: 0;
margin-right: 0;
.up-my-0 margin-top: 0;
margin-bottom: 0;
.up-mt-0 margin-top: 0;
.up-mr-0 margin-right: 0;
.up-mb-0 margin-bottom: 0;
.up-ml-0 margin-left: 0;
..
.up-m-10 margin: 10px;
.up-mx-10 margin-left: 10px;
margin-right: 10px;
.up-my-10 margin-top: 10px;
margin-bottom: 10px;
.up-mt-10 margin-top: 10px;
.up-mr-10 margin-right: 10px;
.up-mb-10 margin-bottom: 10px;
.up-ml-10 margin-left: 10px;

15~150px (5px刻み)

Class Properties
.up-m-15 margin: 15px;
.up-mx-15 margin-left: 15px;
margin-right: 15px;
.up-my-15 margin-top: 15px;
margin-bottom: 15px;
.up-mt-15 margin-top: 15px;
.up-mr-15 margin-right: 15px;
.up-mb-15 margin-bottom: 15px;
.up-ml-15 margin-left: 15px;
..
.up-m-150 margin: 150px;
.up-mx-150 margin-left: 150px;
margin-right: 150px;
.up-my-150 margin-top: 150px;
margin-bottom: 150px;
.up-mt-150 margin-top: 150px;
.up-mr-150 margin-right: 150px;
.up-mb-150 margin-bottom: 150px;
.up-ml-150 margin-left: 150px;

%

0.5%~10% (0.5%刻み)

Class Properties
.up-m-0.5% margin: 0.5%;
.up-mx-0.5% margin-left: 0.5%;
margin-right: 0.5%;
.up-my-0.5% margin-top: 0.5%;
margin-bottom: 0.5%;
.up-mt-0.5% margin-top: 0.5%;
.up-mr-0.5% margin-right: 0.5%;
.up-mb-0.5% margin-bottom: 0.5%;
.up-ml-0.5% margin-left: 0.5%;
..
.up-m-10% margin: 10%;
.up-mx-10% margin-left: 10%;
margin-right: 10%;
.up-my-10% margin-top: 10%;
margin-bottom: 10%;
.up-mt-10% margin-top: 10%;
.up-mr-10% margin-right: 10%;
.up-mb-10% margin-bottom: 10%;
.up-ml-10% margin-left: 10%;


パディング (p)

px

0~10px (1px刻み)

Class Properties
.up-p-0 padding: 0;
.up-px-0 padding-left: 0;
padding-right: 0;
.up-py-0 padding-top: 0;
padding-bottom: 0;
.up-pt-0 padding-top: 0;
.up-pr-0 padding-right: 0;
.up-pb-0 padding-bottom: 0;
.up-pl-0 padding-left: 0;
..
.up-p-0 padding: 10px;
.up-px-10 padding-left: 10px;
padding-right: 10px;
.up-py-10 padding-top: 10px;
padding-bottom: 10px;
.up-pt-10 padding-top: 10px;
.up-pr-10 padding-right: 10px;
.up-pb-10 padding-bottom: 10px;
.up-pl-10 padding-left: 10px;

15~150px (5px刻み)

Class Properties
.up-p-15 padding: 15px;
.up-px-15 padding-left: 15px;
padding-right: 15px;
.up-py-15 padding-top: 15px;
padding-bottom: 15px;
.up-pt-15 padding-top: 15px;
.up-pr-15 padding-right: 15px;
.up-pb-15 padding-bottom: 15px;
.up-pl-15 padding-left: 15px;
..
.up-p-150 padding: 150px;
.up-px-150 padding-left: 150px;
padding-right: 150px;
.up-py-150 padding-top: 150px;
padding-bottom: 150px;
.up-pt-150 padding-top: 150px;
.up-pr-150 padding-right: 150px;
.up-pb-150 padding-bottom: 150px;
.up-pl-150 padding-left: 150px;

%

0.5%~10% (0.5%刻み)

Class Properties
.up-p-0.5% padding: 0.5%;
.up-px-0.5% padding-left: 0.5%;
padding-right: 0.5%;
.up-py-0.5% padding-top: 0.5%;
padding-bottom: 0.5%;
.up-pt-0.5% padding-top: 0.5%;
.up-pr-0.5% padding-right: 0.5%;
.up-pb-0.5% padding-bottom: 0.5%;
.up-pl-0.5% padding-left: 0.5%;
..
.up-p-10% padding: 10%;
.up-px-10% padding-left: 10%;
padding-right: 10%;
.up-py-10% padding-top: 10%;
padding-bottom: 10%;
.up-pt-10% padding-top: 10%;
.up-pr-10% padding-right: 10%;
.up-pb-10% padding-bottom: 10%;
.up-pl-10% padding-left: 10%;


カラム

col

並びの数を指定

Class Properties
.up-col-1
.up-col-2
.up-col-3
.up-col-4
.up-col-5
.up-col-6		 display: flex;
flex-wrap: wrap;
.up-col-1 > * width: 100%;
.up-col-2 > * width: 50%;
.up-col-3 > * width: 33.333%;
.up-col-4 > * width: 25%;
.up-col-5 > * width: 20%;
.up-col-6 > * width: 16.666%;

gap

並びの間のスペースを指定
上記のcolと組み合わせ

gapy

縦方向のスペース調整

px
0~100px (10px刻み)
Class Properties
.up-gapy-0 > * margin-bottom: 0;
.up-gapy-10 > * margin-bottom: 10px;
..
.up-gapy-90 > * margin-bottom: 90px;
.up-gapy-100 > * margin-bottom: 100px;
%
1~10% (1%刻み)
Class Properties
.up-gapy-1% > * margin-bottom: 1%;
.up-gapy-2% > * margin-bottom: 2%;
..
.up-gapy-9% > * margin-bottom: 9%;
.up-gapy-10% > * margin-bottom: 10%;

gapx

横方向のスペース調整

px
0~100px (10px刻み)
Class Properties
.up-gapx-0 > * margin-left: 0;
margin-right: 0;
.up-gapx-10 > * margin-left: 2.5px;
margin-right: 2.5px;
..
.up-gapx-90 > * margin-left: 12.5px;
margin-right: 12.5px;
.up-gapx-100 > * margin-left: 15px;
margin-right: 15px;
%
1~10% (1%刻み)
Class Properties
.up-gapx-1% > * margin-left: 0.5%;
margin-right: 0.5%;
.up-gapx-2% > * margin-left: 1%;
margin-right: 1%;
..
.up-gapx-9% > * margin-left: 4.5%;
margin-right: 4.5%;
.up-gapx-10% > * margin-left: 5%;
margin-right: 5%;


オブジェクトフィット

画像アスペクト比固定

Class Properties
[class*="up-ofi"] position: relative;
display: block;
width: 100%;
[class*="up-ofi"]:after content: "";
display: block;
[class*="up-ofi"] img position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: cover;

10~170%まで5%刻み

Class Properties
.up-ofi-10:after padding-top: 10%;
.up-ofi-15:after padding-top: 15%;
..
.up-ofi-165:after padding-top: 165%;
.up-ofi-170:after padding-top: 170%;

object-position

Class Properties
.up-obp-c img object-positon: center;
.up-obp-t img object-positon: top;
.up-obp-r img object-positon: right;
.up-obp-b img object-positon: bottom;
.up-obp-l img object-positon: left;

object-fit

Class Properties
.up-obf-contain img object-fit: contain;


固有クラス

inner

500~1500pxまで100px刻み

Class Properties
.inner500 ~ .inner1500
.inner		 margin: 0 auto;
.inner500 ~ .inner900
.inner		 width: 92%;
.inner1100 ~ .inner1500 width: 98%;
.inner500 max-width: 500px;
.inner600 max-width: 600px;
.inner700 max-width: 700px;
.inner800 max-width: 800px;
.inner900 max-width: 900px;
.inner max-width: 1000px;
.inner1100 max-width: 1100px;
.inner1200 max-width: 1200px;
.inner1300 max-width: 1300px;
.inner1400 max-width: 1400px;
.inner1500 max-width: 1500px;

responsive

@media (max-width: 1024px) {
  .inner,
  .inner500,
  .inner600,
  .inner700,
  .inner800,
  .inner900,
  .inner1100,
  .inner1200,
  .inner1300,
  .inner1400,
  .inner1500 {
    max-width: 768px;
    width: 96%;
  }
}

子要素にあるaタグをブロック化

Class Properties
.up-adb a display: block;

３点リーダー（テキストトリミング）

１行

Class Properties
.up-reader1 overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

２行、３行

Class Properties
.up-reader2 jsで機能
.up-reader3 jsで機能

正円

Class Properties
.up-circle overflow: hidden;
border-radius: 50%;

表示・非表示

編集画面では「SP用項目」などの注書きが表示されます。

Class Properties
.up-show display: block;
.up-hide display: none;


アニメーションクラス

fead

Class Properties
.fead-mv opacity: 0;
transition: 0.5s ease-out;
.fead-up opacity: 0;
transition: 0.5s ease-out;
transform: translateY(50px);
.fead-right opacity: 0;
transition: 0.5s ease-out;
transform: translateX(-20%);
.fead-left opacity: 0;
transition: 0.5s ease-out;
transform: translateX(20%);
.mv opacity: 1;
transform: translate(0, 0);


A-BiSU編集画面でのみ働くクラス

SP時のみ表示される項目に目印をつける

Class Properties
.up-spmark@edit
.up-spmark_edit		 border: solid 1px #000;
.up-spmark@edit:before
.up-spmark_edit:before		 content: "スマホ時のみ表示";
display: block;
position: relative;
z-index: 2;
font-size: 12px;
color: #fff;
background: #000;
Last changed by 
 
社内ドキュメント共有
社内でドキュメントを共有します
1
1275

Read more

A-BiSUドキュメント

注意事項 A-BiSUフレームワーク バグ情報 新機能のお知らせ 求人機能について

Dec 28, 2020
求人機能について

はじめに A-BiSUに作った求人ページの情報をgoogleしごと検索、indeedへ登録・掲載するための機能です。 googleしごと検索 求人ページ内にある求人内容をheadタグ内に「構造化データ」として追加すると、googleのクローラーが読み取って掲載されます。 indeed 別途クライアントごとにindeedのアカウントを開設するなどの手続きをおこない、 求人ページに必要な情報、応募ページへのリンクボタンなどを掲載すると、indeedのクローラーが読み取って掲載されます。

Dec 28, 2020
基本JS

fead系 $(window).on('load scroll', function () { $(".fead-mv, .fead-up, .fead-left, .fead-right").each(function () { var ele = $(this); var pos = ele.offset().top; var scroll = $(window).scrollTop(); if (scroll > pos) { ele.addClass("mv"); } else if (scroll > pos - window.innerHeight) {

Nov 17, 2020
使用方法

ダウンロード https://github.com/up-codes/abisu-css/archive/master.zip 各ファイル説明 太字は必須ファイルです。 html ┣ css ┃ ┣ abisu.css　　編集画面でのみ機能するクラス群 ┃ ┣ base.css　　リセット+「up-」で始まるcssフレームワーク

Nov 17, 2020
Read more from 社内ドキュメント共有
Published on HackMD