Sample
サイトタイトル
サイトタイトルを日本語表記にした場合、文字サイズが気になる方は、サイトのタイトルが入る箇所に「jp」を追加してください。文字サイズが調整されます。
▼headerにあるタイトル
<div><a href="./top.html" class="sitename jp">Site Name</a></div>
▼footerにあるタイトル
<div><a href="./top.html" class="footer__sitename jp">Site Name</a></div>
▼トップページ
<h1 class="toptitle jp">Site Name</h1>
メニュー
メニューを日本語表記にした場合、文字サイズが気になる方は、メニューリンクのclassに「jp」を追加してください。文字サイズが調整されます。
▼サイト横のメニュー
<li class="menu__item"><a href="URL" class="menu__link jp">ページ名</a></li>
▼footer
<li class="footermenu__item"><a href="URL" class="footermenu__link jp">ページ名</a></li>
SectionとBox
ページタイトル
下記でページの上部タイトルが表示できます。ページのタイトル文字を日本語にしたときに大きいと感じる場合は、「jp」を付けると調整できます。
<section class="pagetitle">
<h1 class="pagetitle__title">こちらにタイトルを記載</h1>
</section>
▼日本語調整
<section class="pagetitle">
<h1 class="pagetitle__title jp">こちらにタイトルを記載</h1>
</section>
通常のセクション
ページ内の内容は、下記のセクションで区切りをつけます。セクションには、前後に大きめの余白が入ります。コンテンツの横幅は、このセクションのinnerボックスが調整しているので、innerを忘れないように入れてください。
<section class="section">
<div class="section__inner">
//ここに内容を入れます。
</div>
</section>
ワイドセクション
通常のセクションより幅が広いセクションを入れたい場合は、下記の2パターンで幅広のセクションを追加できます。
上下に余白が入るワイドセクション
通常のセクションと同じように使用しますが、innerがないパターンで、幅いっぱい使えるセクションです。通常のセクションの代わりに使用してください。
このテンプレートでは、「Gallery」の注釈で使用しているので参考にしてください。
<section class="widesection">
//ここに内容を入れます。
</section>
通常セクション内で一部だけワイドにする
通常セクションの中に入れて、一部だけを幅広にする場合は、section__wideを使ってください。※通常セクションのinner内に入れて使用します。
このテンプレートでは、「Novel」の記事ページ、記事情報と小説タイトル部分で使用しているので参考にしてください。
<section class="section">
<div class="section__inner"> <!-- 通常セクションインナー -->
<div class="section__wide"> <!-- 通常セクションインナーの中に入れる -->
//ここに内容を入れます。
</div>
</div>
</section>
ボックス
セクションの中にボックスをいれると、ボックスの上下左右に余白ができます。
このボックス内でテキストなどを<p></p>で囲むと、下にスペースが入るようになります。
<div class="box">
//ここに内容を入れます。
</div>
背景があるボックス
背景があるボックスです。
このボックス内でテキストなどを<p></p>で囲むと、下にスペースが入るようになります。
▼通常
<div class="backbox">
//ここに内容を入れます。
</div>
▼背景色を変える場合
<div class="backbox color">
//ここに内容を入れます。
</div>
背景の色を変えたい場合は、color部分で色を指定できます。
通常
何も指定しない場合の色です。
main
main と記入した場合
<div class="backbox main">
second
second と記入した場合
<div class="backbox second">
primary
primary と記入した場合
<div class="backbox primary">
accent
accent と記入した場合
<div class="backbox accent">
見出し
見出しは、h2、h3でそれぞれ指定します。class部分の表記で切り替えます。
<h2 class="ここの表記">ここに見出しタイトル</h2>
<h3 class="ここの表記">ここに見出しタイトル</h3>
<h2 class="lineh2">
※lineh2は、日本語のとき文字が大きいと感じる場合「jp」を入れると文字サイズが調整できます。
<h2 class="circleh2">
※circleh2は、英語のとき文字が小さいと感じる場合「en」を入れると文字サイズが調整できます。
<h3 class="circleh3">
<h3 class="normalh3">
装飾
リンク
class部分の表記を変更して、リンクを変更できます。
<a href="URL" class="ここを変更">リンクテキスト</a>
<a href="URL"> 通常のリンク
<a href="URL" class="btnlink"> ボタン型のリンク
<a href="URL" class="outlinebtn"> ボタン型のリンク
<a href="URL" class="textlink"> テキスト型のリンク
テキスト
class部分の表記を変更して、文字を装飾できます。
<p class="ここに記入">文章全体を変更する。</p>
<p><span class="ここに記入">部分的な変更</span>をする。</p>
<span class="strong">で文字を太文字に変更
<span class="maincolor">でメインの文字色に変更
<span class="secondcolor">でセカンド文字色に変更
<span class="primarycolor">でプライマリー文字色に変更
<span class="accentcolor">でアクセント文字色に変更
<span class="maker01">でマーカーをつける。
<span class="maker02">でマーカーをつける。
<span class="maker03">でマーカーをつける。
<span class="maker04">でマーカーをつける。
<span class="halfmaker01">で半分のマーカーをつける。
<span class="halfmaker02">で半分のマーカーをつける。
<span class="halfmaker03">で半分のマーカーをつける。
<span class="halfmaker04">で半分のマーカーをつける。
<p class="fontsands">でフォントをサンセリフに変更。
<p class="fontcursive">でフォントをカーシブに変更。※英語のみ変更されます。
Cursive Fontの見本はこちら
<p class="textright">で文字が右に寄せられます。※spanでは無効
<p class="textcenter">で文字が中央に寄せられます。※spanでは無効
<p class="fontmedium">でフォントサイズを中くらいに変更
<p class="fontlarge">でフォントサイズを大に変更
<p class="fontx-large">でフォントサイズをさらに大に変更
Form
入力フォームは、class="form"で囲った中にいれると、サイズ調整が入ります。<label>を使用すると、フォームにラベルが付きます。
横並び
コンテンツを横並びにするには、<div class="flexbox">か<div class="gridbox">を使います。
flexbox
<div class="flexbox">
<div>ここに内容</div>
<div>ここに内容</div>
</div>
※画像をいれると強制的にサイズがリサイズされます。
※<div class="flexbox flex-center">にすると、テキストやコンテンツが縦向きの中央に寄ります。
gridbox
<div class="gridbox">
<div>ここに内容</div>
<div>ここに内容</div>
</div>
※<div class="gridbox grid-center">にすると、テキストやコンテンツが縦向きの中央に寄ります。