現在のモバイルサイトではメニューボタンを押すとナビゲーションが出てくるようになっていますが、PCサイズで見た時は常にナビゲーションが表示されているように記述します。
まずはHTMLファイルに必要なクラス名を加えます。
<header id="globalHeader"> <div class="headerInner"> <h1><img src="img/logo.png" alt="株式会社ネットスマート" width="118"></h1> <div class="search"> <p id="searchToggle"><img src="img/icon_search.png" alt="検索" width="20"></p> <div class="form"> <form action="#"> <span><input type="search" name="q" placeholder="サイト内検索"></span> <span><button>検索</button></span> </form> </div> </div> </div> <!--/headerInner--> <nav class="menu"> <p id="menuToggle"><span>メニュー</span></p> <ul> <li class="service"><a href="#"><div>サービス紹介</div></a></li> <li class="proven"><a href="#"><div>実績紹介</div></a></li> <li class="corporate"><a href="#"><div>会社概要</div></a></li> <li class="recruit"><a href="#"><div>採用情報</div></a></li> </ul> </nav> </header>
スタイルシートの方にはメディアクエリーを使い、タブレットサイズとPCサイズに分けて記述していきます。
今回のブレイクポイント
#globalHeader h1 a { background: url(../img/logo_lt_768.png) left top no-repeat; background-size: 100%; display: block; height: 28px; overflow: hidden; text-indent: 100%; white-space: nowrap; width: 118px; } @media screen and (min-width:768px){ #globalHeader { border: none; padding: 0; } #globalHeader .headerInner { margin: 0 auto; position: relative; width: 768px; } #globalHeader h1 { float: none; padding: 28px 0 0 2px; } #globalHeader h1 a { background: url(../img/logo_gte_768.png) left top no-repeat; height: 43px; width: 402px; } #globalHeader nav.menu, #globalHeader nav.menu.open { background: url(../img/bg_nav_header.png) left top repeat-x; background-size: contain; float: none; margin: 0; padding: 0; } #globalHeader nav.menu #menuToggle { display: none; } #globalHeader nav.menu ul, #globalHeader nav.menu.open ul { background: none; border: none !important; box-shadow: none; display: block; margin: 30px auto 0; width: 768px; padding: 0 0 4px; position: static; } #globalHeader nav.menu ul li, #globalHeader nav.menu.open ul li { background: left top no-repeat; background-size: 100%; border: none; float: left; width: 25%; } #globalHeader nav.menu ul li.service, #globalHeader nav.menu.open ul li.service { background-image: url(../img/nav_header_service.png); } #globalHeader nav.menu ul li.proven, #globalHeader nav.menu.open ul li.proven { background-image: url(../img/nav_header_proven.png); } #globalHeader nav.menu ul li.corporate, #globalHeader nav.menu.open ul li.corporate { background-image: url(../img/nav_header_corporate.png); } #globalHeader nav.menu ul li.recruit, #globalHeader nav.menu.open ul li.recruit { background-image: url(../img/nav_header_recruit.png); } #globalHeader nav.menu ul li a, #globalHeader nav.menu.open ul li a { border: none; display: block; height: 44px; overflow: hidden; padding: 0; text-indent: 100%; white-space: nowrap; width: 100%; } #globalHeader nav.menu ul li a:hover, #globalHeader nav.menu.open ul li a:hover { background: #fff; opacity: 0.2; } #globalHeader .search { position: absolute; right: 0; top: 35px; } #globalHeader .search #searchToggle { display: none; } #globalHeader div.search div.form { background: none; box-shadow: none; display: block; padding: 0; position: static; } #globalHeader div.search form { display: block; width: 350px; } #globalHeader div.search form span { display: inline; float: left; padding: 0 !important; width: auto !important; } #globalHeader div.search form span:last-child:hover { background: #fff; opacity: 0.7; } #globalHeader div.search form input[type="search"] { border-radius: 5px 0 0 5px; margin: 0; padding: 8px 0 7px; width: 258px; } #globalHeader div.search div.form button { background: url(../img/btn_search.png) left top no-repeat; border: none; border-radius: 0; box-shadow: none; cursor: pointer; height: 33px; margin: 0; overflow: hidden; padding: 0; text-indent: 100%; text-shadow: none; white-space: nowrap; width: 92px; } #globalHeader div.menu.open, #globalHeader div.search.open { background: none; } #globalHeader nav ul:after, #globalHeader div.search form:after { content: ""; display: block; clear: both; } #body { margin: 15px auto 0; width: 768px; } #slide { background: #fff; border: 1px solid #d6d6d6; padding: 5px; } #globalFooter nav { background: #eaeaea; } #globalFooter nav ul { margin: 0 auto; padding: 16px 6px; width: 756px; } #globalFooter nav ul li { border: none; margin-right: 30px; width: auto; } #globalFooter nav ul li:nth-child(odd) { clear: none; } #globalFooter nav ul li a { background: url(../img/icon_arrow_gray_gte_768.png) left center no-repeat; border: none; padding-left: 12px; width: auto; } } @media screen and (min-width:960px){ #globalHeader .headerInner { width: 960px; } #globalHeader nav.menu ul, #globalHeader nav.menu.open ul { width: 960px; } #globalHeader nav.menu ul li a, #globalHeader nav.menu.open ul li a { height: 55px; } #body { width: 960px; } #globalFooter nav ul { width: 948px; } }
タブパネルとアコーディオンパネルの解除
index.html
<body> <header id="globalHeader"> <div class="headerInner"> <h1><a href="/">株式会社ネットスマート</a></h1> <div class="search"> <p id="searchToggle"><img src="img/icon_search.png" alt="検索" width="20"></p> <div class="form"> <form> <span><input type="search" name="q" placeholder="サイト内検索"></span> <span><button>検索</button></span> </form> </div> </div> </div> <nav class="menu"> <p id="menuToggle"><span>メニュー</span></p> <ul> <li class="service"><a href="#"><div>サービス紹介</div></a></li> <li class="proven"><a href="#"><div>実績紹介</div></a></li> <li class="corporate"><a href="#"><div>会社概要</div></a></li> <li class="recruit"><a href="#"><div>採用情報</div></a></li> </ul> </nav> </header> <div id="body"> <div id="slide"> <div class="flexslider"> <ul class="slides"> <li><img src="img/img_keyvisual_01_lt_768.jpg" alt=""></li> <li><img src="img/img_keyvisual_02_lt_768.jpg" alt=""></li> <li><img src="img/img_keyvisual_03_lt_768.jpg" alt=""></li> </ul> </div> </div> <div class="alert"> <ul> <li><a href="#"><div><span class="date">2012年10月1日</span>メンテナンスのお知らせ</div></a></li> </ul> </div> <section id="pickup"> <h2>サービスピックアップ</h2> <ul class="tab"> <li class="current"><a href="#cms">CMS</a></li> <li><a href="#seo">SEO</a></li> <li><a href="#social">ソーシャル</a></li> </ul> <div class="tabContents current" id="cms"> <div class="round"> <a href="#"> <h3>CMS</h3> <div> <p><img src="img/img_pickup_cms.png" width="179" alt="CMS"></p> </div> </a> </div> <p class="text">低価格&高機能なCMS導入。<br>充実の管理画面でサイト運用を効率的に。</p> </div> <div class="tabContents" id="seo"> <div class="round"> <a href="#"> <h3>SEO</h3> <div> <p><img src="img/img_pickup_seo.png" width="193" alt="SEO"></p> </div> </a> </div> <p class="text">検索ワードを短期間で上位表示。<br>スマートフォンサイトにも対応します。</p> </div> <div class="tabContents" id="social"> <div class="round"> <a href="#"> <h3>ソーシャル</h3> <div> <p><img src="img/img_pickup_social.png" width="169" alt="ソーシャル"></p> </div> </a> </div> <p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p> </div> </section> <div class="columnWrapper"> <div class="indexBoxes"> <section class="child"> <a href="#"> <h2><span>サービス紹介</span></h2> <div class="captionBox"> <div class="image"><img src="img/img_index_service.jpg" alt="サービス紹介"></div> <p>全てのインターネットユーザにスマートさを。</p> </div> </a> </section> <section class="child"> <a href="#"> <h2><span>実績紹介</span></h2> <div class="captionBox"> <div class="image"><img src="img/img_index_proven.jpg" alt="実績紹介"></div> <p>これまでに手がけたサービス、制作事例をご紹介します。</p> </div> </a> </section> <section class="child"> <a href="#"> <h2><span>会社概要</span></h2> <div class="captionBox"> <div class="image"><img src="img/img_index_corporate.jpg" alt="会社概要"></div> <p>企業沿革、コーポレートメッセージなどご紹介します。</p> </div> </a> </section> <section class="child"> <a href="#"> <h2><span>採用情報</span></h2> <div class="captionBox"> <div class="image"><img src="img/img_index_recruit.jpg" alt="採用情報"></div> <p>私たちの理念に共感でき、ともに未来を創っていける仲間を募集しております。</p> </div> </a> </section> </div> <section class="seminar toggle close"> <h2><span>セミナー</span></h2> <dl class="informationLink"> <dt>2013年4月1日</dt> <dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2013年4月1日</dt> <dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2013年4月1日</dt> <dd><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></dd> <dt>2013年4月1日</dt> <dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2013年4月1日</dt> <dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> </dl> </section> </div> <section class="information toggle"> <h2><span>お知らせ</span></h2> <dl class="informationLink"> <dt>2013年3月18日</dt> <dd><a href="#">採用情報を更新しました</a></dd> <dt>2013年3月11日</dt> <dd><a href="#">実績紹介を更新しました</a></dd> <dt>2013年3月1日</dt> <dd><a href="#">サービスが紹介されました</a></dd> <dt>2013年2月25日</dt> <dd><a href="#">社内ブログを開設しました</a></dd> </dl> </section> </div> <footer id="globalFooter"> <nav> <ul> <li><a href="#"><div>サイトマップ</div></a></li> <li><a href="#"><div>プライバシーポリシー</div></a></li> <li><a href="#"><div>サイトのご利用について</div></a></li> <li><a href="#"><div>免責事項</div></a></li> </ul> </nav> <p id="copyright">©2013 Net Smart Co., Ltd. All rights Reserved.</p> </footer> </body>
responsive_style.cssの共有部分
div.alert span, #pickup h3, div.indexBoxes div.captionBox { display: none; } #globalHeader nav.menu #menuToggle, #globalHeader div.search p#searchToggle, #globalHeader div.search div.form button { background: -moz-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%); } #globalHeader div.search form input[type="search"] { -moz-box-sizing: border-box; } #pickup ul.tab li a { background-image: -moz-linear-gradient(top, #eeedf2, #717171 4%, #2b2b2b 74%); } #pickup ul.tab li.current a { background-image: -moz-linear-gradient(top, #e9e9e9 0%, #ffffff 29%); } #pickup { background-image: url(../img/bg_pickup_lt_768.jpg); } #pickup div.round { background-image: -moz-linear-gradient(top, #ffffff 14%, #dfdddd 100%); } div.indexBoxes { margin: 0 0 20px 0; } div.indexBoxes section.child { border-top: 1px solid #ccc; } div.indexBoxes section.child:last-child { border-bottom: 1px solid #ccc; } div.indexBoxes section.child a h2 { background-image: -moz-linear-gradient(top, #ffffff, #efefef); background-image: -webkit-linear-gradient(top, #ffffff, #efefef); background-image: linear-gradient(top, #ffffff, #efefef); font-size: 16px; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3); } div.indexBoxes section.child a h2 span { background: url(../img/icon_arrow_black.png) no-repeat 100% 50%; display: block; padding: 12px 10px; } section.seminar h2, section.information h2 { background-image: -moz-linear-gradient(top, #ffffff, #efefef); } dl.informationLink dt { clear: left; color: #777; float: left; margin-top: 12px; padding-left: 10px; position: relative; width: 8em; z-index: 1; } dl.informationLink dd { background: url(../img/icon_arrow_gray.png) no-repeat 100% 50%; border-top: 1px solid #ccc; position: relative; z-index:10; } dl.informationLink dd a { display: block; margin: 0; padding: 12px 30px 12px 10em; } section.information { border-bottom: 1px solid #ccc; margin: 0 0 20px 0; } .toggle h2 { cursor: pointer; } .toggle.close dl { display: none; }
@media screen and (min-width:768px)内の記述
#body { margin: 15px auto 0; width: 768px; } #pickup ul.tab { display: none; } #pickup h3, #pickup div.tabContents, div.indexBoxes div.captionBox { display: block; } .toggle.close dl { display: block !important; } .toggle h2 { cursor: default; } .toggle h2 span, .toggle.close h2 span { background: none !important; } #slide { background: #fff; border: 1px solid #d6d6d6; padding: 5px; }
最終的な @media screen and (min-width:768px)内の記述
@media screen and (min-width:768px){ /* 追加した記述▽▽▽*/ a:link, a:visited { text-decoration: none; } a:active, a:hover { text-decoration: underline; } /* 追加した記述△△△*/ #globalHeader { border: none; padding: 0; } #globalHeader .headerInner { margin: 0 auto; position: relative; width: 768px; } #globalHeader h1 { float: none; padding: 28px 0 0 2px; } #globalHeader h1 a { background: url(../img/logo_gte_768.png) left top no-repeat; height: 43px; width: 402px; } #globalHeader nav.menu, #globalHeader nav.menu.open { background: url(../img/bg_nav_header.png) left top repeat-x; background-size: contain; float: none; margin: 0; padding: 0; } #globalHeader nav.menu #menuToggle { display: none; } #globalHeader nav.menu ul, #globalHeader nav.menu.open ul { background: none; border: none !important; box-shadow: none; display: block; margin: 30px auto 0; width: 768px; padding: 0 0 4px; position: static; } #globalHeader nav.menu ul li, #globalHeader nav.menu.open ul li { background: left top no-repeat; background-size: 100%; border: none; float: left; width: 25%; } #globalHeader nav.menu ul li.service, #globalHeader nav.menu.open ul li.service { background-image: url(../img/nav_header_service.png); } #globalHeader nav.menu ul li.proven, #globalHeader nav.menu.open ul li.proven { background-image: url(../img/nav_header_proven.png); } #globalHeader nav.menu ul li.corporate, #globalHeader nav.menu.open ul li.corporate { background-image: url(../img/nav_header_corporate.png); } #globalHeader nav.menu ul li.recruit, #globalHeader nav.menu.open ul li.recruit { background-image: url(../img/nav_header_recruit.png); } #globalHeader nav.menu ul li a, #globalHeader nav.menu.open ul li a { border: none; display: block; height: 44px; overflow: hidden; padding: 0; text-indent: 100%; white-space: nowrap; width: 100%; } #globalHeader nav.menu ul li a:hover, #globalHeader nav.menu.open ul li a:hover { background: #fff; opacity: 0.2; } #globalHeader .search { position: absolute; right: 0; top: 35px; } #globalHeader .search #searchToggle { display: none; } #globalHeader div.search div.form { background: none; box-shadow: none; display: block; padding: 0; position: static; } #globalHeader div.search form { display: block; width: 350px; } #globalHeader div.search form span { display: inline; float: left; padding: 0 !important; width: auto !important; } #globalHeader div.search form span:last-child:hover { background: #fff; opacity: 0.7; } #globalHeader div.search form input[type="search"] { border-radius: 5px 0 0 5px; margin: 0; padding: 8px 0 7px; width: 258px; } #globalHeader div.search div.form button { background: url(../img/btn_search.png) left top no-repeat; border: none; border-radius: 0; box-shadow: none; cursor: pointer; height: 33px; margin: 0; overflow: hidden; padding: 0; text-indent: 100%; text-shadow: none; white-space: nowrap; width: 92px ; } #globalHeader div.menu.open, #globalHeader div.search.open { background: none; } /* 削除する記述▽▽▽ #globalHeader nav ul:after, #globalHeader div.search form:after { content: ""; display: block; clear: both; } 削除する記述△△△*/ #body { margin: 15px auto 0; width: 768px; } /* 追加した記述▽▽▽*/ div.alert { margin-top: 18px; } div.alert ul li a { padding-left: 11.2em; } div.alert ul li a span { color: #777; display: block; float: left; margin-left: -9em; padding-left: 10px; width: 8em; } #pickup ul.tab { display: none; } #pickup h3, #pickup div.tabContents, div.indexBoxes div.captionBox { display: block; } #pickup { background: url(../img/bg_pickup_gte_768.jpg) left top no-repeat; background-size: 100%; margin-top: 18px; padding: 0 18px 0; } #pickup h2 { font-size: 18px; padding: 10px 0; } #pickup div.tabContents { box-sizing: border-box; float: left; padding: 0 18px 0 0; width: 33.3%; } #pickup div.tabContents:last-child { padding: 0; } #pickup div.round { border-radius: 5px !important; } #pickup div.round a:hover { text-decoration: none; } #pickup div.round div { display: table; height: 105px; width: 100%; } #pickup div.round div p { display: table-cell; vertical-align: middle; } #pickup div.round div p img { width: 50%; } #pickup div.tabContents p.text { margin: 10px 10px; } div.columnWrapper { margin-top: 18px; } div.indexBoxes { float: left; margin: 0; width: 68.2%; } div.indexBoxes section.child { border: none !important; box-sizing: border-box; float: left; margin-bottom: 12px; padding-right: 18px; width: 50%; } div.indexBoxes section.child a:hover { text-decoration: none; } div.indexBoxes section.child a h2 { border: 1px solid #ccc; border-radius: 5px; } div.indexBoxes section.child a:hover h2 { text-decoration: underline; } div.indexBoxes section.child a div.captionBox { margin-top: 12px; } div.indexBoxes section.child a div.captionBox div.image { border: 1px solid #ccc; clear: left; float: left; margin-right: 12px; padding: 3px; } div.indexBoxes section.child a div.captionBox div.image img { vertical-align: top; } section.seminar { float: right; width: 31.8%; } section.information { border: none; margin-top: 18px; } section.seminar h2, section.information h2 { border: 1px solid #ccc; border-radius: 5px; } .toggle.close dl { display: block !important; } dl.informationLink dt { padding: 0 10px; width: auto; } dl.informationLink dd { background: none; border-top: none; border-bottom: 1px solid #ccc; } dl.informationLink dd a { padding: 12px 10px; } section.information dl.informationLink dt { width: 8em; } section.information dl.informationLink dd a { padding-left: 10em; } .toggle h2 { cursor: default; } .toggle h2 span, .toggle.close h2 span { background: none !important; } #slide { background: #fff; border: 1px solid #d6d6d6; padding: 5px; } #globalFooter nav { background: #eaeaea; } #globalFooter nav ul { margin: 0 auto; padding: 16px 6px; width: 756px; } #globalFooter nav ul li { border: none; margin-right: 30px; width: auto; } #globalFooter nav ul li:nth-child(odd) { clear: none; } #globalFooter nav ul li a { background: url(../img/icon_arrow_gray_gte_768.png) left center no-repeat; border: none; padding-left: 12px; width: auto; } #globalHeader nav ul:after, #globalHeader div.search form:after, #pickup:after, .columnWrapper:after, div.indexBoxes section.child:after, div.indexBoxes section.child a div.captionBox:after { content: ""; display: block; clear: both; } /* 追加した記述△△△*/ }
最終的な @media screen and (min-width:960px)内の記述
@media screen and (min-width:960px){ #globalHeader .headerInner { width: 960px; } #globalHeader nav.menu ul, #globalHeader nav.menu.open ul { width: 960px; } #globalHeader nav.menu ul li a, #globalHeader nav.menu.open ul li a { height: 55px; } #body { width: 960px; } #pickup h2 { padding: 15px 0; } #pickup div.round h3 { font-size: 20px; } #pickup div.round div { height: 152px; } #pickup div.round div p img { width: auto; } #pickup div.tabContents p.text { margin: 21px 10px; } #globalFooter nav ul { width: 948px; } }
