レスポンシブwebデザイン
画面に今回はPC表示時のレイアウトを実装します。
それに先立ち、レスポンシブWebデザインとは、端末の画面幅に応じて表示が変わるWebデザイン設計のことをおさえておきます。
PCの完成イメージは以下です。
次に以下のフォルダ・ファイルを作成します。
いままでのフォルダ内に作成はしません。
responsiveimages
cssstyle.css
reset.css
index.html
次にindex.htmlを以下のように編集します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TECH CAMP DEMO</title>
</head>
<body>
</body>
</html>
デフォルトのcssをリセットします
* {
box-sizing: border-box;
}
html,
body,
ul,
li,
h1,
h2,
p,
div {
margin: 0;
padding: 0;
}
body {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN W3", sans-serif;
color: #3b4043;
}
li {
list-style: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
a {
text-decoration: none;
color: #3b4043;
}
本来、このリセットCSSは自作するのではなく、世界中の有志のエンジニアが作成したファイルを読み込むことが一般的です。
cssを読み込む為index.htmlを以下のように編集します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TECH CAMP DEMO</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
</body>
</html>
フォントを設定するため、index.htmlを編集します
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet">
次に画像をダウンロードしておき、imageフォルダにいれておく
PCのレイアウトの実装に入ります。
最初にマークアップします。
index.htmlの11行目以降に下記を追加します。
<header class="header">
<div class="inner">
<img src="./images/logo.png" alt="" class="logo" />
</div>
</header>
<!-- /.header -->
<main class="main">
<div class="inner">
<h1 class="page-heading">記事一覧</h1>
<div class="card__wrapper">
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
<div class="card">
<img src="./images/image.png" alt="" class="card__img" />
<div class="card__body">
<h2 class="card__title">記事タイトルが入ります</h2>
<p class="card__summary">
記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。記事の要約が入ります。
</p>
</div>
</div>
</div>
</div>
</main>
<!-- /.main -->
<footer class="footer">
<p class="copyright">Copyright © 2020 TECH CAMP DEMO All rights reserved.</p>
</footer>
<!-- /.footer -->
</body>
</html>
ここでブラウザで確認しましょう。
画面に収まらないので縮小した場合のものを表示します。
最後にスタイリングをします。
style.cssを以下のように編集します。
.header {
background-color: #f1f8fe;
margin-bottom: 48px;
padding: 10px 0;
}
.inner {
width: 1024px;
margin: 0 auto;
}
.logo {
width: 100px;
}
.page-heading {
font-size: 30px;
margin-bottom: 28px;
}
.card__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.card {
width: calc((100% - 50px) / 3);
margin-bottom: 40px;
}
.card__img {
margin-bottom: 16px;
}
.card__title {
font-size: 24px;
margin-bottom: 8px;
}
.card__summary {
font-size: 18px;
}
.footer {
background-color: #999;
padding: 10px 0;
}
.copyright {
text-align: center;
color: #fff;
font-size: 10px;
}
ブラウザで確認しましょう。
正しく実装すると以下のようになります。
