求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

Website of the Year 2016

ここ数年、年末恒例となっている「Website of the Year 2016」が発表されました。CSS Design Awardsが主催しているこの「Website of the Year 2016」は現役クリエイターが審査員となり、デザインやアイデアが素晴らしいWebサイトを選出する、といったものです。最新のトレンドをこれでもかと入れていて、とにかく動きまくるのでブラウザーChrome推奨です。
純粋に見ていて楽しいサイトばかりです。


Website of the Year 2016 - CSS Design Awards


f:id:yachin29:20161205033938p:plain

広告を非表示にする

真言宗 慈照院

真言宗 慈照院(じしょういん)

練馬にある真言宗のお寺です。法事、葬儀など仏事を慈照院にご相談ください。人生のお悩みも承っております。
東京練馬区のご供養のお寺、慈照院では人生・仏事・ご供養のご相談を承ります。


http://www.jishouin.jp

f:id:yachin29:20161203203051p:plain

広告を非表示にする

レスポンシブサイト制作実技試験

使用データ
http://yachin29.webcrow.jp/test_05.zip

レスポンシブデザイン 模擬試験

見本画像

PCレイアウトは960px固定で2カラム。liは130pxで固定。content画像は100%の大きさで使用する。navとfooterの幅は100%。
f:id:yachin29:20160204010627j:plain



タブレットはフルードレイアウトで縮小。liは130pxで固定。
f:id:yachin29:20160204010652j:plain



スマホはフルードレイアウトで1カラム。li幅は3等分
f:id:yachin29:20160204010707j:plain


ブレイクポイントは

  • 960px以上
  • 959px~768px
  • 767px以下

sidebar内のh2にgoogleFontsを使用すること


素材データ
http://yachin29.com/09-test.zip




index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pickupstream</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

<header>
<div class="inner">
<div id="site">
<h1>PickupStream</h1>
</div>
</div>
<nav id="header_nav">
<ul id="main_nav">
<li><a href="url">HOME</a></li>
<li><a href="url">ABOUT</a></li>
<li><a href="url">CONTACT</a></li>
</ul>
</nav>
</header> <!-- #header -->

<div class="inner">
<p id="keyVisual"><img src="img/header2.png" alt="夜景画像"></p>
<div id="content">
<section>
<h2>海岸のデコレーション</h2>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p id="plant"><img src="img/plant.jpg" alt="海浜植物"></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</section>
</div>

<div id="sidebar">
<nav class="menu">
<h2>Main Menu</h2>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地上と地下</a></li>
</ul>
</nav>
<div class="ad">
<p><img src="img/herb2.png" alt="広告"></p>
</div>
</div><!-- #sidebar -->
</div><!-- #inner -->

<!-- ### フッター ### -->
<footer>
<div class="inner">
<div id="footer_txt">
<p id="footer_title">Pickupstream</p>
<p><small>Copyright &copy; Pickupstream, all rights reserved.</small></p>
</div>
<ul>
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a></li>
</ul>
</div>
</footer>

</body>
</html>

スタイルシート

/* reset */
html, body, div, h1, h2, h3,p,ul, li,div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",Meiryo, sans-serif;
}

ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


/* ### レイアウト ### */

header h1 {
  background: url(../img/logo.png) no-repeat;
  width: 360px;
  height: 39px;
  margin: 10px 0;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
.inner {
  width: 960px;
  margin:0 auto;
  overflow: hidden;
}

/* ナビゲーションメニュー */

nav#header_nav {
  background:#b75906;
}
ul#main_nav {
  width: 960px;
  margin: 0 auto;
  font-size: 14px;
  overflow: hidden;
  background: linear-gradient(to top,#bb5700,#b28226);
}
ul#main_nav li {
  float: left;
  width: 130px;
}
ul#main_nav li a {
  display: block;
  padding: 15px 0 13px;
  border-right: solid 1px #fff;
  color: #ffffff;
  text-align: center;
}
ul#main_nav li a:hover {
  background-color: #035;
}
p#keyVisual {
  margin-bottom: 30px;
}
#content{
  width: 620px;
  float: right;
  margin-bottom:30px;
}
section h2 {
  font-size: 25px;
  line-height:28px;
	color:#185A68;
	border-left: solid 30px #185A68;
	margin: 0 0 6px;
	padding: 0 0 0 3px;
}
section p.new{
	margin:0 0 10px;
}
section p {
  margin-top: 20px;
  line-height: 1.5;
}
section img{
	border:8px solid #185A68;
	box-sizing:border-box;
}

