calme | espace

header / menu

メインメニューの固定

<body class="fix-menu"><!-- 省略 --></body>

<body>にclass="fix-menu"を設定すると、ページを開いた直後からスクロール時と同じコンパクトなメニューの表示になります

列を分割

<nav id="mainMenu" class="menu">
    <ul class="column-2">
        <li><a href="【URL】">メニュー1</a></li>
        <li><a href="【URL】">メニュー2</a></li>
    </ul>
</nav>

class="menu"内の<ul>に列設定用クラスを設定することで、メニューの列を分割できます。
列設定用クラス

1列設定しない
2列column-2
3列column-3
4列column-4
5列column-5

メニュー背景にスライダー設定

<header>
    <h1><span><a href="top.html">calme</a></span></h1>
    <div id="headerImages">
        <img src="img/layout/topimage-1.jpg" class="active">
        <img src="img/layout/topimage-2.jpg">
    </div>
    <nav id="mainMenu" data-toggler="mainMenuToggler" class="menu">
        <!-- 省略 -->
    </nav>
</header>

<header>直下に<div id="headerImages">を入れる
<div id="headerImages">直下にスライダーに使用したい画像を入れる
1枚目に表示したい画像にclass="active"を設定する
アニメーションを変更したい場合は、<div id="headerImages">に以下のアニメーション設定クラスを設定する

アニメーション設定クラス

fadeフェード
slide-topスライド（上から）
slide-bottomスライド（下から）
slide-leftスライド（左から）
slide-rightスライド（右から）

※fadeは各種スライドクラスと併用可能

下部固定メニュー

<nav class="fixed-menu">
    <ul>
        <li class="prev"><a href="【URL】"></a></li>
        <li class="next"><span></span></li>
        <li id="pageTop" class="pagetop"><button></button></li>
    </ul>
</nav>

<nav class="fixed-menu">～</nav>内に<ul>～</ul>を設定してください
<li>に下部固定ボタンクラスを設定すると、<li>内の<a>または<span>固定ボタンとして表示します
トップへ戻るボタンは上記のままご使用ください

下部固定ボタンクラス

prev前へ
next次へ
homeホーム
toc目次
charactersキャラクター
images画像

コンテンツエリア

DEMOで左右交互に配置されているコンテンツです。

<article>
    <div>
        <p>
            DEMOで左右交互に配置されているコンテンツです。
        </p>
    </div>
</article>

<article>~</article>を増やしたり減らしたりすると、自動で位置と背景色をレイアウトします。

水平位置

デフォルトの水平位置は、<article>が奇数なら右配置、偶数なら左配置です。
classを設定することで、配置の変更が可能です。

<article class="p-center">
    <div>
        <p>
            水平位置
        </p>
    </div>
</article>

水平位置設定用クラスを<article>に設定することで、水平位置を変更できます。
水平位置設定用クラス

左寄せp-left
中央寄せp-center
右寄せp-right

背景色

デフォルトの背景色は、<article>が奇数ならベージュ、偶数ならグリーンです。
classを設定することで、背景色の変更が可能です。

<article class="bg-beige">
    <div>
        <p>
            背景色
        </p>
    </div>
</article>

背景色設定用クラスを<article>に設定することで、背景色を変更できます。
水平位置設定用クラス

ベージュbg-beige
グリーンbg-green
グレーbg-gray

h2 design

h3デザイン

h4デザイン

h5デザイン

<h2><span>h2デザイン</span></h2>
<h3><span>h3デザイン</span></h3>
<h4><span>h4デザイン</span></h4>
<h5><span>h5デザイン</span></h5>

link

リンク

↓画像リンク

<a href="#">リンク</a>
<a href="#" class="img"><img src="画像URL" alt="画像説明"></a>

decoration

<b>要素

<em>要素

<strong>要素

↓<hr>水平線

<b>b要素</b>
<em>em要素</em>
<strong>strong要素</strong>
<hr>

要素内の文字を全て太字にします

要素内の文字を全て小さいサイズにします

要素内の文字を全て大きいサイズにします

<p class="text-bold">要素内の文字を全て太字にします</p>
<p class="text-small">要素内の文字を全て小さいサイズにします</p>
<p class="text-large">要素内の文字を全て大きいサイズにします</p>

文字を左寄せにします

文字を中央寄せにします

文字を右寄せにします

組み合わせも可能です

