Sample
サイトタイトル
サイトタイトルを日本語表記にした場合、文字サイズが気になる方は、サイトのタイトルが入る箇所に「jp」を追加してください。文字サイズが調整されます。
▼headerにあるタイトル
<div><a href="./top.html" class="sitename jp">サイト名</a></div>
▼トップページ
<h1 class="toptitle__title jp">サイト名</h1>
<div class="toptitle__catch en">This Site Name</div>
※キャッチコピーの方を英語にしたい場合は、enと付けると少し大きくなります。
SectionとBox
ページタイトル
下記でページの上部タイトルが表示できます。
<section class="pagetitle">
<h1 class="pagetitle__title">こちらにタイトルを記載</h1>
</section>
セクション
ページ内の内容は、下記のセクションで区切りをつけます。セクションには、前後に大きめの余白が入ります。
<section class="section">
//ここに内容を入れます。
</section>
ボックス
セクションの中にボックスをいれると、ボックスの上下左右に余白ができます。
このボックス内でテキストなどを<p></p>で囲むと、下にスペースが入るようになります。
<div class="box">
//ここに内容を入れます。
</div>
背景があるボックス
背景があるボックスです。
このボックス内でテキストなどを<p></p>で囲むと、下にスペースが入るようになります。
▼通常
<div class="backbox">
//ここに内容を入れます。
</div>
▼背景色を変える場合
<div class="backbox color">
//ここに内容を入れます。
</div>
背景の色を変えたい場合は、color部分で色を指定できます。
通常
何も指定しない場合の色です。
accent
accent と記入した場合
<div class="backbox accent">
primary
primary と記入した場合
<div class="backbox primary">
背景がストライプのボックス
背景がストライプになります。
このボックス内でテキストなどを<p></p>で囲むと、下にスペースが入るようになります。
▼通常
<div class="stripebox">
//ここに内容を入れます。
</div>
▼背景色を変える場合
<div class="stripebox color">
//ここに内容を入れます。
</div>
背景の色を変えたい場合は、color部分で色を指定できます。
通常
何も指定しない場合の色です。
accent
accent と記入した場合
<div class="stripebox accent">
primary
primary と記入した場合
<div class="stripebox white">
見出し
見出しは、h2、h3でそれぞれ指定します。class部分の表記で切り替えます。
<h2 class="ここの表記">ここに見出しタイトル</h2>
<h3 class="ここの表記">ここに見出しタイトル</h3>
<h2 class="squareh2">
<h2 class="stripeh2">
<h3 class="circleh3">
<h3 class="squareh3">
装飾
リンク
class部分の表記を変更して、リンクを変更できます。
<a href="URL" class="ここを変更">リンクテキスト</a>
<a href="URL"> 通常のリンク
<a href="URL" class="btnlink"> ボタン型のリンク
<a href="URL" class="textlink"> テキスト型のリンク
テキスト
class部分の表記を変更して、文字を装飾できます。
<p class="ここに記入">文章全体を変更する。</p>
<p><span class="ここに記入">部分的な変更</span>をする。</p>
<span class="strong">で文字を太文字に変更
<span class="colortext">でメインの文字色に変更
<span class="coloraccent">でアクセント文字色に変更
<span class="maker01">でマーカーをつける。
<span class="maker02">でマーカーをつける。
<span class="maker03">でマーカーをつける。
<span class="halfmaker01">で半分のマーカーをつける。
<span class="halfmaker02">で半分のマーカーをつける。
<span class="halfmaker03">で半分のマーカーをつける。
<p class="fontsands">でフォントをサンセリフに変更。
<p class="fontscript">でフォントをスクリプトに変更。※英語のみ変更されます。
Script 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">にすると、テキストやコンテンツが縦向きの中央に寄ります。