/*サイドバー*/
#sidebar {
  width: 300px;/*バナーを100%で表示させる為*/
  float: left;
}
#sidebar h2{
	font-family: 'Lobster', cursive;
}
.menu{
  margin-bottom:30px;
}
.ad {
  margin-bottom: 30px;
}

nav.menu h2 {
  font-size: 25px;
  color: #3F7A8C;
  margin: 0 0 5px;
}

nav.menu ul {
	border-top: solid 1px #aaaaaa;
}

nav.menu li {
  border-bottom: solid 1px #aaaaaa;
}
nav.menu li a {
  display: block;
  font-size: 14px;
  color: #666666;
  padding: 10px 0 10px 20px;
  background: url(../img/listmark.png) no-repeat 0 50%;
}
nav.menu li a:hover {
  background-color: #def;
}
footer {
  color: #ffffff;
  background-color: #185A68;
  padding: 10px 10px 20px;
}
footer p#footer_title {
  font-size: 18px;
  padding: 10px 0;
  font-weight: bold;
}
#footer_txt {
  width:50%;
  float:left;
}
footer ul {
  overflow:hidden;
  width:30%;
  float: right;
  margin-top:20px;
}
footer li {
  float:left;
}
footer li a {
  display:block;
  color:#FFFFFF;
  font-size:40px;
  margin-left:20px;
}
footer li a:hover {
  color: #FFCC33;
}
@media screen and (max-width:959px){

header h1 {
  background-size: contain;
  width: 300px;
  margin-left:10px;
}
.inner {
  width: 100%;
}

ul#main_nav {
  width: 100%;
}

#content{
  width: 64.58%;
  margin: 0 0 30px;
  padding-right:10px;
  box-sizing:border-box;
}



/*サイドバー*/
#sidebar {
  width: 31.25%;
  padding-left:10px;
  box-sizing:border-box;
}

img {
  max-width: 100%;
}
}

@media screen and (max-width:767px){

ul#main_nav li {
  width: 33.33%;
}
ul#main_nav li:last-child a {
  border-right: none;
}
#content {
  width: 100%;
  padding:0 10px;
  box-sizing:border-box;
  float: none;
}
#content p {
  font-size:16px;
}
#content p#plant,.ad p{
	text-align:center;
}
#sidebar {
 	width:100%;
  padding:0 10px;
  margin-top:20px;
  box-sizing:border-box;
  float: none;
}
footer small {
  font-size: 12px;
  font-weight: normal;
}
#footer_txt {
  width:100%;
  float:none;
}
footer ul {
  overflow:hidden;
  width:100%;
  float: none;
  margin-top:20px;
}
footer li a {
  margin-left:0;
  margin-right:10px;
}
}

Flexboxを使ったレイアウト

Flexbox(Flexible Box Layout Module)

FlexboxはCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わったりと、イマイチ使いづらさがありましたが、最近のモダンブラウザーでは利用に難がなくなり充分使えるようになりました。IEのサポートポリシーの変更により、今後普及してくる技術の1つです。これを使う事でfloatを使って作っていたレイアウトが感覚的に作れるようになります。


視覚で見るのが非常に解りやすいです。
www.youtube.com

メリット
  • 少ない記述で簡単に横並びにできる!
  • 横並びになった要素の高さが最初から揃ってる!
  • 要素を上下左右、好きな順序に並び替えられる!
  • 高さの異なる横並びの要素を、簡単に上下中央揃え!

などなど、本来CSSでは出来ずにjQueryなどで行っていた事が非常に簡単に出来るようになります。

デメリット

無し!(強いて言えば一部のブラウザーにバグがあり)

