見出し
事業案内ページは、「.title-page」、「.title-a-01」、「.title-b-02」、「.title-c-03」の順で使用する。
事業案内ページ以外は「.title-a-01」、「.title-b-02」、「.title-c-03」の順で使用する。
但しデザインに応じて柔軟に変更することも可。また、「.title-d-XX」や「.title-e-XX」を使用することもできる。
「定期報告」は仕様上、phpテンプレートに「.title-page」が記述されているため、<h4 class="title-a-01">見出し</h4>から開始する。
事業案内ページ ソース例
<h3 class="title-page">耐震診断・改修の相談窓口</h3><h4 class="title-a-01">なぜ住宅の耐震化が必要なの？</h4>
<h5 class="title-b-02">映像</h5>
<h6 class="title-c-03">「耐震診断・耐震改修の心得」</h6>
事業案内ページ以外 ソース例
<h3 class="title-a-01">各部署へのお問い合わせ</h3><h4 class="title-b-02">建築確認検査機構</h4>
<h5 class="title-c-03">本所</h5>
<h6 class="title-d-04">確認・フラット35</h6>
.title-page 事業案内アイコン付き見出し
.title-a-01 見出し見出し見出し
.title-a-02 見出し見出し見出し
.title-a-03 見出し見出し見出し
.title-b-01 見出し見出し見出し
.title-b-02 見出し見出し見出し
.title-b-03 見出し見出し見出し
.title-c-01 見出し見出し見出し
.title-c-02 見出し見出し見出し
.title-c-03 見出し見出し見出し
.title-d-01 見出し見出し見出し
.title-d-02 見出し見出し見出し
.title-d-03 見出し見出し見出し
.title-e-01 見出し見出し見出し
.title-e-02 見出し見出し見出し
.title-e-03 見出し見出し見出し
マーカー
| 種 類 | クラス名 | ソース例 | 備 考 |
|---|---|---|---|
ドット
|
.marker-dot | <p class="marker-dot">ドット</p> <ul class="marker-dot"> <li>ドット（リスト縦）</li> <li>ドット（リスト縦）</li> </ul> <ul class="marker-dot horizontal"> <li>ドット（リスト横）</li> <li>ドット（リスト横）</li> </ul> |
横並びにする場合は「horizontal」を加える 例：class="marker-dot horizontal" |
矢印
|
.marker-arrow | <p class="marker-arrow">矢印</p> <ul class="marker-arrow"> <li>矢印（リスト縦）</li> <li>矢印（リスト縦）</li> </ul> <ul class="marker-arrow horizontal"> <li>矢印（リスト横）</li> <li>矢印（リスト横）</li> </ul> |
横並びにする場合は「horizontal」を加える 例：class="marker-arrow horizontal" |
アスタリスク
|
.marker-asterisk | <p class="marker-asterisk">アスタリスク</p> <ul class="marker-asterisk"> <li>アスタリスク（リスト縦）</li> <li>アスタリスク（リスト縦）</li> </ul> <ul class="marker-asterisk horizontal"> <li>アスタリスク（リスト横）</li> <li>アスタリスク（リスト横）</li> </ul> |
横並びにする場合は「horizontal」を加える 例：class="marker-asterisk horizontal" |
|
ol.marker-number |
<ol class="marker-number"> <li>連番</li> <li>連番</li> <li>連番</li> </ol> |
ulでは無く、olを使用する。 |
|
ol.marker-number-asterisk |
<ol class="marker-number-asterisk"> <li>連番アスタリスク</li> <li>連番アスタリスク</li> <li>連番アスタリスク</li> </ol> |
ulでは無く、olを使用する。 |
書類アイコン、別ウィンドウアイコン
アイコンは自動的に追加されます。
ただし前に追加したい場合はclass="icon-before"を適用してください。
また書類アイコンを追加したくない場合はclass="icon-none"を追加ください。
| 種 類 | クラス名 | ソース例 | 備 考 |
|---|---|---|---|
| <a href="#" >PDF文書</a> | ※クラス指定の必要はありません。自動的に別ウィンドウ指定になります。 | ||
| a.icon-before | <a href="#" class="icon-before">PDF文書</a> | ※前にアイコンを付ける場合 | |
| <a href="#" >Excel文書</a> | ※クラス指定の必要はありません。 | ||
| a.icon-before | <a href="#" class="icon-before">Excel文書</a> | ※前にアイコンを付ける場合 | |
| <a href="#" >Word文書</a> | ※クラス指定の必要はありません。 | ||
| a.icon-before | <a href="#" class="icon-before">Word文書</a> | ※前にアイコンを付ける場合 | |
| <a href="#" >AutoCad</a> | ※クラス指定の必要はありません。 | ||
| a.icon-before | <a href="#" class="icon-before">AutoCad</a> | ※前にアイコンを付ける場合 | |
| <a href="#" >JwCAD</a> | ※クラス指定の必要はありません。 | ||
| a.icon-before | <a href="#" class="icon-before">JwCAD</a> | ※前にアイコンを付ける場合 | |
| <a href="#" target="_blank">別ウィンドウ</a> | ※クラス指定の必要はありません。 | ||
| a.icon-before | <a href="#" target="_blank" class="icon-before">別ウィンドウ</a> | ※前にアイコンを付ける場合 | |
| a.icon-none | <a href="#" target="_blank" class="icon-none">別ウィンドウ</a> |
テーブル
自動的にテーブルのデザインが適用されます。特にクラスを指定する必要はありません。
| テーブル |
|---|
| <table> |
テーブルのソース例
<table><tr>
<th>テーブル</th>
<td>テーブル</td>
</tr>
</table>
テーブルボーダー二重線
ボーダーを二重線にする場合は、該当の<th>、<td>に<border-top-double>、<border-right-double>を適用して下さい。
二重線があるテーブルのソース例
<table><tr>
<th>テーブル</th>
<td class="border-right-double">右が二重線</td>
<td>テーブルテーブルテーブルテーブルテーブルテーブル</td>
</tr>
<tr>
<th class="border-top-double">上が二重線</th>
<td class="border-top-double border-right-double">上が二重線 右が二重線</td>
<td class="border-top-double">上が二重線</td>
</tr>
</table>
| テーブル | <th class="border-right-double"> | テーブルテーブルテーブルテーブルテーブルテーブル |
|---|---|---|
| <td class="border-top-double"> | <td class="border-top-double border-right-double"> | <td class="border-top-double"> |
テーブルにデザインを適用したく無い場合
テーブルのデザインを適用したく無い場合はclass="table-none"を付与してください。
テーブルにデザインを適用したく無い場合のソース
<table class="table-none"><tr>
<th>テーブルにデザインを適用しない</th>
<td>テーブルにデザインを適用しない</td>
</tr>
</table>
| <table class="table-none"> |
| このテーブルは.table-noneが適用されているので枠が見えません |
| このテーブルは.table-noneが適用されているので枠が見えません |
スマートフォンで1カラムにする場合
<th>が左にある2カラムのテーブルの場合は、<table class="sp-table-col1">を追加することにより、スマートフォンサイズで1カラムに変更することができます。
スマートフォンサイズで1カラムのソース例
<table class="sp-table-col1"><tr>
<th>テーブル</th>
<td>テーブルテーブル</td>
</tr>
<tr>
<th>テーブル</th>
<td>テーブルテーブル</td>
</tr>
<tr>
<th>テーブル</th>
<td>テーブルテーブル</td>
</tr>
</table>
| <table> | テーブルテーブルテーブルテーブルテーブルテーブル |
|---|---|
| テーブル | テーブルテーブルテーブルテーブルテーブルテーブル |
| テーブル | テーブルテーブルテーブルテーブルテーブルテーブル |
| <table class="sp-table-col1"> | こちらのテーブルはスマートフォン幅で１カラムになります。 |
|---|---|
| テーブル | こちらのテーブルはスマートフォン幅で１カラムになります。 |
| テーブル | こちらのテーブルはスマートフォン幅で１カラムになります。 |
罫線
<hr>で点線の横罫線を引くことができます。特にクラス指定は必要ありません。
カラムレイアウト用クラス
「.sp-colx-pc-colx」のx箇所にそれぞれスマートフォン、PC用のカラム数を外側の要素に指定してください。
.sp-col1-pc-col2 スマートフォン：1カラム、PC：2カラム
スマートフォン：1カラム、PC：2カラム ソース
<div class="sp-col1-pc-col2"><div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
.sp-col1-pc-col3 スマートフォン：1カラム、PC：3カラム
スマートフォン：1カラム、PC：3カラム ソース
<div class="sp-col1-pc-col3"><div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
.sp-col1-pc-col4 スマートフォン：1カラム、PC：4カラム
スマートフォン：1カラム、PC：4カラム ソース
<div class="sp-col1-pc-col4"><div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
.sp-col2-pc-col2 スマートフォン：2カラム、PC：2カラム
スマートフォン：2カラム、PC：2カラム ソース
<div class="sp-col2-pc-col2"><div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
.sp-col2-pc-col3 スマートフォン：2カラム、PC：3カラム
スマートフォン：2カラム、PC：3カラム ソース
<div class="sp-col2-pc-col3"><div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
.sp-col2-pc-col4 スマートフォン：2カラム、PC：4カラム
スマートフォン：2カラム、PC：4カラム ソース
<div class="sp-col2-pc-col4"><div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
<div>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
枠
ソース例
<div class="frame">枠</div>手順
全体を囲む枠に.flow、各手順要素に.flow-itemクラスを付与してください。
各手順にタイトルを加える場合は見出しタグに.flow-titleを付与してください。
ソース例
<div class="flow"><div class="flow-item">
<h4 class="flow-title">手順タイトル</h4>
<p>テキストテキストテキスト</p>
</div>
<div class="flow-item">
<h4 class="flow-title">手順タイトル</h4>
<p>テキストテキストテキスト</p>
</div>
<div class="flow-item">
<h4 class="flow-title">手順タイトル</h4>
<p>テキストテキストテキスト</p>
</div>
</div>
.flow-title 手順タイトル
テキストテキストテキスト
.flow-title 手順タイトル
テキストテキストテキスト
.flow-title 手順タイトル
テキストテキストテキスト
GoogleMap
iframeのまわりを.google-mapで囲んでください。
ソース例
<div class="google-map"><iframe src="https://www.google.com/maps/d/embed?mid=1pv7lwlP_nEy7vBU7NB-sKTYtLCM&hl=ja" allowfullscreen></iframe>
</div>
汎用クラス（調整用クラス）
基本汎用クラス
スマートフォンにのみ適用する場合は、接頭辞として「.sp-」を、PCにのみ適用する場合は「.pc-」追加してください。
「sp-」、「pc-」付きのソース例
<span class="sp-display-block">スマートフォンでのみブロック要素に</span><span class="pc-display-block">PCでのみブロック要素に</span>
| クラス名 | 種類 | ソース例 | 備考 |
|---|---|---|---|
| .display-block .display-inline |
ブロック要素 インライン要素 |
||
| .display-flex | フレックスボックス | ||
| .flex-wrap | フレックスアイテム複数行 | ※必要に応じて.display-flexと組み合わせて使用する | |
| .justify-start .justify-end .justify-center .justify-between .justify-around |
フレックスボックス横軸 右寄せ フレックスボックス横軸 中央寄せ フレックスボックス横軸 均等余白 フレックスボックス横軸 均等余白（先頭、末尾にも余白） |
※必要に応じて.display-flexと組み合わせて使用する | |
| .alignitems-start .alignitems-end .alignitems-center .alignitems-stretch |
フレックスボックス縦軸 上揃え フレックスボックス縦軸 下揃え フレックスボックス縦軸 中央揃え フレックスボックス縦軸 拡張 |
※必要に応じて.display-flexと組み合わせて使用する | |
| .align-right .align-left .align-center |
右寄せ 左寄せ 中央揃え |
||
| .float-right .float-left |
右回り込み 左回り込み |
||
| .clearfix | クリアフィックス （まわりこみ解除） |
<div class="clearfix"> <div class="float-left">左</div> <div class="float-right">右</div> </div> |
floatした要素の外側に指定する |
| .nowrap | 折り返し禁止 |
<td class="nowrap> 折り返したくないテキスト </td> |
|
| .image-center | 画像を中央寄せに | <img src="xxx/image.jpg" class="image-center"> | |
| .sp-hidden .pc-hidden |
スマートフォンで非表示 PCで非表示 |
<br class="pc-hidden"> スマートフォンでのみ改行したい場合 |
テキスト関係
スマートフォンにのみ適用する場合は、接頭辞として「.sp-」を、PCにのみ適用する場合は「.pc-」追加してください。
「sp-」、「pc-」付きのソース例
<span class="sp-font-large">スマートフォンでのみフォントサイズを大きく</span><span class="pc-font-large">PCでのみフォントサイズを大きく</span>
| クラス名 | 種類 | ソース例 | 備考 |
|---|---|---|---|
|
.font-xsmall .font-small .font-madium .font-large .font-xlarge .font-xxlarge |
文字サイズ最小 文字サイズ小 文字サイズ中 文字サイズ大 文字サイズさらに大きく 文字サイズ最大 |
<p class="font-xsmall">文字サイズ最小</p> <p class="font-small">文字サイズ小</p> <p class="font-medium">文字サイズ中</p> <p class="font-large">文字サイズ大</p> <p class="font-xlarge">文字サイズさらに大きく</p> <p class="font-xxlarge">文字サイズ最大</p> |
|
| .font-normal | 通常文字に | <p class="font-normal">文字サイズ最小</p> | |
| .font-bold | 太字に | <p class="font-bold">文字サイズ最小</p> | |
|
.font-red .font-blue |
文字色 | <p class="font-red">文字サイズ最小</p> <p class="font-blue">文字サイズ最小</p> |
|
|
.underline |
アンダーライン | <p class="font-underline">文字サイズ最小</p> |
余白調整
スマートフォンにのみ適用する場合は、接頭辞として「.sp-」を、PCにのみ適用する場合は「.pc-」追加してください。
「sp-」、「pc-」付きのソース例
<span class="sp-margin-top-medium">スマートフォンでのみtopマージンを中に</span><span class="pc-margin-top-medium">PCでのみtopマージンを中に</span>
| クラス名 | 種類 | ソース例 | 備考 |
|---|---|---|---|
| .margin-auto | 左右マージンをautoに | ||
|
.margin-top-0 .margin-bottom-0 |
topマージンを0に bottomマージンを0に |
||
|
.padding-top-0 .padding-bottom-0 |
topパディングを0に bottomパディングを0に |
||
|
.margin-top-small .margin-top-medium .margin-top-large |
topマージンを小に topマージンを中に topマージンを大に |
||
|
.margin-right-small .margin-right-medium .margin-right-large |
rightマージンを小に rightマージンを中に rightマージンを大に |
||
|
.margin-bottom-small .margin-bottom-medium .margin-bottom-large |
bottomマージンを小に bottomマージンを中に bottomマージンを大に |
||
|
.margin-left-small .margin-left-medium .margin-left-large |
leftマージンを小に leftマージンを中に leftマージンを大に |
幅調整
スマートフォンにのみ適用する場合は、接頭辞として「.sp-」を、PCにのみ適用する場合は「.pc-」追加してください。
「sp-」、「pc-」付きのソース例
<span class="sp-width-50per">スマートフォンでのみ幅を50%に</span><span class="pc-width-50per">PCでのみ幅を50%に</span>
| クラス名 | 種類 | ソース例 | 備考 |
|---|---|---|---|
|
.width-25per .width-50per .width-70per .width-100per |
幅25% 幅50% 幅70% 幅100% |
※現状、25%、50%、70%、100%のみご用意しております。必要に応じて追加ください。 |
配置
スマートフォンにのみ適用する場合は、接頭辞として「.sp-」を、PCにのみ適用する場合は「.pc-」を追加してください。
「sp-」、「pc-」付きのソース例
<span class="sp-image-center">スマートフォンでのみ画像をセンター配置に</span><span class="pc-image-center">PCでのみ画像をセンター配置に</span>
| クラス名 | 種類 | ソース例 | 備考 |
|---|---|---|---|
| .image-center | 画像センター配置 | <img src="" class="image-center"> |
スタイルシートの仕様
「style.css」記述順
- リセット
- サイト基本設定
- 共通レイアウト（ヘッダ、グローバルナビ、フッタ、コンテナ―、サイドカラム、カラムレイアウト）
- 汎用パーツ（見出し、マーカー、テーブル、アイコン、ボタン、枠、その他パーツ）
- ページ個別スタイル
- 汎用クラス
- 汎用パーツで編集が難しいページ独自のスタイルを「ページ個別スタイル」箇所に記述。
- 汎用クラスは必ず反映されるように、「一番下」に記述。
メディアクエリ（スマートフォン、PC記述）
最初にスマートフォン/PC共有の記述を、次にスマートフォン個別、PC個別の記述をします。
ソース
スマートフォン/PC共通の記述
/***--- スマートフォン ここから---***/
@media only screen and (max-width: 767px) {
スマートフォンの記述
}
/***--- //スマートフォン ここまで---***/
/***--- PC ここから---***/
@media print, screen and (min-width: 768px) {
PCの記述
}
/***--- //PC ここまで---***/
ページ個別スタイル
ページ個別スタイルにはどのコンテンツ用のスタイルか、接頭辞を付けて明示しています。
例
.home-xxx（トップページ用スタイル）
.faq-xxx（よくあるご質問用スタイル）
