トップ
>
記事一覧
>
AISフレームワークの使い ...

AISフレームワークの使い方(6/25更新)

著者 ai 最終更新 2023/6/3

CSSフレームワークとは

すごーく簡単にいうと"Webページのパーツ集"みたいなもので、Webサイト制作の効率化が図れるツールとしてよく使われています。citrusjapan.co.jpより

AISフレームワークの概要

今のところ数種類のボタンや、アンダーラインなどのデザインを実装しています

導入方法

以下のページから、自身のhtmlファイルに導入してください

ダウンロードページ

ボタン1-1

box1-1

※アイコン画像は正方形のものしか使えません。

<a href="" class="ais-box1-1">
    <img class="ais-box1-1-img" src="アイコン画像/sample.png">
    <p>タイトル<p>
</a>

ボタン2-1

box2-1

※サムネイル画像はどんなサイズ、比率でも正しく表示されます。

<a href="" class="ais-box2-1">
    <div class="ais-box-2-contents">
        <section class="ais-box2-1-img_area">
            <img src="/サムネイル画像/sample.jpg" class="ais-box2-1-img">
        </section>
        <section class="ais-box2-1-text_area">
            <p>タイトル</p>
        </section>
    </div>
</a>

ボタン2-2

box2-2

※サムネイル画像はどんなサイズ、比率でも正しく表示されます。

<a href="" class="ais-box2-2">
    <div class="ais-box-2-2-contents">
        <section class="ais-box2-2-img_area">
            <img src="/サムネイル画像/sample.jpg" class="ais-box2-2-img">
        </section>
        <section class="ais-box2-2-text_area">
            <p>タイトル</p>
        </section>
    </div>
</a>

ボタン3-1

box3-1

<a href="" class="ais-box3-1">
    <p>タイトル</p>
</a>

横のサイズや文字揃えを変更したい場合は以下をどこかしらのCSS二追加してください。

（htmlに style="" を使って直接書いたほうが楽かも）

.ais-box3-1{
width: 任意の値; /*文字サイズに合わせるなら fit-content ,ais-box2-1に合わせるなら 456px*/
text-align: 任意の値;
}

コードボックス

<div class="ais-source-box1">
    <pre class="ais-source-box1-code">
ソースコード
    </pre>
</div>

フォントを本文用とは別で、設定するのを推奨します。

.ais-source-box1-code
{
font-family: '任意のフォント';
}

インライン表示

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

<span class="ais-inline1">コード</span>

フォントを本文用とは別で、設定するのを推奨します。

.ais-inline1
{
font-family: '任意のフォント';
}

アンダーライン

緑色アンダーライン

<p><span class="ais-underlnGREN">本文</span></p>

黄色アンダーライン

<p><span class="ais-underlnYELW">本文</span></p>

赤色アンダーライン

<p><span class="ais-underlnPINK">本文</span></p>

ピンクアンダーライン

<p><span class="ais-underlnPINK">本文</span></p>

黒色アンダーライン

<p><span class="ais-underlnDARK">本文</span></p>

アンダーライン ais-underln###

最終更新 2023 6/25