レスポンシブ：企業サイト - Webデザインのこと、いろいろ

f:id:sankoblog:20160727102614p:plain

<!doctype html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>TimeSwitch｜トップ</title>
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-title" content="TimeSwitch">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont-->
<link rel="stylesheet" href="css/style.css">
<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">
<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
</head>

<body>

<header>
<div class="g_nav">
<h1><a href="#">TimeSwitch</a></h1>
<nav>
<ul class="header_nav">
<li><a href="#" class="this">トップ</a></li>
<li><a href="#">沿革</a></li>
<li><a href="#">事業紹介</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav> 
</div><!--.g_nav-->
</header>

<div id="container">   
<div id="billboad">
<a href="#"><img src="img/header.jpg" alt="#"></a>
<div class="billboad_overlap">
<h2>TimeSwitchは、データの蓄積と<br>分析・解析のサービスを提供します。</h2>
</div><!-- .billboad_p -->
</div><!-- #billboad -->

<div class="features_float">
<a href="#">
<section class="features">
<i class="fa fa-database" aria-hidden="true"></i>
<h3 class="h3_white">データの分析・解析</h3>
<p class="p_white">目的に応じてさまざまな角度から<br>
データを分析・解析します。</p>
</section>
</a>

<a href="#">
<section class="features  features_margin">
<i class="fa fa-bar-chart-o" aria-hidden="true"></i>
<h3 class="h3_white">わかりやすく視覚化</h3>
<p class="p_white">解析結果はわかりやすく視覚化し、<br>
活用できるようにします。</p>
</section>
</a>

<a href="#">
<section class="features features_margin">
<i class="fa fa-envelope" aria-hidden="true"></i>
<h3 class="h3_white">24時間サポート</h3>
<p class="p_white">24時間サポートでトラブルにも<br>
素早く対応します。</p>
</section>
</a>
</div><!--.features_float-->

<div id="wrapper">
<section class="info">
<h4>お知らせ</h4>
<dl>
<dt>10/15</dt><dd>データセンターのメンテナンスを行います。</dd>
<dt>10/05</dt><dd>Android版アプリ バージョン1.2をリリースしました。</dd>
<dt>09/22</dt><dd>セミナー開催に伴うキャンペーンのお知らせ。</dd>
<dt>09/15</dt><dd>グラフ表示の切替方法がわかりやすくなりました。</dd>
</dl>
</section>

<section class="sns">
<h5>最新情報はこちらでも配信しています</h5>
<ul id="sns_kind">
<li class="twitter sns_common"><a href="#"><i class="fa fa-twitter fa_common"></i>Twitter</a></li>
<li class="facebook sns_common"><a href="#"><i class="fa fa-facebook fa_common"></i>Facebook</a></li>
<li class="google sns_common"><a href="#"><i class="fa fa-google-plus fa_common"></i>Google+</a></li>
</ul>
</section>
</div><!--#wrapper-->

</div><!--#container-->

<footer><p>Copyright &copy; TimeSwitch</p></footer>
</body>
</html>

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

/***********************************/
/* reset */
html, body, div, h1, h2, h3, h4, h5, p, ul, li, dl, dt, dd {
  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; /* 下線を消す */
	cursor: pointer;
	}
img {
  border: 0;
  vertical-align: bottom;
}
article, aside, footer, header, main, menu, nav, section { display: block; }
/***********************************/
/* font */
html { font-size: 62.5%; }
body { font-size: 14px; } body { font-size: 1.4rem;}
h1 { font-size: 32px; } h1 { font-size: 3.2rem; }
h2 { font-size: 24px; } h2 { font-size: 2.4rem; }
h3 { font-size: 20px; } h3 { font-size: 2.0rem; }
h4 { font-size: 18px; } h4 { font-size: 1.8rem; }
h5 { font-size: 16px; } h5 { font-size: 1.6rem; }
p { font-size: 16px; } p { font-size: 1.6rem; }
ul { font-size: 16px; } ul { font-size: 1.6rem; }
small { font-size: 10px; } small { font-size: 1.0rem; }