ブラウザーのFlexboxのサポート状況
最新のサポート状況をhttp://caniuse.com/#search=flexboxなどで必ずチェックしましょう

f:id:yachin29:20161130115839j:plain
※2016年11月


Flexboxの基本

flexboxレイアウトを使うには親要素のdisplayプロパティに「flex」を指定するだけです。今回は「ul」要素を使います。

ul {
  display: flex;
}

f:id:yachin29:20160212221400j:plain

f:id:yachin29:20160212222603j:plain

flex-direction

flex-direction」プロパティを設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。
flex-direction: row; で左から右
       row-reverse; で右から左
       column; で上から下
       column-reverse; で下から上

ul {
  width:600px;
  margin: 20px;
  display: flex;
  flex-direction: row;
}
flex-wrap

flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flex-wrap: nowrap;(初期値)は各アイテムの幅が親要素の幅に収まるように縮小される。
flex-wrap: wrap; 各アイテムの幅が親要素の幅に収まらない場合、下に回り込みます。

justify-content

「justify-content」プロパティは、flexアイテムを一行に配置します。(text-alignの指定と類似)

justify-content: flex-start;(初期値)flexコンテナの左側に配置されます。
justify-content: flex-end; flexコンテナの右側に配置されます。
justify-content: center; 中央に配置されます。
justify-content: space-between; 最初と最後のアイテムは端に、残りは等間隔で配置されます。
justify-content: space-around; 全てのアイテムが等間隔に配置されます。

子要素に指定

order

「order」プロパティは、display: flexを指定している親要素に配置される子の順番をコントロールします。
order: 1;
order: 2;
order: 3;

今までfloatやpositionを多用しなければ出来なかった様なレイアウトが少ないコードで簡単に組めるので、ぜひ色々なレイアウトを実際に組んでみましょう。
実際に「order」プロパティを使って3カラムレイアウトを組んでみましょう。

<body>
<nav>
  <ul class="main-nav">
    <li><a href="#" class="logo">Logo</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</nav>

<div class="main">
<section class="col-1">
<h1>Column 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo. Sed ex leo, porttitor sit amet lectus et, pretium eleifend ipsum.</p>
</section>

<section class="col-2">
<h1>Column 2</h1>
<p>Morbi non semper sapien. Suspendisse elementum interdum metus, in volutpat lectus consectetur id. Praesent vulputate ipsum eget lectus tempus tempus. Nullam ut lobortis risus, eu tempor tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<p>Integer vel pellentesque elit. Sed faucibus magna vitae metus ornare, ut pulvinar leo blandit. Mauris tincidunt ante nec quam maximus iaculis ut id lorem. Integer nec ligula faucibus, sollicitudin elit at, maximus tortor.</p>
</section>

<section class="col-3">
<h1>Column 3</h1>
<p>Integer commodo, risus vel viverra bibendum, massa massa consectetur felis.</p>
</section>
</div>
</body>


スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*Flexboxスタイル*/

.main-nav, .main {
  display: flex;
}
.main-nav li:first-child {
  margin-right: auto;
}
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
  display: block;
  padding: 15px;
}
.main-nav .logo {
  background: #4584b1;
}

/* Main contents */
.main section {
  flex: 1;
  margin: 10px;
  border-radius: 5px;
  background: #F5F0CF;
  padding: 15px;
}
.main .col-2 {
  flex: 2;
}
.main h1 {
  color: #E6AC27;
}
.main p {
  margin-top: 10px;
  font-size: 18px;
}


/* Mobile */
@media screen and (max-width: 767px) {
.main {
    flex-direction: column;
}
}

illustratorのアピアランス機能を使ったバナー作成

f:id:yachin29:20161128202628j:plain
f:id:yachin29:20161128202643j:plain
f:id:yachin29:20161128202658j:plain
f:id:yachin29:20161128202725j:plain
f:id:yachin29:20161128202749j:plain
f:id:yachin29:20161128202801j:plain
f:id:yachin29:20161128202810j:plain
f:id:yachin29:20161128202829j:plain
f:id:yachin29:20161128202907j:plain
f:id:yachin29:20161128202921j:plain


