自己学習80時間目【レスポンシブデザイン】作成レビュー!!
WEB業界未経験の筆者がWebサイトの作成について触れていきます!
WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はレスポンシブデザインを作成していきます!
【レスポンシブデザインの作成】
レスポンシブデザインを使うメリット
スマートフォンの普及に伴い必須デザインとなった。
これまでは複数のファイルを作成していたので工数の短縮。
HTML
HTMLを記載していきますが、前回まで使用したHTMLを流用していきます。
viewportを記述する
Viewportとは?
表示領域を設定する為に必要な記述
スマートフォンでは文字のサイズや、タップすることを考慮しなければならない。
正しく記述する(meta要素 content属性)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ののくんのサンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
表示が切り替わる地点〜ブレイクポイント〜
レスポンシブデザインでは横幅を基準にC S Sを切り替える
様々なサイズがあるので、一概に〇〇pxが良いなどは無いので
ターゲットにより、使い分ける。
今回は600pxで進めてい来ます。
メディアクエリを記述する
C S Sに記述する
@media screen and (max-width:600px) {
/* 画面サイズが600px以下の場合に適用 */
C S S
ブラウザでの表示確認
デベロッパツールを起動する
Google Chrome上で右クリック→検証→スマホ表示→機種選択
様々な端末が表示されますので、試してみましょう。
メディアクエリの中にC S Sを記述する
文字サイズを指定する
今までpx表記をしてきましたが、あえてvw表記をします。
vwとは「vewport width」の略
よってレスポンシブデザインに向いている単位である。
body {
font-size: 3.5vw;
}
見出しサイズを指定する
h1 {
font-size: 7.2vw;
}
h2 {
font-size: 6vw;
}
ヘッダー要素のレイアウト調整
header要素の横幅指定
header {
width: auto;
margin: 0 5%;
}
ロゴの位置調整
.logo {
float: none;
margin-top: 60px;
text-align: center;
}
ナビの位置調整
.global-nav {
float: none;
margin-top: 40px;
text-align: center;
}
.global-nav li {
display: inline;
float: none;
margin: 0 8px;
}
メインエリアのレイアウト調整
コンテンツの表示位置や横幅、余白の指定
#wrap {
margin-top: 40px;
padding: 35px 0 0;
}
.content {
width: 100%;
}
.main {
float: none;
width: auto;
margin: 0 5%;
}
画像を調整する
画像の幅調整
h2 img {
max-width: 100%;
}
メインビジュアルを入れ替える
メディアクエリを使うと別の画像を表示させることもできる。
#portfolio {
background-image: url(../images/bg-portfolio-sp.png);
}
サイドバーのレイアウト調整
サイドバーの位置と幅を調整する
.sidebar {
width: auto;
float: none;
margin: 0;
}
表示領域の余白、背景を指定する。
padding: 30px 10% 10px;
background-color: #f7f6f4;
さて!これで完成になります。どのようになったでしょうか?
《プレビュー》
こちらがPC画面表示ですね!
そしてこちらがレスポンシブデザインですね。
画像はiPhone表記です。
《使用した書籍》
では、最後にこの80時間の学習を支えてくれた書籍を紹介します。
約80時間の学習で使用しました。
最後尾にはタグ一覧もあり、長く使えそうです。
HTML&CSSとWebデザインが1冊できちんと身に付く本
著者:服部雄樹
サンプルコードがある事と、写真が用意されているので
楽にコーディングすることが出来ました。
初めてチャレンジする人にオススメしたいです。
レスポンシブデザインのソースコード
【H T M L】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ののくんのサンプルページ</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
<link href="css/stylenon.css" rel="stylesheet">
</head>
<body id="portfolio">
<!-- header始まり -->
<header>
<div class="logo">
<a href="index.html"><img src="images/logo2.png" alt="SNAPPERS"></a>
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap" class="clearfix">
<div class="content">
<div class="main">
<h1>Portfolio</h1>
<p>これまでに撮影した写真や映像作品を掲載しています。</p>
<section>
<h2><a href="photograph.html"><img src="images/portfolio-photo.png" alt="PHOTOGRAPH"></a></h2>
<p>ののくんは「街-City」「海-Beach」「森-Forest」の3つの場所で、様々な角度から「人の気配」を撮影します。人が写っていない写真の中にも確かにそこにある、人の気配を感じとっていただけると嬉しいです。<a href="photograph.html">詳しくみる ≫</a></p>
</section>
<section>
<h2><a href="video.html" ><img src="images/portfolio-vide.png" alt="VIDEO"></a></h2>
<p>ののくんは映像作品も撮影しております。ドローンでの空撮やアクションカメラを使用した、屋外でのダイナミックな映像を得意としています。またショートフィルムを映画祭などで上映することもあります。<a href="video.html">詳しくみる ≫</a></p>
</section>
</div>
<aside class="sidebar">
<section>
<h2>Photograph</h2>
<ul>
<li><a href="photograph.html#city">街-City</a></li>
<li><a href="photograph.html#beach">海-Beach</a></li>
<li><a href="photograph.html#forest">森-Forest</a></li>
</ul>
</section>
<section>
<h2>Video</h2>
<ul>
<li><a href="video.html#movie">Movie</a></li>
<li><a href="video.html#short-film">Short film</a></li>
</ul>
</section>
</aside>
</div>
</div>
<!-- wrap終わり -->
<!-- footer始まり -->
<footer>
<small>(C)2017 Hattori-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>
【C S S】
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: #cccccc;
color: #333333;
font-size: 15px;
line-height: 2;
}
p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}
img {
vertical-align:bottom;
}
ul {
margin: 0;
padding: 0;
}
a {
color: #3583aa;
text-decoration: none;
}
a:visited {
color: #788d98;
}
a:hover {
text-decoration: underline;
}
header {
width: 960px;
height: 100px;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 50px;
}
.global-nav {
float: right;
margin-top: 60px;
}
.global-nav li {
float: left;
margin: 0 20px;
font-size: 20px;
list-style: none;
font-family: 'Bitter', serif;
}
.global-nav li a {
color: #ffffff;
}
.global-nav li a:hover {
border-bottom: 2px solid #ffffff;
padding-bottom: 3px;
text-decoration: none;
}
#wrap {
clear: both;
background-color: #ffffff;
margin-top: 220px;
padding: 35px 0;
}
.content {
width: 960px;
margin: 0 auto;
}
footer {
text-align: center;
color: #ffffff;
padding: 20px 0;
background-color: #767671;
}
footer small {
font-size: 12px;
}
#index h1 {
font-size: 100px;
line-height: 1;
color: #ffffff;
font-family: 'Bitter', serif;
margin-bottom: 50px;
border: none;
}
#index .content {
margin-top: 150px;
}
#index p {
font-size: 16px;
color: #ffffff;
}
.btn a {
background-color: #009cd3;
color: #ffffff;
font-size: 20px;
font-family: 'Bitter', serif;
width: 185px;
display: block;
text-align: center;
line-height: 50px;
margin-top: 20px;
border-radius: 5px;
border: 3px solid #009cd3;
}
.btn a:hover {
text-decoration: none;
background-color: #ffffff;
color: #009cd3;
}
#index footer {
width: 960px;
margin: 150px auto 0 auto;
text-align: left;
background-color: transparent;
}
#index {
background-image: url(../images/bg-index.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
#about {
background-image: url(../images/bg-about.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
.main-center {
width: 940px;
margin: 0 auto;
}
h1 {
font-family: 'Bitter', serif;
font-size: 36px;
border-bottom: 1px solid #cccccc;
}
h2 {
font-family: 'Bitter', serif;
font-size: 24px;
}
.icon:before {
content: "";
padding-right: 10px;
border-left: 7px solid #9cb4a4;
}
#about .profile-txt {
width: 540px;
float: left;
}
#about .profile-txt span {
font-weight: bold;
}
#about .profile-image {
float: right;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
section {
margin-bottom: 35px;
}
#about .career th {
width: 240px;
background-color: #f0f0f0;
padding: 12px 0;
border: 1px solid #cccccc;
}
#about .career td {
width: 660px;
padding: 12px 0 12px 40px;
border: 1px solid #cccccc;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
#index #wrap {
background-color: transparent;
margin-top: 0;
padding: 0;
}
#portfolio {
background-image: url(../images/bg-about.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
.main {
width: 700px;
margin: 0 10px;
float: left;
}
.sidebar {
width: 200px;
margin: 0 10px 0 30px;
float: right;
font-family: 'Bitter', serif;
}
a img:hover {
opacity: 0.8;
}
.sidebar h2 {
margin-bottom: 10px;
}
.sidebar ul {
font-size: 16px;
margin-left: 20px;
}
.sidebar ul a {
color: #333333;
}
#photograph {
background-image: url(../images/bg-photograph.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
#photograph .photograph-list li {
float: left;
list-style: none;
margin: 0 20px 15px 0;
}
#photograph .photograph-list li:nth-child(3n) {
margin-right: 0;
}
#video {
background-image: url(../images/bg-video.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
#contact {
background-image: url(../images/bg-contact.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}
#contact .access table {
float: left;
}
#contact .access th,
#contact .access td {
text-align: left;
vertical-align: top;
line-height: 2.5;
}
#contact .access td {
padding-left: 30px;
}
#contact .access iframe {
width: 460px;
float: right;
}
#contact .form {
background-color: #eaeaea;
padding: 30px 50px;
}
#contact .form dl dt {
width: 165px;
padding: 10px 0;
float: left;
clear: both;
}
#contact .form dl dd {
padding: 10px 0;
}
#contact .form .name {
width: 240px;
height: 30px;
}
#contact .form .email {
width: 300px;
height: 30px;
}
#contact .form .tel {
width: 240px;
height: 30px;
}
#contact .form .type {
width: 180px;
height: 30px;
}
#contact .form .message {
width: 660px;
height: 150px;
}
#contact .form button {
background-color: #009cd3;
color: #ffffff;
font-size: 20px;
width: 120px;
display: block;
text-align: center;
line-height: 50px;
border-radius: 5px;
border: 3px solid #009cd3;
margin-left: 165px;
}
#contact .form button:hover {
background-color: #ffffff;
color: #009cd3;
cursor: pointer;
}
#contact .form .required:after {
content: "*";
color: #ff0000;
}
#contact .form .attention {
margin: 20px 0 0 165px;
}
@media screen and (max-width:600px) {
/* 画面サイズが600px以下の場合に適用 */
body {
font-size: 3.5vw;
}
h1 {
font-size: 7.2vw;
}
h2 {
font-size: 6vw;
}
header {
width: auto;
margin: 0 5%;
}
.logo {
float: none;
margin-top: 60px;
text-align: center;
}
.global-nav {
float: none;
margin-top: 40px;
text-align: center;
}
.global-nav li {
display: inline;
float: none;
margin: 0 8px;
}
#wrap {
margin-top: 40px;
padding: 35px 0 0;
}
.content {
width: 100%;
}
.main {
float: none;
width: auto;
margin: 0 5%;
}
h2 img {
max-width: 100%;
}
#portfolio {
background-image: url(../images/bg-portfolio-sp.png);
}
.sidebar {
width: auto;
float: none;
margin: 0;
padding: 30px 10% 10px;
background-color: #f7f6f4;
}
}