Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
<header id="header">
<h1>MediaSite</h1>
</header>
<div id="contents" class="media">
<div class="inner">
<ul class="media-container clearfix">
<li class="media-list media-hover-01">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-02">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-03">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-04">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-05">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-06">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-07">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-08">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
</a>
</li>
<li class="media-list media-hover-09">
<a href="#" class="media-link">
<img src="http://placehold.it/600x400" width="100%" height="auto" alt="">
<div class="lower-box">
<span class="tag tag-media">メディア</span>
<date class="date">2015 5-15</date>
<p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
</div>
<div class="media-bg">
<p>SNS</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="lib/js/jquery/jquery-1.11.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>widthを33.33%とすることでどのサイズでも均一に表示させることができます。
/* ===================================================================
common style
=================================================================== */
html, body {
padding: 0;
border: 0;
margin: 0; }
ul, ol, li {
text-decoration: none;
list-style-type: none; }
.clearfix {
zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both; }
#contents {
height: 1500px;
position: relative;
z-index: 2;
background-color: #FFFFFF; }
.swiper-container {
width: 600px;
height: 400px; }
.swiper-slide {
position: relative; }
.swiper-slide > img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
/* ===================================================================
header style
=================================================================== */
#header {
background-color: #EEEEEE;
width: 100%;
position: relative;
z-index: 1;
text-align: center; }
#header h1 {
padding: 15px 0;
font-size: 20px;
color: #949494; }
/* ===================================================================
footer style
=================================================================== */
#footer {
border-radius: 3px; }
#contents {
height: 700px;
position: relative;
z-index: 2;
background-color: #FFFFFF; }
.inner {
max-width: 1080px;
margin: 0 auto; }
.swiper-container {
width: 100%;
height: 400px; }
.swiper-slide {
position: relative; }
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10; }
.modal .inner {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
z-index: 10;
min-width: 320px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0; }
.modal .modal-bg {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); }
.modal .btn-close {
position: absolute;
top: -40px;
right: -40px;
width: 40px;
height: 40px;
z-index: 11;
cursor: pointer; }
.modal .btn-close .line {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 2px;
background-color: #FFFFFF; }
.modal .btn-close .line.line01 {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg); }
.modal .btn-close .line.line02 {
background-color: #FFFFFF;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg); }
.media {
text-align: center;
margin-top: 30px; }
.media .media-container {
margin-left: -20px;
text-align: center; }
.media .media-list {
min-width: 320px;
width: 33.33%;
float: left; }
.media .media-list .media-link {
display: block;
margin-left: 20px;
margin-bottom: 20px;
position: relative;
overflow: hidden; }
@media screen and (max-width: 955px) {
.media .media-list {
float: none;
display: inline-block; } }
.media .media-list .lower-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 90px;
background-color: rgba(0, 0, 0, 0.2);
padding: 12px;
box-sizing: border-box;
color: #FFFFFF;
overflow: hidden;
text-align: left; }
.media .media-list .lower-box .tag {
display: inline-block; }
.media .media-list .lower-box .date {
display: inline-block;
font-size: 12px;
position: relative;
top: 1px; }
.media .media-list .lower-box .title {
margin-top: 5px;
line-height: 1.2; }
.media .media-list.media-hover-01 img {
opacity: 0.8;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.media .media-list.media-hover-01:hover img {
opacity: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.media .media-list.media-hover-02 img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.media .media-list.media-hover-02:hover img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.media .media-list.media-hover-03 img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.media .media-list.media-hover-03:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.media .media-list.media-hover-04 img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-04:hover img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-05 img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-05:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-06 img {
-webkit-transform: translateY(-88px);
-ms-transform: translateY(-88px);
transform: translateY(-88px);
-webkit-transition: all 0.6s;
transition: all 0.6s; }
.media .media-list.media-hover-06:hover img {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.6s;
transition: all 0.6s; }
.media .media-list.media-hover-07 img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-07 .title {
opacity: 0.6;
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-07:hover img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-07:hover .title {
opacity: 1;
-webkit-transition: all 1.2s;
transition: all 1.2s; }
.media .media-list.media-hover-08 img {
opacity: 0.8;
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.media .media-list.media-hover-08 .title {
margin-top: 9px; }
.media .media-list.media-hover-08 .lower-box {
-webkit-transform: translateY(48px);
-ms-transform: translateY(48px);
transform: translateY(48px);
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.media .media-list.media-hover-08:hover img {
opacity: 1;
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.media .media-list.media-hover-08:hover .lower-box {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.media .media-list.media-hover-09 {
position: relative; }
.media .media-list.media-hover-09 img {
position: relative;
z-index: 1; }
.media .media-list.media-hover-09 .media-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
opacity: 0;
z-index: 2;
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.media .media-list.media-hover-09 .media-bg > p {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #FFFFFF; }
.media .media-list.media-hover-09 .lower-box {
opacity: 0.8;
z-index: 3;
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.media .media-list.media-hover-09:hover .media-bg {
opacity: 1;
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.media .media-list.media-hover-09:hover .lower-box {
opacity: 1;
-webkit-transition: all 0.5s;
transition: all 0.5s; }
.tag {
display: inline-block;
line-height: 20px;
font-size: 10px;
letter-spacing: 0.04em;
padding: 0 5px;
border-radius: 2px; }
.tag.tag-media {
background-color: #FF9C00; }
/* ===================================================================
index style
=================================================================== */