文字の加工
f:id:yachin29:20161128203035j:plain
f:id:yachin29:20161128203049j:plain
f:id:yachin29:20161128203058j:plain
f:id:yachin29:20161128203111j:plain
f:id:yachin29:20161128203120j:plain
f:id:yachin29:20161128203128j:plain
f:id:yachin29:20161128203142j:plain

素材

http://yachin29.com/Illustrator/pop-ai.zip

モバイルファーストサイトの制作・PC部分を完成させる

960px用のレイアウトに変更

960px以上のレイアウトは基本的にはタブレットと同じですが、タブレット時に「768px」と固定値で指定している部分を「960px」に書き換えましょう。また、グローバルナビの高さも画像本来の高さである55pxに変更させます。
その他もろもろの細かい箇所も適宜変更させていきましょう。

アコーディオンメニューをスマホ時のみに有効にする

今のままではタブレット・PC時もアコーディオンメニューの開閉が出来てしまうので、スマホ時のみに有効になるようにjQueryを書き換えましょう。

jQueryでの幅取得「window.innerWidth」

jQueryで要素の横幅を取得する方法は「width()」、「innerWidth()」、「outerWidth()」などがありますが、これらではブラウザのスクロールバーを除外した横幅しか取得されず、数px、CSSで設定しているブレイクポイントと数px誤差が出てきています。
なので、ブラウザーの幅を取得したい場合は「window.innerWidth」を使いましょう。


変更前

$('.toggle h2').on('click touchstart',function(){
 $(this).siblings('dl').slideToggle(300);
		 $(this).find('span').toggleClass('close');//findはthis要素の子孫要素の中限定で指定
		 return false;
});


変更後

$('.toggle h2').on('click touchstart',function(){
if($(window).width() <= 767){ 
	$(this).siblings('dl').not(':animated').slideToggle(300);
	 $(this).find('span').toggleClass('close');//findはthis要素の子孫要素の中限定で指定
  };
		 return false;
});


また、

.resize( )

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません(documentやhtmlでは機能しません)。



完成データ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ネットスマート|モバイルサイト</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="apple-touch-icon" href="touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>
<body>
<div id="container">
<header id="globalHeader">
<div class="inner">
<h1>株式会社ネットスマート</h1>
</div>
<nav>
<p id="menuToggle">メニュー<a href="#" id="btn">
<span id="btn-icon"></span></a></p>
<ul id="menu">
  <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="content">
<div id="slide">
<ul class="bxslider">
  <li><img src="img/img_keyvisual_01_sp.jpg" class="switch"></li>
  <li><img src="img/img_keyvisual_02_sp.jpg" class="switch"></li>
  <li><img src="img/img_keyvisual_03_sp.jpg" class="switch"></li>
</ul>
</div><!--/slide-->

<div class="alert">
<ul>
  <li><a href="#"><div>メンテナンスのお知らせ</div></a></li>
</ul>
</div><!--/alert-->

<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">
<p><a href="#"><img src="img/img_pickup_cms.png" alt="CMS"></a></p>
</div><!--/round-->
<p class="text">低価格&amp;高機能なCMS導入。<br>充実の管理画面でサイト運用を効率的に。</p>
</div><!--/tabContents-->

<div class="tabContents" id="seo">
<div class="round">
<p><a href="#"><img src="img/img_pickup_seo.png" alt="SEO"></a></p>
</div><!--/round-->
<p class="text">検索ワードを短期間で上位表示。<br>スマートフォンサイトにも対応します。</p>
</div><!--/tabContents-->

<div class="tabContents" id="social">
<div class="round">
<p><a href="#"><img src="img/img_pickup_social.png" alt="ソーシャル"></a></p>
</div><!--/round-->
<p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
</div><!--/tabContents-->
</section> <!--pickup-->


