未経験WEBディレクターのススメ

WEB業界未経験31歳の独身男性がApple製品やAdobeアプリを中心にアウトプットします。

自己学習80時間目【レスポンシブデザイン】作成レビュー!!

f:id:nonpnp:20191026164303p:plain

WEB業界未経験の筆者がWebサイトの作成について触れていきます!

WEB制作会社への就職を決意してからの自己学習時間「100時間」をアウトプットしていきたいと思います。今回はレスポンシブデザインを作成していきます!

 

 

f:id:nonpnp:20191028211631p:plain

【レスポンシブデザインの作成】

f:id:nonpnp:20191218005726j:plain

レスポンシブデザインを使うメリット

スマートフォンの普及に伴い必須デザインとなった。

これまでは複数のファイルを作成していたので工数の短縮。

 

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」の略

WEBブラウザの横幅全体を100vwとしている。

よってレスポンシブデザインに向いている単位である。

 

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;

 

 

さて!これで完成になります。どのようになったでしょうか?

《プレビュー》 

f:id:nonpnp:20191121052040p:plain

f:id:nonpnp:20191121052044p:plain

こちらがPC画面表示ですね!

 

f:id:nonpnp:20191121052114p:plain

f:id:nonpnp:20191121052126p:plain

そしてこちらがレスポンシブデザインですね。

画像は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;

  }

}