2カラムレイアウト(2)
ysd-lab.jp
SHELLY'S
NEWS
PROFILE
DISCOGRAPHY
MEDIA/LIVE
CONTACT
TOPICS
2013.10.30
TV/CM日本グランプリ 主演賞に選ばれました!
2013.09.12
【重要】チケット発送料金の変更について
2013.08.02
勝手ながら、8月12日〜16日まで夏期休暇とさせていただきます。
2014.01.01
WORLD TOUR 応募について
EVENT/LIVE
WORLD TOUR
テレビ番組 応募受付開始
Copyright © SHELLY’S All Rights Reserved.
HTML記述例
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【コーディング練習】SHELLY'S </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>SHELLY'S</h1>
<nav class="gnav">
<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">DISCOGRAPHY</a></li>
<li><a href="#">MEDIA/LIVE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<main class="main-content">
<div class="key-visual">
<h2><img src="img/mainvisual.png" alt="「あなたに出会えてよかった。」2013.11.01 RELEASE"></h2>
</div>
<div class="wrapper">
<div class="content">
<h3>TOPICS</h3>
<dl>
<dt>2013.10.30</dt><dd>TV/CM日本グランプリ 主演賞に選ばれました!</dd>
<dt>2013.09.12</dt><dd>【重要】チケット発送料金の変更について</dd>
<dt>2013.08.02</dt><dd>勝手ながら、8月12日〜16日まで夏期休暇とさせていただきます。</dd>
<dt>2013.04.01</dt><dd>WORLD TOUR 2014.01.01 応募について</dd>
</dl>
</div>
<div class="content">
<h3>EVENT/LIVE</h3>
<ul>
<li><img src="img/event_1.png" alt=""></li>
<li><img src="img/event_2.png" alt=""></li>
</ul>
</div>
</div>
</main>
<footer class="footer">
<p><small>Copyright © SHELLY'S All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body {
color: #333;
font-size: 16px;
font-family: sans-serif;
line-height: 1.0;
}
.container {
width: 960px;
margin: 0 auto;
}
.wrapper {
display: grid;
grid-template-columns: 66% 28%;
gap: 6%;
margin-bottom: 40px;
}
.header {
padding: 40px 0 20px;
text-align: center;
}
.header > h1 {
width: 146px;
height: 106px;
margin: 0 auto 40px;
background: url(../img/logo.png) no-repeat center top;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.gnav > ul {
display: flex;
}
.gnav li {
width: calc(100% / 5);
letter-spacing: .05em;
}
.gnav a {
display: block;
line-height: 60px;
border-right: 1px solid #666;
}
.gnav li:first-child a {
border-left: 1px solid #666;
}
.key-visual {
margin-bottom: 40px;
}
.content > h3 {
width: 180px;
margin-bottom: 10px;
background: url(../img/headline_bg.png) no-repeat left top;
font-size: 15px;
text-align: center;
line-height: 28px;
}
.content dl {
display: grid;
grid-template-columns: 7em 1fr;
font-size: 14px;
}
.content dt, .content dd {
line-height: 3.6;
border-bottom: 1px dashed #666;
}
.content li {
margin-bottom: 10px;
}
.footer {
padding: 20px 0;
text-align: center;
}