<div class="columnWrapper"><!--レスポンシブ用のwrapper-->
<div class="indexBoxes">
<ul>
  <li><a href="#"><h2>サービス紹介</h2>
        <div class="captionBox"><img src="img/img_index_service.jpg" alt="サービス紹介">
        <p>全てのインターネットユーザーにスマートさを。</p></div></a>
  </li>
  
  <li><a href="#"><h2>実績紹介</h2>
       <div class="captionBox"><img src="img/img_index_proven.jpg" alt="実績紹介">
        <p>これまでに手がけたサービス、制作事例をご紹介します。</p></div></a>
  </li>
  
  <li><a href="#"><h2>会社概要</h2>
    <div class="captionBox"><img src="img/img_index_corporate.jpg" alt="会社概要">
    <p>企業沿革、コーポレートメッセージなどご紹介します。</p></div></a>
  </li>
    
  <li><a href="#"><h2>採用情報</h2>
    <div class="captionBox"><img src="img/img_index_recruit.jpg" alt="採用情報">
    <p>私たちの理念に共感でき、ともに未来を創っていける仲間を募集しております。</p></div></a>
  </li>
</ul>
</div><!--/indexBoxes-->

<section class="seminar toggle">
<h2><a href="#">セミナー<span class="plus-icon close"></span></a></h2>
<dl class="informationLink se"><h5></h5>
<dt>2016年8月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年6月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</section><!--/seminar-->
</div><!--/columnWrapper-->


<section class="information toggle">
<h2><a href="#">お知らせ<span class="plus-icon"></span></a></h2>
<dl class="informationLink">
  <dt>2016年3月18日</dt><dd><a href="#">採用情報を更新しました</a></dd>
  <dt>2016年3月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd>
  <dt>2016年3月1日</dt><dd><a href="#">サービスが紹介されました</a></dd>
  <dt>2016年2月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd>
</dl>
</section><!--/information-->
</div><!--/content-->

<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"><small>&copy;2016 Net Smart Co., Ltd. All rights Reserved.</small></p>
</footer>
</div><!--/container-->
</body>
</html>
スタイルシート
@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,
address,ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*  共通部分
---------------------------------------------------------- */
body {
  color: #222;
  font: 14px/1.3 ; /*font指定のショートハンド*/
  -webkit-text-size-adjust: 100%; /*古いIOS対応*/
}
a {
  color: #222;
}

#container {
    overflow-x:hidden;
    /*overflow: hidden;  overflow-xがダメな場合はこっち*/
    position:relative;
}
/*  レイアウト
---------------------------------------------------------- */
/*  Header  */
#globalHeader {
  background: linear-gradient(to bottom,#E8EAF6, #ffffff); /*W3C*/
  border-bottom: 1px solid #ccc;
  padding: 10px 5px;
  overflow:hidden;
}
#globalHeader h1 {
  width: 120px;
  float: left;
  background: url(../img/logo.png) no-repeat;
  background-size: contain;
  padding: 5px 0 0 5px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
/*  content  */
#slide img {
  max-width: 100%; /*フルードイメージ*/
}

/* Alert */
.alert {
  background: #ddd;
  padding: 10px;
}
.alert ul {
  background: #fff;
  border: 1px solid #ababab;
  border-radius: 5px;
}
.alert ul li a {
  background: url(../img/icon_alert_2x.png) no-repeat 10px 10px; /*最初から高画質ディスプレイ用に大きいサイズを使用*/
  display: block;
  padding: 12px 20px 12px 40px;
  background-size: 21px;
}

/* Pick Up */
#pickup {
  background:#5C6BC0;
  color: #fff;
  padding: 5px;
}
#pickup h2 {
  color: #fff;
  font-size: 14px;
  padding: 10px 5px;
}
#pickup ul.tab {
  display: table; /*表組みのようなレイアウトになる*/
  width: 100%;
}
#pickup ul.tab li {
  display: table-cell;
  width: 33.33%;
}
#pickup ul.tab li a {
  background: linear-gradient(to bottom, #eeedf2, #717171 4%, #2b2b2b 74%);
  border: 1px solid #444444;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #fff;
  display: block;
  font-weight: bold;
  margin: 0 2px;
  padding: 10px 0;
  text-align: center;
}
#pickup ul.tab li.current a {
  background: linear-gradient(to bottom, #e9e9e9 0%, #ffffff 29%);
  color: #000;
}
#pickup div.tabContents {
  display: none;
  padding: 0 3px; /*ul.tab liに指定したmarginとborderの分、かさを増す*/
}
#pickup div.tabContents.current {
  display: block;
}