/***********************************/
header {
	width: 100%;
	border-bottom: 1px dotted #E1E1E1;
}
.g_nav {
	width: 1140px;
	overflow: hidden;
	margin: 20px auto;
}
h1 {
	width: 22%; 
	float: left;
	height: 33px;
	/*文字を隠す*/
	background: url(../img/logo.png) no-repeat top left;
	white-space: nowrap;
	text-indent: 100%;
	oerflow: hidden;
}
h1:hover {
	opacity: 0.7;	
	cursor: pointer;
	}

/****** navigation ******/
.header_nav {
	width: 42%;
	float: right;
	overflow: hidden;
}
.header_nav li {
	float: left;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 33px;
}
.header_nav li a {
	display: block;
	height: 33px;
	padding: 0 20px;
	color: #000;
	border-left: 1px solid #FFF;
	box-sizing: border-box;
	transition: 0.3s;
}
.header_nav li a:first-child {
	border-right: none;
}
.header_nav li a:hover{
	background: #E1E1E1;
}
.header_nav li a.this {
	background: #E1E1E1;
}

/***********************************/
#container {
	width: 1140px;
	margin: 20px auto 0;
}
	
/***********************************/
#billboad {
	position: relative;
	margin-bottom: 20px;
	/*.billboad_p の親要素になるために必要*/
}
#billboad img {
	max-width: 1140px;
}
.billboad_overlap {
	position: absolute; /*imgの上に重なる*/
	bottom: 20px;
	left: 20px;
	z-index: 100;
	background: rgba(255,255,255,0.7);
}
.billboad_overlap h2 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.8;
	padding: 20px;
}

/****** 会社の特徴 フロート ******/
.features_float {
	width: 100%;
	clear: both;
	overflow: hidden;
	margin-bottom: 40px;
}
.features {
	float: left;
	width: 32%;
	transition: 0.2s;
}
.features_margin {
	margin-left: 2%;
}
.features:hover { opacity:0.7; }

/****** h3 詳細の設定 ******/
.h3_white {
	padding: 14px 0;
	color: #FFF;
	font-size: 2rem;
	text-align: center;
	line-height: 1.5;
	background-color: #1A1A1A;
	}
.p_white {
	padding: 20px 0;
	color: #FFF;
	text-align: center;
	line-height: 1.8;
	background-color: #575757;
	}
.fa-database, .fa-bar-chart-o, .fa-envelope { 
	width: 100%;
	padding:30px 0;
	color: #FFF;
	font-size: 3.2rem; /*fontawesomeのサイズ*/
	text-align:center;
	}
.fa-database { background-color: #38a88f; }
.fa-bar-chart-o { background-color: #f68624; }
.fa-envelope { background-color: #f45c20; }

/****** お知らせと最新情報 ******/
#wrapper {
	width: 100%;
	margin-bottom: 40px;
	overflow: hidden;
	}
.info {
	width: 66%;
	padding: 24px 32px;
	border: 2px solid #CCC;
	float: left;
	box-sizing: border-box;
}
.info h4 {
	margin: 0 0 10px 10px;
	color: #575757;
	font-size: 1.6rem;
 }
.info dt {
	width: 14%;
	margin-left: 18px;
	padding: 10px 10px 10px 0;
	color: #898989;
	font-weight: bold;
	letter-spacing: 0.16rem;
	float: left;
 }
.info dd{
	width: 100%;
	padding: 10px 0;
	color: #000;
	border-bottom: 1px dashed #CCC;
	transition: 0.2s;
 }
.info dd:hover {
	cursor: pointer;
	display: block;
	background: #DFDFDF;
}
/***********************************/
.sns {
	width: 32%;
	margin-left: 2%;
	float: left;
}
.sns h5 {
	display: inline-block;
	width: 100%;
	line-height: 40px;
	margin-bottom: 6px;
	padding: 6px 0;
	
	position: relative;
	z-index: 0;
	
	color: #2B2B2B;
	font-size:14px;
	text-align: center;
	border-radius: 6px;
	background: #E1E1E1;
}
/****** 三角を作る ******/
.sns h5:before {
	content: "";
	border: 8px solid transparent;
	border-top: 8px solid #E1E1E1;
	position: absolute;
	right: 50%;
	bottom: -16px; /*ここで三角の位置が変わる*/
	
}
.sns h5:after{
	content: "";
	border: 8px solid transparent;
	border-top: 8px solid #E1E1E1;
	position: absolute;
	right: 50%;
	bottom: -16px;
}

/****** snsの設定 ******/
#sns_kind li {
	font-weight: bold;
	line-height: 22px;
	letter-spacing: 0.05rem;
	}
#sns_kind li a {
	display: block;
	margin: 10px;
	padding: 10px;
	color: #fff;	
}
.sns_common {
	border-radius: 6px;
	}
