tags: `framework`,`abisu`,`css`

HTML構造/クラス命名規則

HTML構造

基本的なHTML構造














































<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">見出し１</h2>
          <div class="txt">テキスト</div>
        </div>
      </section>

      <section class="content02">
        <div class="inner">
          <h2 class="ttl">見出し２</h2>
          <div class="txt">テキスト</div>
          <div class="img"><img src=""></div>
        </div>
      </section>
    </main>

    <footer class="footer"></footer>
  </div>
</body>
</html>

スタイルはすべてstyle.cssに記述する
base.cssの書き換え、上書きはしない
fontawesomeはv5.14を使用し、A-BiSUに取り込み後はファイルごと削除する。
A-BiSUにはデフォルトでfontawesome5.14が入っているので、取り込み後はこれを使用する。(v5のA-BiSUに限る)
コンテンツのまとまり毎にセクションタグ<section>を使用。
ただしセクションタグ内に必ず一つ見出しタグ<h>が存在していなければいけない。
見出しがなければ、<div>で囲ってもよい。
wrapperには各ページ固有のクラス名を付ける
- トップページ　→　wrapper index
- ブログ一覧ページ　→　wrapper blog
- ブログ詳細ページ　→　wrapper blogdtl

クラス命名規則

単語間はハイフン「-」でつなぐ

list-content01、ttl-cmn02など













<section class="content01 up-my-100">
  <div class="inner">
    <h2 class="ttl-cmn02 up-fz-30 up-fw-bold">見出し２</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">見出し２</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」をつける

サイト内で共通して使われている要素には「cmn」を付けたクラス名を付与する







<h2 class="ttl ttl-cmn01">見出し１</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="#">ボタン２</a></div>

サイトの見た目は基本、base.cssにある"up-"などのクラスを使って整えていってもらうが、サイト全体で使われている要素に関してはメンテナンス性を高めるために、スタイルシートにスタイルを書く。

タグに固有クラス名を付ける

原則すべてのタグに、基本クラス（up-）とは別に、そのタグの内容に近い固有のクラス名を先頭に付ける（img,aタグを除く）。
コンテンツの塊（<section>など）内で固有クラス名がかぶらなければいい。





















<section class="content01 up-my-100">
  <div class="inner">
    <h2 class="ttl up-fz-30 up-fw-bold">見出し２</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">見出し２</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">見出し３</h3>
      <div class="txt02">テキスト</div>
    </div>
    <div class="btn up-mt-50"><a href="#">ボタン</a></div>
  </div>
</section>

スタイルの記述は、タグに紐づけて書かず、この固有クラスに紐づけて記述する
コンテンツの塊（<section>など）から紐づけて、できる限り階層は２階層までで収める

.content01 .ttl {
}
.content01 .img {
}

.content02 .ttl01 {
}
.content02 .txt02 {
}

tags: framework,abisu,css

HTML構造/クラス命名規則

HTML構造

基本的なHTML構造

クラス命名規則

単語間はハイフン「-」でつなぐ

連番

サイト全体で使われている要素には「cmn」をつける

タグに固有クラス名を付ける

Read more

基本クラス

A-BiSUドキュメント

求人機能について

基本JS

tags: `framework`,`abisu`,`css`