#pickup div.round {
  background: linear-gradient(to bottom, #fff 14%, #dfdddd 100%);
  border: 1px solid #fff;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 10px;
  text-align: center;
}

#pickup div.round a {
  background: url(../img/icon_arrow_black_large.png) no-repeat 100% 50%;
  display: block;
}
#pickup .tabContents p.text {
  margin: 10px;
}
.indexBoxes {
  margin: 0 0 20px 0;
}
div.indexBoxes ul {
  border-bottom: 1px solid #ccc;
}

.indexBoxes ul li,
section.seminar h2,
section.information h2 {
  background: linear-gradient(to bottom, #ffffff, #efefef);
  border-top: 1px solid #ccc;
}
.indexBoxes ul li a {
  display: block;
  background: url(../img/icon_arrow_black.png) no-repeat 100% 50%;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
}
.seminar h2 a, .information h2 a {
  display:block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
  position: relative;
}

dl.informationLink dt {
  clear: left;
  color: #777;
  float: left;
  margin-top: 12px;
  padding-left: 10px;
  width: 8em;
  z-index: 1;
}
dl.informationLink dd {
  background: url(../img/icon_arrow_gray.png) no-repeat 100% 50%;
  border-top: 1px solid #ccc;
  z-index:10;
}
dl.informationLink dd a {
  display: block;
  margin: 0;
  padding: 12px 30px 12px 10em;
}

.information dl {
  display:none;
}
/*  Footer
---------------------------------------------------------- */
#globalFooter nav ul {
  background: #eaeaea;
  overflow: hidden;
}
#globalFooter nav ul li {
  border: 1px solid #ccc;
  border-bottom: none;
  box-sizing: border-box;
  float: left;
  text-align: center;
  width: 50%;
}
#globalFooter nav ul li a {
  display: block;
  padding: 10px 0;
}

#globalFooter nav ul li:nth-child(odd) {
  border-left: none;
  clear: left;
}

#globalFooter nav ul li:nth-child(even) {
  border-right: none;
  margin-left: -1px;
}

#globalFooter p#copyright {
  background:#3F51B5;
  color: #fff;
  padding: 15px 0;
  text-align: center;
}


/*  ドロップダウンメニュー
---------------------------------------------------------- */
#globalHeader nav {
  float: right;
}
#globalHeader nav p#menuToggle {
  display: block;
  background: #333;
  border: 1px solid #444;
  border-radius: 5px;
  color: #fff;
  line-height: 36px;
  padding-left: 6px;
  position:relative;
  z-index:9999;
}
#btn {
  float: right;
  background-image: url(../img/bg_line.png);
  background-position: 0 60%;
  background-repeat: repeat-y;
  background-size: 2px auto;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  padding-left: 20px;
  margin-left: 10px;
}
#btn-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  margin: -1px 0 0 -11px;
  transition: .2s;
  background: #FFF;
}
#btn-icon:before, #btn-icon:after {
  display: block; content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: #FFF;
  transition: .3s;
}
#btn-icon:before {
  margin-top: -8px;
}
#btn-icon:after {
  margin-top: 6px;
}
#btn .close {
  background: transparent;
}
#btn .close:before, #btn .close:after {
  margin-top: 0;
}
#btn .close:before {
  transform: rotate(-45deg);
}
#btn .close:after {
  transform: rotate(-135deg);
}

/*クリックしたら出てくるメニュー部分*/
ul#menu {
  background: #333;
  border-bottom: 1px solid #000;
  position: absolute;
  right:-100%;
  top: 59px;
  width: 100%;
  height:100vh;
  z-index: 999;
  transition:0.4s;
}
ul#menu.drow {
  right:0;
}
ul#menu li {
  border-top: 1px solid #000;
}
ul#menu li a {
  border-top: 1px solid #666;
  color: #fff;
  display: block;
  padding: 10px;
}
ul#menu li:first-child,
ul#menu li:first-child a {
  border-top: none;
}

