framework
,abisu
,css
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<title>ダミー</title>
<meta name="description" content="ダミー">
<meta name="keywords" content="ダミー">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/abisu.css">
<link rel="stylesheet" href="./css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script src="./js/heightline.js"></script>
<script src="./js/common.js"></script>
</head>
<body>
<div class="wrapper index">
<header class="header">
<nav class="gnav"></nav>
</header>
<main class="main">
<section class="content01">
<div class="inner">
<h2 class="ttl">見出し1</h2>
<div class="txt">テキスト</div>
</div>
</section>
<section class="content02">
<div class="inner">
<h2 class="ttl">見出し2</h2>
<div class="txt">テキスト</div>
<div class="img"><img src=""></div>
</div>
</section>
</main>
<footer class="footer"></footer>
</div>
</body>
</html>
list-content01、ttl-cmn02など
<section class="content01 up-my-100">
<div class="inner">
<h2 class="ttl-cmn02 up-fz-30 up-fw-bold">見出し2</h2>
<div class="img up-ofi-40"><img src=""></div>
<div class="txt up-ta-c">テキスト</div>
<ul class="list list-content01">
<li class="item">リスト</li>
<li class="item">リスト</li>
<li class="item">リスト</li>
</ul>
<div class="btn up-mt-50"><a href="#">ボタン</a></div>
</div>
</section>
content01、ttl-cmn02など
<section class="content01 up-my-100">
<div class="inner">
<h2 class="ttl-cmn02 up-fz-30 up-fw-bold">見出し2</h2>
<div class="img up-ofi-40"><img src=""></div>
<div class="txt up-ta-c">テキスト</div>
<ul class="list list-content01">
<li class="item">リスト</li>
<li class="item">リスト</li>
<li class="item">リスト</li>
</ul>
<div class="btn up-mt-50"><a href="#">ボタン</a></div>
</div>
</section>
サイト内で共通して使われている要素には「cmn」を付けたクラス名を付与する
<h2 class="ttl ttl-cmn01">見出し1</h2>
<ul class="list list-cmn01">
<li class="item">リスト</li>
<li class="item">リスト</li>
<li class="item">リスト</li>
</ul>
<div class="btn btn-cmn02"><a href="#">ボタン2</a></div>
<section class="content01 up-my-100">
<div class="inner">
<h2 class="ttl up-fz-30 up-fw-bold">見出し2</h2>
<div class="img up-ofi-40"><img src=""></div>
<div class="txt up-ta-c">テキスト</div>
<div class="btn up-mt-50"><a href="#">ボタン</a></div>
</div>
</section>
<section class="content02 up-my-100">
<div class="inner">
<h2 class="ttl01 up-fz-30 up-fw-bold">見出し2</h2>
<div class="img up-ofi-40"><img src=""></div>
<div class="txt01 up-ta-c">テキスト</div>
<div class="box">
<h3 class="ttl02 up-fz-20 up-mb-20">見出し3</h3>
<div class="txt02">テキスト</div>
</div>
<div class="btn up-mt-50"><a href="#">ボタン</a></div>
</div>
</section>
.content01 .ttl {
}
.content01 .img {
}
.content02 .ttl01 {
}
.content02 .txt02 {
}
レイアウト display (d) Class Properties .up-d-block display: block; .up-d-iblock
Mar 31, 2021注意事項 A-BiSUフレームワーク バグ情報 新機能のお知らせ 求人機能について
Dec 28, 2020はじめに A-BiSUに作った求人ページの情報をgoogleしごと検索、indeedへ登録・掲載するための機能です。 googleしごと検索 求人ページ内にある求人内容をheadタグ内に「構造化データ」として追加すると、googleのクローラーが読み取って掲載されます。 indeed 別途クライアントごとにindeedのアカウントを開設するなどの手続きをおこない、 求人ページに必要な情報、応募ページへのリンクボタンなどを掲載すると、indeedのクローラーが読み取って掲載されます。
Dec 28, 2020fead系 $(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, 2020or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up