2カラムレイアウト(4)
ysd-lab.jp
HI University
大学案内
学部・大学院
国際交流
入試情報
キャンパスライフ
Information
2013.10.30
オープンキャンパス11月20日 開催!
2013.09.12
【重要】男子寮の料金プラン変更について
2013.08.02
iWDC&iSFC 2013 WORKSHOPについて
2013.04.01
今年度の挨拶 —学長より
夏のトマム7ふしぎ
冬のトマム7ふしぎ
Copyright © HI University All Rights Reserved.
HTML記述例
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>HI University</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<h1 class="logo"><img src="img/logo.png" alt="HI University"></h1>
<nav class="gnav">
<ul>
<li><a href="#">大学案内</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>
</header>
<div class="container content">
<div class="key-Visual">
<img src="img/mainvisual.png" alt="">
</div>
<main class="main-content">
<div class="news">
<h3>Information</h3>
<dl>
<dt>2013.10.30</dt><dd>オープンキャンパス11月20日 開催!</dd>
<dt>2013.09.12</dt><dd>【重要】男子寮の料金プラン変更について</dd>
<dt>2013.08.02</dt><dd>iWDC&iSFC 2013 WORKSHOPについて</dd>
<dt>2013.04.01</dt><dd>今年度の挨拶 —学長より</dd>
</dl>
</div>
<div class="wrapper">
<p class="banner"><img src="img/event_1.png" alt="夏のトマム7ふしぎ"></p>
<p class="banner"><img src="img/event_2.png" alt="冬のトマム7ふしぎ"></p>
</div>
</main>
</div>
<footer class="footer">
<p><small>Copyright © HI University All Rights Reserved.</small></p>
</footer>
</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 {
background-color: #e7f0f4;
border-top: 6px solid #045ed5;
color: #222;
font-size: 16px;
font-family:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
line-height: 1.0;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.content {
display: flex;
gap: 40px;
padding: 40px 0;
}
.header {
padding: 40px 0 30px;
background-color: #fff;
}
.header > .container {
display: flex;
align-items: center;
}
.header h1 {
width: 132px;
margin-right: auto;
}
.gnav {
margin-bottom: 20px;
}
.gnav > ul {
display: flex;
gap: 40px;
}
.news {
margin-bottom: 40px;
padding: 12px 12px 15px;
background-color: #fff;
}
h3 {
margin-bottom: 6px;
padding-bottom: 6px;
color: #045ed5;
font-size: 18px;
font-family: serif;
border-bottom: 3px solid #045ed5;
}
dl {
display: flex;
flex-wrap: wrap;
width: 450px;
font-size: 15px;
}
dt {
width: 8em;
padding: 8px 0;
border-bottom: 1px dashed #333;
}
dd {
width: 73%;
padding: 8px 0;
border-bottom: 1px dashed #333;
}
.wrapper {
display: flex;
gap: 40px;
margin-bottom: 20px;
}
.footer {
padding: 40px 0 50px;
background-color: #045ed5;
color: #fff;
font-size: 14px;
text-align: center;
}