/*+ボタン*/
.plus-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: #222;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1px;
  transition: 0.2s;
}
.plus-icon:after {
  display: block;
  content: "";
  width: 24px;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top:-1px;
  background: #222;
  transform: rotate(90deg);
  transition: 0.4s;
}

/*マイナスボタンの記述*/
.plus-icon.close {
  background: transparent;
}
.plus-icon.close:after {
  transform: rotate(0);
}

/*レスポンシブデザイン用の追加記述*/
div.indexBoxes .captionBox{
  display: none;
}
div.indexBoxes h2 {
  font-size: 16px;
  font-weight: bold;
}
@media screen and (min-width:768px){

/*タブレットレイアウト*/
#globalHeader {
  border-bottom:nome;
  padding: 10px 0;
  overflow: visible;
}
.inner {
  width:768px;
  margin:0 auto;
}
#globalHeader h1 {
  width: 235px;
  height: 55px;
  float: none;
}

/*ナビゲーション部分*/
#globalHeader nav {
  background: url(../img/bg_nav_header.png) left top repeat-x;
  float: none;
  margin: 0;
  padding: 0;
}
#globalHeader nav p#menuToggle {
  display: none;
}

ul#menu {
  overflow: hidden;
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  margin: 10px auto;
  width: 768px;
  height:44px;
  padding: 0;
  position: static; /*スマホ部分で使っているpositionのリセット*/
  transition:none;
}
ul#menu li {
  background: left top no-repeat;
  background-size: 100%;
  border: none;
  float: left;
  width: 25%;
}
ul#menu li a {
  border: none;
  display: block;
  height: 44px;
  padding: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
ul#menu li.service {
  background-image: url(../img/nav_header_service.png);
}
ul#menu li.proven {
  background-image: url(../img/nav_header_proven.png);
}
ul#menu li.corporate {
  background-image: url(../img/nav_header_corporate.png);
}
ul#menu li.recruit {
  background-image: url(../img/nav_header_recruit.png);
}
ul#menu li a:hover {
  background: #fff;
  opacity: 0.2;
}

/*content部分*/
#content {
  margin: 10px auto 0;
  width: 768px;
}
.alert {
  margin-top: 18px;
  padding: 10px;
}
/*タブパネル*/
#pickup ul.tab {
  display: none;
}
/*タブレット・PC時のみ表示させたいもの*/
#pickup h3,
#pickup div.tabContents,
div.indexBoxes div.captionBox {
  display: block;
}
#pickup {
  margin-top: 18px;
  padding: 0 18px 0;
  overflow: hidden;
}
#pickup h2 {
  font-size: 18px;
  padding: 10px 0;
}
#pickup div.tabContents {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}
#pickup div.round {
  border-radius: 10px;
}
#pickup div.tabContents p.text {
  margin: 10px 10px;
  line-height: 1.6;
}

/*indexBoxエリアのスタイル*/
.columnWrapper {
  overflow: hidden;
}
div.indexBoxes {
  float: left;
  margin-top: 20px;
  width: 68%;
}
div.indexBoxes ul {
  border: none;
  overflow: hidden;
}
div.indexBoxes ul li {
  float: left;
  margin-bottom: 12px;
  width: calc(50% - 20px);
  margin-right: 20px;
  border-top: none;
  background: none;
}
div.indexBoxes ul li a {
  padding: 0;
}
div.indexBoxes li h2 {
  border: 1px solid #CCC;
  box-sizing: border-box;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #ffffff, #efefef);
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
  margin-bottom: 20px;
}
div.indexBoxes ul li a {
  background-image: none;
}
div.indexBoxes ul li img {
  float: left;
  border: 1px solid #ccc;
  padding: 3px;
  margin-right: 10px;
}
div.indexBoxes ul li p {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
}