<p class="text-left">文字を左寄せにします</p>
<p class="text-center">文字を中央寄せにします</p>
<p class="text-right">文字を右寄せにします</p>
<p class="text-bold text-center">組み合わせも可能です</p>

太字にしたい要素にclass="text-bold"を設定すると、要素内の文字をすべて太字にできます
class="text-right"を設定すると、要素内の文字を右寄せにします
class="text-center"を設定すると、要素内の文字を中央寄せにします

枠線ありブロック

<div class="box">
    <p>枠線ありブロック</p>
</div>

枠線を表示したい要素にclass="box"を設定すると、枠線を表示する
文字寄せ等と併用できます

スクロール可能ブロック
2行目
3行目
4行目
5行目

<div class="scrollbox">
    <p>スクロール可能ブロック</p>
</div>

class="scrollbox"を設定すると、高さを制限してスクロールバーを表示する

1行表示ブロックテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="onlyrow">1行表示ブロック</p>

class="onlyrow"を設定すると、1行のみ表示し、超過テキストは「…」で省略表示する

1つめのブロック

2つめのブロック

3つめのブロック

<div class="column column-3 column-sp-2">
    <div>1つめのブロック</div>
    <div>2つめのブロック</div>
    <div>3つめのブロック</div>
</div>

ブロック要素にcolumnと列設定クラス(column-{2~3})を設定すると、子要素を横並びに表示します
スマホ列設定クラス(column-sp-{1~3})で、スマホ表示時の列設定が可能です
設定されていない場合、列設定クラスの設定をスマホ表示時も使用します

list

通常のリスト

リスト
リスト説明など書けます
続きなど

<ul>
    <li>リスト</li>
    <li>リスト<span class="description">説明など書けます</span></li>
    <li class="next">続きなど</li>
</ul>

<li>の中に<span class="description"></span>を入れることで、説明などを書くことができます
<li>にclass="next"を設定すると、マークが「→」になります

リスト（数字）

リスト
リスト説明など書けます

<ol>
    <li>リスト</li>
    <li>リスト<span class="description">説明など書けます</span></li>
</ol>

リスト（小さい）

リスト
リスト
リスト
続きなど
リスト内リンク

<ul class="small">
    <li>リスト</li>
    <li>リスト<span class="description">説明など書けます</span></li>
    <li class="next">続きなど</li>
</ul>

<ul>にclass="small"を設定すると、リストが横並びになり、項目間にマークが入ります
<li>にclass="next"を設定すると、マークが「→」になります

タイトルと説明

タイトル: 内容

<dl>
    <dt>タイトル</dt>
        <dd>内容</dd>
</dl>

タイトルと説明（横並び）

スマホ表示の場合横幅が狭くなるため、縦並びと同じように表示します。

タイトル: 内容
改行OK
タイトル: 内容

<dl class="inline">
    <dt>タイトル</dt>
        <dd>横並びになります</dd>
</dl>

<dl>にclass="inline"を設定すると、<dt>と<dd>が横並びになります

タイトルと説明（枠あり）

タイトル: 線が付きます
タイトル: 線が付きます

タイトル: 横並びにもできます
タイトル: 横並びにもできます

<dl class="border">
    <dt>タイトル</dt>
        <dd>線が付きます</dd>
</dl>
<dl class="border inline">
    <dt>タイトル</dt>
        <dd>横並びにもできます</dd>
</dl>

<dl>にclass="border"を設定すると外枠が付きます
class="inline"との組み合わせも可能です

form

横並びのフォーム

<form class="form-inline">
    <input type="text" placeholder="お名前">
    <input type="text" placeholder="一言">
    <button type="submit">送信</button>
</form>

<form>にclass="form-inline"を設定すると、<form>内の要素が横並びになります

大きなフォーム

<form class="form-block">
    <input type="text" placeholder="お名前">
    <textarea  placeholder="本文"></textarea>
    <button type="submit">送信</button>
</form>

<form>にclass="form-block"を設定すると、<form>内の要素がフォームエリア幅一杯に広がります

大きなフォーム（項目名あり）

<form class="form-block">
    <dl class="inline">
        <dt>name</dt>
            <dd><input type="text" placeholder="お名前"></dd>
        <dt class="required">message</dt>
            <dd><textarea  placeholder="本文"></textarea></dd>
    </dl>
    <button type="submit">送信</button>
</form>

横並びのフォームと大きなフォームを組み合わせると、項目名とフォーム要素を横並びにできます
<dt>にclass="required"を設定すると必須マークが付きます