/src/assets2/scss/_components.scss
<div class="CG2-seriesWeekHeader">
<div class="CG2-seriesWeekHeader__inner">
<div class="CG2-seriesWeekHeader__prev">
<div class="CG2-seriesWeekHeader__prevInner">
<a href="#">
<span class="CG2-seriesWeekHeader__label">前号</span>
<span class="CG2-seriesWeekHeader__number">10</span>
<span class="CG2-seriesWeekHeader__text">月</span>
<span class="CG2-seriesWeekHeader__number">1</span>
<span class="CG2-seriesWeekHeader__text">日発行</span>
</a>
</div>
</div>
<div class="CG2-seriesWeekHeader__current">
<div class="CG2-seriesWeekHeader__currentInner">
<a href="#">
<span class="CG2-seriesWeekHeader__label">最新号</span>
<span class="CG2-seriesWeekHeader__number">10</span>
<span class="CG2-seriesWeekHeader__text">月</span>
<span class="CG2-seriesWeekHeader__number">7</span>
<span class="CG2-seriesWeekHeader__text">日発行</span>
</a>
</div>
</div>
<div class="CG2-seriesWeekHeader__next">
<div class="CG2-seriesWeekHeader__nextInner">
<a href="#">
<span class="CG2-seriesWeekHeader__label">次号予告</span>
<span class="CG2-seriesWeekHeader__number">10</span>
<span class="CG2-seriesWeekHeader__text">月</span>
<span class="CG2-seriesWeekHeader__number">14</span>
<span class="CG2-seriesWeekHeader__text">日発行</span>
</a>
</div>
</div>
</div>
</div>
/src/assets2/scss/_components.scss
内部で別コンポーネント CG2-compactNav を利用
<div class="CG2-seriesListHeader">
<div class="CG2-seriesListHeader__articleLength">
<span class="CG2-seriesListHeader__label">記事数</span>
<span class="CG2-seriesListHeader__number">500</span>
<span class="CG2-seriesListHeader__unit">本</span>
</div>
<div class="CG2-seriesListHeader__nav">
<div class="CG2-compactNav">
<ul>
<li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
<li><a href="#">おすすめ順</a></li>
<li><a href="#">お気に入り</a></li>
<li><a href="#">無料公開</a></li>
</ul>
<div class="CG2-compactNav__navOpener"></div>
</div>
</div>
</div>
<div class="CG2-seriesListHeader">
<div class="CG2-seriesListHeader__nav">
<div class="CG2-compactNav">
<ul>
<li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
<li><a href="#">おすすめ順</a></li>
<li><a href="#">お気に入り</a></li>
<li><a href="#">無料公開</a></li>
</ul>
<div class="CG2-compactNav__navOpener"></div>
</div>
</div>
</div>
タブ切り替え(表示toggle)の挙動の付与
(JSとの連携、以下で挙動確認可能)
data-cg2-tab-button
を明示する
- コンテンツ部は
[data-cg2-tab-content]
でグループ化した[data-cg2-tab-pane]
を用意する
<div class="CG2-seriesListHeader">
<div class="CG2-seriesListHeader__nav">
<div class="CG2-compactNav">
<ul>
<li class="CG2-compactNav__item--current"><a href="#itemA" data-cg2-tab-button>項目A</a></li>
<li><a href="#itemB" data-cg2-tab-button>項目B</a></li>
</ul>
<div class="CG2-compactNav__navOpener"></div>
</div>
</div>
</div>
<div data-cg2-tab-content>
<div id="itemA" data-cg2-tab-pane="current">
項目Aのコンテンツ
</div>
<div id="itemB" data-cg2-tab-pane>
項目Bのコンテンツ
</div>
</div>
compactNav
/src/assets2/scss/_components.scss
別コンポーネント CG2-seriesListHeader 内で利用。利用方法は CG2-seriesListHeader を参照
<div class="CG2-compactNav">
<ul>
<li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
<li><a href="#">おすすめ順</a></li>
<li><a href="#">お気に入り</a></li>
<li><a href="#">無料公開</a></li>
</ul>
<div class="CG2-compactNav__navOpener"></div>
</div>
/src/assets2/scss/_components.scss
<div class="CG2-seriesHeader">
<div class="CG2-seriesHeader__inner">
<div class="CG2-seriesHeader__category">
<div class="CG2-seriesHeader__categoryIcon">
<span class="CG2-icon-cat-architecture"></span>
</div>
<div class="CG2-seriesHeader__categoryName">カテゴリー名</div>
</div>
<div class="CG2-seriesHeader__main">
<div class="CG2-seriesHeader__mainInner">
<div class="CG2-seriesHeader__title">Vue.jsを使いこなす</div>
<div class="CG2-seriesHeader__length">
全<span class="CG2-seriesHeader__value">8</span>回
</div>
</div>
</div>
<div class="CG2-seriesHeader__utils">
<button class="CG2-transparentButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button>
</div>
</div>
<div class="CG2-seriesHeader__bg" style="background-image: url( './img/_01.jpg' )"></div>
</div>
series
/src/assets2/scss/_components.scss
- 未読時は
CG2-series__item--unread
を追加する
- 有料記事のアイコンは
<span class="CG2-icon-lock"></span>
を利用する。このときCG2-icon--colored
は不要
双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。
双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。
...
...
<div class="CG2-series">
<div class="CG2-series__item">
<div class="CG2-series__itemHeader">
<a href="#">
<div class="CG2-series__itemIcon">
<span class="CG2-icon-unlock CG2-icon--colored"></span>
</div>
<div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
<div class="CG2-series__itemPubdate">2015/04/23</div>
</a>
</div>
<div class="CG2-series__itemBody">
<p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
</div>
<div class="CG2-series__authors">
<div class="CG2-series__author">
<div class="CG2-series__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</div>
</div>
<div class="CG2-series__item CG2-series__item--unread">
<div class="CG2-series__itemHeader">
<a href="#">
<div class="CG2-series__itemIcon">
<span class="CG2-icon-unlock CG2-icon--colored"></span>
</div>
<div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
<div class="CG2-series__itemPubdate">2015/04/23</div>
</a>
</div>
<div class="CG2-series__itemBody">
<p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
</div>
<div class="CG2-series__authors">
<div class="CG2-series__author">
<div class="CG2-series__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</div>
</div>
<div class="CG2-series__item">
...
</div>
<div class="CG2-series__item">
...
</div>
</div>
/src/assets2/scss/_components.scss
<div class="CG2-categoryHeader">
<div class="CG2-categoryHeader__inner">
<div class="CG2-categoryHeader__icon">
<span class="CG2-icon-cat-future CG2-icon--colored"></span>
</div>
<div class="CG2-categoryHeader__text">
<h1>未来・次世代</h1>
<p>カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。カテゴリー説明テキスト。</p>
</div>
</div>
</div>
articleHeader
/src/assets2/scss/_components.scss
第2回 仕様を知る 2
フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。
2015年 5月14日発行
<div class="CG2-articleHeader">
<div class="CG2-articleHeader__inner">
<div class="CG2-articleHeader__category">
<div class="CG2-articleHeader__categoryIcon">
<span class="CG2-icon-cat-elementary"></span>
</div>
<div class="CG2-articleHeader__categoryName">入門</div>
</div>
<div class="CG2-articleHeader__main">
<div class="CG2-articleHeader__mainInner">
<div class="CG2-articleHeader__series">
<a href="javascript:alert( 'シリーズ一覧へ' );">
そこが知りたい、 Flexible Box
</a>
</div>
<div class="CG2-articleHeader__title">第2回 仕様を知る 2</div>
<div class="CG2-articleHeader__abstract">
<p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>
</div>
<div class="CG2-articleHeader__pubDate">2015年 5月14日発行</div>
<div class="CG2-articleHeader__authors">
<div class="CG2-articleHeader__author">
<a href="#">
<div class="CG2-articleHeader__authorImage">
<img src="http://img.pxgrid.net/48x48" alt="">
</div>
<div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
<div class="CG2-articleHeader__authorTitle">フロントエンド・エンジニア</div>
</a>
</div>
<div class="CG2-articleHeader__author">
<a href="#">
<div class="CG2-articleHeader__authorImage">
<img src="http://img.pxgrid.net/48x48" alt="">
</div>
<div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
</a>
</div>
</div>
</div>
</div>
<div class="CG2-articleHeader__pagenation">
<ul>
<li class="CG2-articleHeader__pagenationPrev"><a href="#">前回</a></li>
<li class="CG2-articleHeader__pagenationNext"><a href="#">次回</a></li>
</ul>
</div>
<div class="CG2-articleHeader__utils">
<ul>
<li><a href="#" class="CG2-transparentButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a></li>
<li><button class="CG2-transparentButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button></li>
<li><button class="CG2-transparentButton">未読にする</button></li>
</ul>
</div>
</div>
<div class="CG2-articleHeader__bg" style="background-image: url( './img/_01.jpg' )"></div>
</div>
articleBeforeLogin
/src/assets2/scss/_components.scss
<div class="CG2-articleBeforeLogin">
<div class="CG2-articleBeforeLogin__lead">この記事を読むには<br>購読の手続きが必要です</div>
<div class="CG2-articleBeforeLogin__sub"></div>
<div class="CG2-articleBeforeLogin__buttonContainer">
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">購読の手続きへ</a></li>
<li><a class="CG2-button" href="#">購読済みの方はログイン</a></li>
</ul>
</div>
</div>
articleTOC
/src/assets2/scss/_components.scss
<section class="CG2-articleTOC">
<header class="CG2-articleTOC__header">
<h1>目次</h1>
</header>
<div class="CG2-articleTOC__body">
<div class="CG2-articleTOC__list">
<ul>
<li><a href="#">はじめに</a></li>
<li><a href="#">flex-growとflex-shrink</a></li>
<li><a href="#">利用可能な余白を計算する</a></li>
<li><a href="#">まとめ</a></li>
</ul>
</div>
</div>
</section>
articleSeriesNav
/src/assets2/scss/_components.scss
記事ページ .CG2-narrowLayout
のサイドバー内で利用する
<div class="CG2-articleSeriesNav">
<div class="CG2-articleSeriesNav__inner">
<ul>
<li><a href="#">第1回「 仕様を知る 1 」</a></li>
<li class="CG2-articleSeriesNav__item--current"><a href="#">第2回「 仕様を知る 2 」</a></li>
<li><a href="#">第3回「 Flexboxを実践する 1 」</a></li>
<li><a href="#">第4回「 Flexboxを実践する 2 」</a></li>
<li><a href="#">5こまではいる、長いと切れる長いと切れる長いと切れる</a></li>
</ul>
<ul>
<li><a href="#">6こ目は次のUL</a></li>
<li><a href="#">7こ目</a></li>
<li><a href="#">8こ目</a></li>
<li><a href="#">9こ目</a></li>
<li><a href="#">10こ目</a></li>
</ul>
</div>
</div>
article
/src/assets2/scss/_components.scss
記事本文、markdownから変換されることを前提
h2みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
h3みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
h4みだし
テキストリンクてきすとcode
テキストてきすとテキストてきすと
- リストりすと
- リストりすと
見出しセル |
見出しセル |
見出しセル |
データセル |
データセル |
データセル |
データセル |
データセル |
データセル |
見出しセル |
データセル |
データセル |
見出しセル |
データセル |
データセル |
<article class="CG2-article">
<h2>h2みだし</h2>
<p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
<h3>h3みだし</h3>
<p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
<h4>h4みだし</h4>
<p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
<ul>
<li>リストりすと</li>
<li>リストりすと</li>
</ul>
<ol>
<li>リストりすと</li>
<li>リストりすと</li>
</ol>
<table>
<tbody>
<tr>
<th>見出しセル</th>
<th>見出しセル</th>
<th>見出しセル</th>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<th>見出しセル</th>
<td>データセル</td>
<td>データセル</td>
</tr>
<tr>
<th>見出しセル</th>
<td>データセル</td>
<td>データセル</td>
</tr>
</tbody>
</table>
<aside>
<h1>*注:Autoprefixer</h1>
<p>Autoprefixerに関しては、次の記事を参照してください。<br><a href="#">「ビルドツールアラカルト」</a>シリーズ</p>
</aside>
</article>
articlePagination
/src/assets2/scss/_components.scss
<div class="CG2-articlePagination">
<ul>
<li class="CG2-articlePagination__prev"><a href="#">第1回 仕様を知る 1</a></li>
<li class="CG2-articlePagination__next"><a href="#">第3回 Flexboxを実践する 1</a></li>
</ul>
</div>
articleUtil
/src/assets2/scss/_components.scss
<div class="CG2-articleUtil">
<ul>
<li><button class="CG2-button CG2-button--action" data-socialitems-append><span class="CG2-icon-facebook"></span><span class="CG2-icon-twitter"></span><span class="CG2-icon-gplus"></span> シェアする</button></li>
<li><button class="CG2-button CG2-button--action"><span class="CG2-icon-star"></span> お気に入りに登録</button></li>
</ul>
<div class="CG2-articleUtil__socialItems"></div>
<script src="https://platform.twitter.com/widgets.js" async></script>
</div>
livecode
/src/assets2/scss/_components.scss
ソースコードを埋め込むことができる
<div class="flex">
<div class="flexitem-1">Item1</div>
<div class="flexitem-2">Item2</div>
<div class="flex__item-3">Item3</div>
</div>
<section class="CG2-livecode">
<header class="CG2-livecode__header">
<div class="CG2-livecode__label">
index.html
</div>
<div class="CG2-livecode__nav">
<ul>
<li><a href="#">
<span class="CG2-icon-tool"></span> 全文選択
</a></li>
<li><a href="#">
<span class="CG2-icon-tool"></span> 新規タブで開く
</a></li>
</ul>
</div>
</header>
<div class="CG2-livecode__body">
<pre class="language-markup line-numbers"><code><div class="flex">
<div class="flex__item-1">Item1</div>
<div class="flex__item-2">Item2</div>
<div class="flex__item-3">Item3</div>
</div></code></pre>
</div>
</section>
動く demo として、iframe を埋め込むことができる
iframeには、
- CG2-livecode__frame--small
- CG2-livecode__frame--large
を追加クラスとして明示することも可能。その場合それぞれ、iframeの高さが190px、590pxとなる。
<section class="CG2-livecode">
<h1>埋め込みデモのタイトル</h1>
<header class="CG2-livecode__header">
<div class="CG2-livecode__nav">
<ul>
<li><a href="#">
ソースコード:flex-basis/2
</a></li>
<li><a href="#">
<span class="CG2-icon-tool"></span> 新規タブで開く
</a></li>
</ul>
</div>
</header>
<div class="CG2-livecode__body">
<iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html"></iframe>
</div>
</section>
profile
/src/assets2/scss/_components.scss
バイオグラフィー自体がメインのコンテンツ用
株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。
<div class="CG2-profile">
<div class="CG2-profile__image">
<img src="http://img.pxgrid.net/120x120" alt="">
</div>
<div class="CG2-profile__main">
<div class="CG2-profile__header">
<div class="CG2-profile__name">ピクセル グリオ</div>
<div class="CG2-profile__title">フロントエンジニア</div>
<div class="CG2-profile__links">
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Website</a></li>
</ul>
</div>
</div>
<div class="CG2-profile__text">
<p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
</div>
</div>
</div>
profileSimple
/src/assets2/scss/_components.scss
記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用
株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。
<div class="CG2-profileSimple">
<div class="CG2-profileSimple__image">
<img src="http://img.pxgrid.net/120x120" alt="">
</div>
<div class="CG2-profileSimple__main">
<div class="CG2-profileSimple__header">
<div class="CG2-profileSimple__name">ピクセル グリオ</div>
<div class="CG2-profileSimple__title">フロントエンジニア</div>
</div>
<div class="CG2-profileSimple__text">
<p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
</div>
</div>
</div>
authorList
/src/assets2/scss/_components.scss
<div class="CG2-authorList">
<div class="CG2-authorList__inner">
<div class="CG2-authorList__item">
<a href="#">
<div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>
<div class="CG2-authorList__name">中村 享介</div>
<div class="CG2-authorList__title">代表取締役, フロントエンド・エンジニア</div>
<div class="CG2-authorList__numOfPosts">記事数24</div>
</a>
</div>
<div class="CG2-authorList__item">
<a href="#">
<div class="CG2-authorList__image"><img src="http://img.pxgrid.net/80x80" alt="" width="80" height="80"></div>
<div class="CG2-authorList__name">中村 享介</div>
<div class="CG2-authorList__title">フロントエンド・エンジニア</div>
<div class="CG2-authorList__numOfPosts">記事数24</div>
</a>
</div>
<div class="CG2-authorList__item">...</div>
<div class="CG2-authorList__item">...</div>
<div class="CG2-authorList__item">...</div>
</div>
</div>
searchFailed
/src/assets2/scss/_components.scss
CG2-searchOption の CG2-searchLayout__result 内で利用する
未使用につき、不要の可能性あり
<div class="CG2-searchFailed">
<div class="CG2-searchFailed__text">結果が見つかりませんでした</div>
<div class="CG2-searchFailed__search">
<input>
</div>
</div>
settings
/src/assets2/scss/_components.scss
設定
ログインメールアドレス |
oyamada@pxgrid.com |
購読情報
退会
<div class="CG2-settings">
<div class="CG2-settings__inner">
<div class="CG2-settings__col">
<div class="CG2-settings__heading">設定</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldHGroup">
<table>
<tr>
<th>ログインメールアドレス</th>
<td>oyamada@pxgrid.com</td>
</tr>
</table>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<button class="CG2-button CG2-button--setting">ログアウト</button>
</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldVGroup">
<div class="CG2-settings__fieldHeader">メールマガジンを受信するメールアドレス</div>
<div class="CG2-settings__fieldData"><input type="email" value="oyamada@pxgrid.com"></div>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<button class="CG2-button CG2-button--setting">変更</button>
</div>
</div>
<div class="CG2-settings__col">
<div class="CG2-settings__heading">購読情報</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldHGroup">
<table>
<tr>
<th>決済方法</th>
<td>PayPal</td>
</tr>
</table>
</div>
</div>
<div class="CG2-settings__heading">退会</div>
<div class="CG2-settings__field">
<div class="CG2-settings__fieldVGroup">
<div class="CG2-settings__fieldHeader">退会理由を教えて下さい(1000文字以内)</div>
<div class="CG2-settings__fieldData"><textarea maxlength="1000"></textarea></div>
</div>
</div>
<div class="CG2-settings__buttonContainer">
<button class="CG2-button CG2-button--setting">CodeGridを退会し、購読を停止する</button>
</div>
</div>
</div>
</div>
/src/assets2/scss/_components.scss
<div class="CG2-formProgress">
<ol>
<li>1. ログイン方法について</li>
<li class="CG2-formProgress__item--current">2. 決済方法選択</li>
<li>3. 登録完了</li>
</ol>
</div>
signupFrom
/src/assets2/scss/_components.scss
購読料は月額800円(税抜)
PayPal払いなら30日間無料
再度エラーになる場合は以下よりお問い合わせください。
<div class="CG2-signupFrom">
<div class="CG2-signupFrom__lead">
購読料は月額800円(税抜)
<div class="CG2-signupFrom__leadSub">
PayPal払いなら30日間無料
</div>
</div>
<div class="CG2-signupFrom__information">
<p>支払い処理中にエラーが発生しました</p>
</div>
<div class="CG2-signupFrom__text">
<p>お手数ですがもう一度手続きをおこなってください。</p>
</div>
<div class="CG2-signupFrom__check">
<label><input type="checkbox">利用規約に同意する</label>
</div>
<div class="CG2-signupFrom__buttonContainer">
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">再度支払い手続きをおこなう</a></li>
</ul>
<div class="CG2-signupFrom__buttonContainerText">
<p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
</div>
</div>
<div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">PayPalで支払う</a></li>
</ul>
<ul>
<li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1ヶ月分</a></li>
<li><a class="CG2-button CG2-button--primary" href="#">WebMoney 1年分</a></li>
</ul>
<div class="CG2-signupFrom__buttonContainerText">
<p>※CodeGridの購読にはGoogleアカウントが必要です。 <a href="#">Googleアカウント作成</a></p>
</div>
</div>
<div class="CG2-signupFrom__annotation">
<p>再度エラーになる場合は以下よりお問い合わせください。</p>
</div>
</div>