Style Guide

グローバル

gNavとかgHeaderとか 大まかなレイアウトもここに

大枠

.wrapper .contents .main .side

2.2 グローバルヘッダ

gHeader

View Source

<header class="gHeader">
	<div class="gHeader_logo">
		<a href="/" class="gHeader_mainLogo"><img src="/assets/images/global/logo.png" alt="ZOA"></a>
		<p class="gHeader_logoTxt">究極の「お客様の安心」を提供する企業</p>
		<ul class="gHeader_subLogos">
			<li class="gHeader_subLogo"><a href=""><img src="/assets/images/global/shop_logo01.png" alt="ZOA"></a></li>
			<li class="gHeader_subLogo"><a href=""><img src="/assets/images/global/shop_logo02.png" alt="ZOA"></a></li>
			<li class="gHeader_subLogo"><a href=""><img src="/assets/images/global/shop_logo03.png" alt="ZOA"></a></li>
		</ul>
	</div>
	<div class="gHeader_right">
		<ul class="gHeader_links">
			<li class="gHeader_link"><a href="/recruit/">採用情報</a></li>
			<li class="gHeader_link"><a href="/contact/">お問い合わせ</a></li>
			<li class="gHeader_link gHeader_link-twitter"><a href="" target="_blank">Twitter</a></li>
		</ul>
		<nav class="gNav">
			<div class="gNav_inner">
				<ul class="gNav_list">
					<li class="gNav_item"><a href="/store/">店舗情報</a></li>
					<li class="gNav_item"><a href="/ad/">チラシ情報</a></li>
					<li class="gNav_item"><a href="/service/">サービス内容</a></li>
					<li class="gNav_item"><a href="/about/">会社案内</a></li>
					<li class="gNav_item"><a href="/ir/">IR情報</a></li>
					<li class="gNav_item"><a href="/shop/">オンラインショップ</a></li>
					<li class="gNav_item pc-hidden"><a href="/recruit/">採用情報</a></li>
					<li class="gNav_item pc-hidden"><a href="/contact/">お問い合わせ</a></li>
				</ul>
				<p class="gNav_twitter"><a href="" target="_blank">Twitter</a></p>
				<p class="gNav_close"><a href="javascript: void(0);">close</a></p>
			</div>
		</nav><!-- /.gNav -->
	</div><!-- /.gHeader_right -->
	<p class="gNavBtn"><a href="javascript: void(0);"><span></span></a></p>
	<a href="javascript: void(0);" class="gNavOverlay"></a>
</header><!-- /.gHeader -->

Copy Source

2.3 グロナビ

gNav

View Source

<nav class="gNav">
	<div class="gNav_inner">
		<ul class="gNav_list">
			<li class="gNav_item"><a href="/store/">店舗情報</a></li>
			<li class="gNav_item"><a href="/ad/">チラシ情報</a></li>
			<li class="gNav_item"><a href="/service/">サービス内容</a></li>
			<li class="gNav_item"><a href="/about/">会社案内</a></li>
			<li class="gNav_item"><a href="/ir/">IR情報</a></li>
			<li class="gNav_item"><a href="/shop/">オンラインショップ</a></li>
			<li class="gNav_item pc-hidden"><a href="/recruit/">採用情報</a></li>
			<li class="gNav_item pc-hidden"><a href="/contact/">お問い合わせ</a></li>
		</ul>
		<p class="gNav_twitter"><a href="" target="_blank">Twitter</a></p>
		<p class="gNav_close"><a href="javascript: void(0);">close</a></p>
	</div>
</nav><!-- /.gNav -->

Copy Source

2.4 グローバルフッタ

gFooter

default

View Source

<footer class="gFooter">
	<div class="gFooter_inner">
		<ul class="gFooter_links">
			<li class="gFooter_link"><a href="">プライバシーポリシー</a></li>
			<li class="gFooter_link"><a href="">お問い合わせ</a></li>
		</ul>
		<p class="gFooter_copyright">&copy; ZOA CORPORATION. All rights reserved. </p>
	</div>
</footer><!-- /.gFooter -->

Copy Source