PC版を作成
- ロゴは、幅300pxで作成する
- テキストは、架空
- コンテンツ幅「960px」
- footer部は、positionでブラウザー下部に固定
unsplash.com
ウェブサンプル株式会社
ホーム
会社概要
事業内容
アクセス
お問い合わせ
私たちはWebで価値を想像する会社です。
ウェブサンプルについて
ウェブサンプルは、世界のサンプルサイト制作をリードしつづける日本発のグローバルカンパニーです。「サンプル・シンプル・ヨクワカル！」をモットーに、今後もわかりやすく利用価値の高いサンプルづくりに邁進してまいります。
お知らせ
2022年03月23日
メディア掲載のお知らせ
2022年02月14日
サンプル2022出展のお知らせ
2022年01月25日
スタッフブログを更新しました
2022年01月10日
サンプルワークショップ開催
Copyright © 2022 websample
文書構造作成
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ウェブサンプル株式会社</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1><a href="#"><img src="img/logo.png" alt="ウェブサンプル株式会社"></a></h1>
<nav class="gnav">
<ul>
<li class="current"><a href="index.html">ホーム</a></li>
<li><a href="about.html">会社概要</a></li>
<li><a href="services.html">事業内容</a></li>
<li><a href="access.html">アクセス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="key-visual">
<p class="catch-copy">私たちはWebで価値を想像する会社です。</p>
</div>
<main class="main-content">
<section class="about">
<h2>ウェブサンプルについて</h2>
<p>ウェブサンプルは、世界のサンプルサイト制作をリードしつづける日本発のグローバルカンパニーです。「サンプル・シンプル・ヨクワカル！」をモットーに、今後もわかりやすく利用価値の高いサンプルづくりに邁進してまいります。
</p>
</section>
<section class="news">
<h2>お知らせ</h2>
<dl class="news-list">
<dt>2022年03月23日</dt>
<dd><a href="#">メディア掲載のお知らせ</a></dd>
<dt>2022年02月14日</dt>
<dd><a href="#">サンプル2022出展のお知らせ</a></dd>
<dt>2022年01月25日</dt>
<dd><a href="#">スタッフブログを更新しました</a></dd>
<dt>2022年01月10日</dt>
<dd><a href="#">サンプルワークショップ開催</a></dd>
</dl>
</section>
</main>
</div>
<footer class="footer">
<p><small>Copyright © 2022 websample</small></p>
</footer>
</body>
</html>
Gridの場合
@charset "URF-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:
"Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
line-height: 1.8;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
.header {
display: flex;
align-items: flex-end;
padding: 20px 0;
}
.header h1 {
width: 200px;
margin-right: auto;
}
.gnav ul {
display: flex;
}
li + li {
margin-left: 20px;
}
.key-visual {
display: flex;
justify-content: center;
align-items: center;
height: 450px;
background: url(../img/visual.jpg) no-repeat center center;
background-size: cover;
margin-bottom: 40px;
}
.catch-copy {
color: #fff;
font-size: 36px;
font-family: serif;
font-weight: bold;
}
.main-content {
display: grid;
grid-template-columns: 1.6fr 1.4fr;
}
.about {
padding-right: 30px;
border-right: 1px dotted #666;
}
.news {
padding-left: 30px;
}
.news-list {
display: grid;
grid-template-columns: 140px 1fr;
}
h2 {
margin-bottom: 6px;
color: #279e98;
font-size: 28px;
}
.news dd {
color: #0077d9;
text-decoration: underline;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 20px;
background-color: #95c3c1;
color: #fff;
text-align: center;
}
.main-content {
display: flex;
}
.about {
width: 52.2%;
padding-right: 30px;
border-right: 1px dotted #666;
}
.news {
width: 47.8%;
padding-left: 30px;
}
h2 {
margin-bottom: 6px;
color: #279e98;
font-size: 28px;
}
.news-list {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.news dt {
width: 35%;
padding-right: 1.0em;
}
.news dd {
width: 64%;
color: #0077d9;
text-decoration: underline;
}