.fa_common {
	width: 20px;
	margin-right: 20px;
	font-size: 1.8rem;
}
.sns_common:hover {
	background: #EAEAEA;
	transition: 0.3s;
	}
.twitter { background-color: #55ACEE; }
#sns_kind li.twitter a:hover { color: #55ACEE; }
.facebook { background-color: #3765A3;}
#sns_kind li.facebook a:hover { color: #3765A3; }
.google { background-color: #DB4437;}
#sns_kind li.google a:hover { color: #DB4437; }


/****** footer ******/
footer {
	width: 100%;
	height: 60px;
	background: #E1E1E1;
	clear: both;
}
footer p {
	color: #2B2B2B;
	font-size: 1.4rem;
	text-align: center;
	line-height: 60px;
	letter-spacing: 0.05rem;
}
/***********************************/

/****** タブレット ******/
@media screen and (max-width:768px){
	
header {
	width: 100%;
	border-bottom: none;
}
.g_nav {
	width: 100%;
	overflow: hidden;
	margin-top: 0px;
	margin-bottom: 24px;
}
h1 {
	width: 96%; 
	margin: 2%;
	float: none;
	height: 33px;
}
/****** navigation ******/
.header_nav {
	width: 98%;
	margin-left: 2%;
	float: none;
}

/***********************************/
#container {
	width: 100%;
	margin: 0 auto;
}
/***********************************/
#billboad {
	margin-bottom: 14px;
}
#billboad img {
	max-width: 100%;
}

/****** 会社の特徴 フロート ******/
.features_float {
	width: 100%;
	margin-bottom: 0px;
}
.features {
	float: none;
	width: 96%;
	margin: 2%;
}

/****** h3 詳細の設定 ******/
.h3_white {
	padding: 14px 0;
	font-size: 1.6rem;
	}
.p_white {
	padding: 15px 0;
	font-size: 1.2rem;
	}

/****** お知らせと最新情報 ******/
#wrapper {
	width: 100%;
	margin-bottom: 20px;
	overflow: hidden;
	}
.info {
	width: 96%;
	margin: 2% 2% 4% 2%;
	float: none;
}
.info dt {
	width: 14%;
	margin-left: 18px;
	padding: 10px 10px 10px 0;
	float: left;
 }
.info dd{
	width: 100%;
	padding: 10px 0;
 }
/***********************************/
.sns {
	width: 96%;
	margin: 2%;
	float: none;
}
.sns h5 {
	width: 100%;
}
}

/****** スマホ ******/
@media screen and (max-width:599px){
header {
	margin-bottom: 10px;
}
/****** navigation ******/
.header_nav li {
	font-size: 1.2rem;
}
.header_nav li a {
	padding: 0 10px;
}
/***********************************/
#container {
	width: 100%;
}
/***********************************/
#billboad img {
	max-width: 100%;
}
.billboad_overlap {
	bottom: 10px;
	left: 10px;
}
.billboad_overlap h2 {
	font-size: 1.2rem;
	padding: 10px;
}

/****** お知らせと最新情報 ******/

.info {
	padding: 20px ;
}
.info h4 { margin-left: 0; }
.info dt {
	width: 20%;
	margin-left: 4px;
	padding: 14px 10px 10px 0;
 }
.info dd{
	width: 100%;
	padding: 10px 0;
	line-height: 1.5;
 }
}