AIS v2 CSSフレームワークの使い方

著者 ai 最終更新 2023/7/13

CSSフレームワーク二作目をつくりました。今回はボタンだけでなくWEBページ全体のデザインを簡単に実装できます。現在はヘッダーデザイン2パターン、記事用コンテナー、フッターがデザインされています。

今回からはscssの導入、FLOCSSでの記述で保守性(?)の高い構成になりました。ディレクトリ構成からhtmlまで含めたWEBページ全体のテンプレートもあるのでぜひ参考にしてみてください。

主な機能

今回は "FLOCSSの導入" "ダークモード"　に対応しました。特に何も設定しなくてもキレイにページ全体がダークモードになってくれるようになります。デバイスの設定によって自動的に変わります。

テンプレートサイト

導入方法

以下ページからダウンロードしてください。

ダウンロードページ

リセットCSSを各自最初に読み込んでください。

推奨はdestyle.cssです。

scssディレクトリ構成

v2ではFLOCSSベースのCSS設計になっているのでディレクトリ構成がちょい多くなっています。

FLOCSS構成にしない場合はダウンロードページで style.css のみダウンロードしてください。

┠style.scss
┠─style.map
┠─style.css
┠─foundation
┃  ┠─_base.scss
┃  ┠─_color.scss
┃  ┠─_fonts.scss
┃  ┠─_reset.scss
┠─layout
┃  ┠─_container.scss
┃  ┠─_footer.scss
┃  ┠─_header.scss
┠─object
┃  ┠─component
┃  ┃  ┠─_adjustment.scss
┃  ┃  ┠─_parts.scss
┃  ┃  ┠─_margin.scss
┃  ┠─project

ヘッダーの仕様

ヘッダーデザインは現段階で二種類あります。

l-header__ais-1

<div class="l-header__ais-1>
    <a href="/"><img src="path/to/image.jpg" id="header-logo" class="c-trans" alt="sample.com"></a>
</div>

l-header__ais-2

<div class="l-header__ais-2">
    <section class="l-header__ais-2-logo">
        <a href="/"><img src="path/to/image.jpg" id="header-logo" class="c-trans" alt="sample.com"></a>
    </section>
    <section class="l-header__ais-2-menu">
        <navi>
            <ul>
                <li><b>ABOUT</b></li>
                <li><b>SMPLE</b></li>
            </ul>
        </navi>
    </section>
</div>

記事コンテナー

記事を書く場合は以下のコンテナに入れるとキレイに収まります。

<div class="l-container__article">
    <h1>記事内容</h1>
</div>

各パーツ

現段階ではais-v1の内容のみ実装していますが、htmlのクラス指定が変わっているので一応書いておきます。

ais-box2-1

ボタン2-1

<a href="" class="c-button__ais-2-1">
    <div class="c-button__ais-2-1-contents">
        <section class="c-button__ais-2-1__img-area">
            <img src="path/to/image.jpg">
        </section>
        <section class="c-button__ais-2-1__text-area">
            <p>ボタンタイトル</p>
        </section>
    </div>
</a>

ais-box2-1

ボタン2-2

<a href="" class="c-button__ais-2-2">
    <div class="c-button__ais-2-2-contents">
        <section class="c-button__ais-2-2__img-area">
            <img src="path/to/image.jpg">
        </section>
        <section class="c-button__ais-2-2__text-area">
            <p>ボタンタイトル</p>
        </section>
    </div>
</a>

ais-box3-1

ボタン3-1

<a href="" class="c-button__ais-3-1">
    <p>ボタンタイトル</p>
</a>

コードボックス

<div class="c-codebox__ais-1-1">
    <pre class="c-codebox__ais-1-1__code">
<pre>
ソースコード</pre>
</div>

インライン表示

文章の途中に<h1>コードを入れるのに</h1>便利なインライン表示

<span class="c-inline__ais-1-1">コード</span>