/*アコーディオン部分*/
section.seminar {
  float: right;
  width: 32%;
  margin-top: 20px;
  display:block;
}
 
section.information {
  border: none;
  margin-top: 18px;
  margin-bottom:30px;
  display:block;
}

section.seminar h2,
section.information h2 {
  border: 1px solid #ccc;
  border-radius: 5px;
}

dl.informationLink dt {
  padding: 0 10px;
  width: auto;
  line-height: 1.8;
}

dl.informationLink dd {
  background: none;
  border-top: none;
  border-bottom: 1px solid #ccc;
  line-height: 1.8;
}

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;
}

.information dl {
  display: block;
}

/*  Footer
---------------------------------------------------------- */
#globalFooter nav ul {
  width: 100%;
  margin: 0 auto;
}
#globalFooter nav ul li {
  border: none;
  box-sizing: border-box;
  float: left;
  text-align: center;
  width: auto;
  width:25%;
}
#globalFooter nav ul li a {
  display: block;
  padding: 20px 0;
  font-size:14px;
}
#globalFooter nav ul li:nth-child(odd) {
  border: none;
  clear:none;
}
#globalFooter nav ul li:nth-child(even) {
  border-right: none;
  margin-left: 0;
}

.plus-icon  {
  display:none;
}
}
@media screen and (min-width:960px){
.inner {
  width:960px;
}
ul#menu {
    width: 960px;
    height:55px;
}
ul#menu li a {
  height: 55px;
}
#content {
  width: 960px;
}
}

javascript

// JavaScript Document

$(function(){
//ウィンドウサイズによる画像置換

  var sizeChange = $('.switch'), // 置換の対象とするclass属性。
  pcName = '_pc', // 置換の対象とするsrc属性の末尾の文字列
  spName = '_sp',// 置換の対象とするsrc属性の末尾の文字列
  replaceWidth = 641; // 画像を切り替えるウィンドウサイズ。


  sizeChange.each(function(){
  var $this = $(this);
  function imgSize(){
  if(window.innerWidth > replaceWidth) { // ウィンドウサイズが641px以上であれば_spを_pcに置換する。
   $this.attr('src',$this.attr('src').replace(spName,pcName));
   } else {
      $this.attr('src',$this.attr('src').replace(pcName,spName));
			}
		}
		$(window).resize(function(){imgSize();});
	imgSize();
	});


  // ヘッダーメニュー
  $("#btn").on('click touchstart',function() {
    $("#menu").toggleClass('drow'); //ドロワーメニューのクラス移動
    $("#btn-icon").toggleClass("close");//ハンバーガーメニュー用
    return false;
  });


  // タブパネル
  $('.tab a').on('click touchstart',function(){ //#pickupの中の.tab a
    $(this).parent().addClass('current').siblings('.current').removeClass('current');/*#pickupの中の.tabの中のaがthisで、クリックされるとa要素の親要素のliにクラス名currentがaddされる。さらにもし他のliに既にクラス名currentが付いている場合は削除する*/
    var tabTarget = $(this).attr('href');
    $( tabTarget ).addClass('current').siblings('.current').removeClass('current');
    return false;
  });

 // アコーディオン
/*$('.toggle h2').on('click touchstart',function(){
 $(this).siblings('dl').slideToggle(300);
		 $(this).find('span').toggleClass('close');//findはthis要素の子孫要素の中限定で指定
		 return false;
});*/
	

$('.toggle h2').on('click touchstart',function(){
if($(window).innerWidth() <= 767){ //仮
	$(this).siblings('dl').not(':animated').slideToggle(300);
	 $(this).find('span').toggleClass('close');//findはthis要素の子孫要素の中限定で指定
  };
 return false;
});

$(window).resize(function(){
	  $('dl.informationLink').hide();//スマホの時
if($(window).innerWidth() > 767){ 
      $('dl.informationLink').show();//タブレット以上の時
		$('.information span').removeClass('close');//PCから戻る時に邪魔な.closeを削除するため
    } else {
       $('dl.informationLink').hide();//タブレット以上の時
      $('dl.se').show();
    }
});

});