Web Design

レスポンシブWebデザインの作り方を学びました【職業訓練の復習】

2021年7月28日

レスポンシブWebデザインの作り方
  • HTML、CSSの基礎理解が終わったけれど、レスポンシブWebデザインは難しいのかな?」
  • 「さらに深く学ぶために、レスポンシブWebデザインの作り方を知っておきたい
  • 「なんとなくの理解を解消したいし、実際の作成手順も見てみたい」

この記事はWebデザイン初心者へ向けて書いています。

 この記事でわかること

職業訓練で学んだレスポンシブWebデザインの作り方
レスポンシブWebデザインの参考サイトギャラリー3選

 本記事の信頼性

2019年1月からWordPressで当ブログを開設(最高で月間62,000PV)
2021年6月からWebデザイン職業訓練校で学んでいます(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん

職業訓練校でHTML、CSSの基礎学習が終わり、レスポンシブWebデザインの作り方を学びました。

本記事では、職業訓練校で学んだレスポンシブWebデザインの作り方をそのまま書いていきます。

この記事を読むことで、レスポンシブWebデザインの大まかな作り方(さわり程度)がわかります。

HTMLCSSの基礎学習が終わっている方は、HTMLCSSのちょっとした復習になるかもしれません。

とはいえ、私はまだまだ初心者。
本記事は、職業訓練校に通い出して33日目の自分用メモです。

こーいち
記事後半ではレスポンシブWebデザインの参考サイト3選をまとめました。

レスポンシブWebデザインの作り方を学びました【職業訓練の復習】

レスポンシブWebデザインの作り方

レスポンシブWebデザインとは

レスポンシブWebデザインとは、アクセスされた端末によって変わるようなレイアウトのこと。

画面の横幅の大きさに応じてcssを切り替えていくのが、レスポンシブサイトです。
CSSを上書きしていくのがポイント。

「CSSは後ろに書いてあるものほど優先順位が高い」ということを覚えておく。

やっちゃいけないことは、CSSを書く順番を変えてしまうこと。
大きい順に書いていかないとダメです。

 Webサイトの2通りの作り方

PC版からつくる
スマホ版からつくる

どちらを先につくったほうが良いのか?

結論、どちらからつくっても大差なしです。

以前はスマホ版からつくることが多かったそうですが。

職業訓練校の使用テキストHTML&CSS、JavaScriptのきほんのきほんはPC版からつくっています。

こーいち
ゆえに、本記事もPC版から作成の流れとなっています。

レスポンシブWebデザインのメリット、デメリット

 レスポンシブWebデザインのメリット

1つのHTMLで多くのデバイスに対応でき、情報の変更などで間違いが少なくなる
画面幅の狭いデバイスから広いデバイスまで、柔軟に対応できる

 レスポンシブWebデザインのデメリット

デバイスごとのレアウトを大幅に変更するのは難しいため、ムリが出てくる場合あり
PCからアクセスする場合、ブラウザの画面幅でレイアウトが変わるためユーザーが戸惑うことがある
スマホ用サイトでも、PC専用の情報が残ってしまうことがあり、重くなる可能性がある

レスポンシブWebデザインでも、レイアウトの種類を多くしすぎないのもあり。
2段階の切り替え程度にすることも多いです。

レイアウトが切り替わる横幅を「ブレイクポイント」といいます。

どのサイズでレイアウトを変えるたらいいのか?
→ 結論として、正しいものはありません。

ゆえに「ブレイクポイント レスポンシブ」で検索してみるのが吉。
たとえば、スマホ520px タブレット960pxなどと出てきます。

【完成版】HTML、CSS

完成版のHTML、CSSは以下のとおり。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>イヤホンジャックの向こう側</title>
 <link rel="stylesheet" href="css/style.css"> <!--index.htmlからstyle.cssを読み込む-->
</head>

<body>
 <div class="container">
  <header>
   <h1>COCOA</h1>
  </header>

  <div class="content">
   <section class="information">
    <h1>イヤホンジャックの向こう側</h1>
    <p class="type">Album</p>
    <div class="description">
     <a href="#"><img src="img/jacket.png" alt="イヤホンジャックの向こう側のジャケット写真"></a>
     <p>COCOA 4枚目のアルバムとなる今作。ジャケットデザインに色鉛筆画家の「カタヒラシュンシ」氏を迎え、音楽と絵のコラボを実現させた一枚。</p>
     <p>HONDA CARS 静岡CM タイアップの「キミのうた」をはじめ、完全書き下ろしの新曲3曲を含む全6曲を収録。<br>
     イヤホンジャックの向こう側に広がる世界を、ぜひご堪能ください。</p>
    </div>
   </section>

   <section class="songs">
    <h2>収録曲</h2>
    <ol class="clearfix"> <!-- olはOrderd Listで番号付きリスト -->
     <li><a href="https://www.youtube.com/watch?v=Kv2EGnprWo8" target="_blank" rel="noreferrer">C#</a></li>
     <li>ワンルームファッションショー</li>
     <li>ハッピータイム</li>
     <li>シャンディガフ</li>
     <li>僕は知らない</li>
     <li>キミのうた</li>
    </ol>
   </section>
  </div>
  <footer>
   &copy;COCOA
  </footer>
 </div>
</body>
</html>

style.css

@import url(sanitize.css); /*sanitize.cssファイルを作り、読み込ませる*/
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap'); /*Googleフォント*/

body{
 background-color: #f0f0f0; /*グレー*/
 padding: 10px;
 font-size: 14px;
 color:#666; /*文字色を濃いめのグレー*/
}

.container{
 /*width: 800px; 800px以下になると横スクロールが出る*/
 max-width: 800px; /*800px以下になるともれなく縮む*/
 margin:0 auto ;
 box-shadow: 0 0 10px rgba(0,0,0,0.3); /*x位置 y位置 ぼかし 色(red,green,blue,alpha(透明度))*/
}

header{
 background-color: #422814; /*茶色*/
 padding: 10px; /*要素内の余白を10px*/
 color: #fff;
}

header h1{
 margin: 0; /*余白をなくす*/
 font-size: 24px;
 font-weight: normal;
 text-align: center;
 font-family: 'Sriracha', cursive; /*Googleフォントの記述(cursiveは代替フォント)*/
}
/*serifは明朝体でお願いという意味*/

.description img{
 float: left; /*浮動化*/
 margin: 0 10px 10px 0;
}

.description img:hover{
 opacity: 0.5; /*透明度*/
}

.information h1{
 font-size: 18px;
 margin: 0 10px 10px 0; /*余白を右、下に10pxずつ*/
 float: left; /*イヤホンとAlbumを並べたいから。ただし、下にあるもの全部が右側にまわりこもうとする、画像も文字も*/
}

.information .type{
 display: inline; /*pタグがblock要素だから、inline要素に変える(Albumの色だけ変えられる)*/
 background-color: #e35a4d; /*ピンク*/
 padding: 3px 5px; /*要素内の余白、上下3px、左右5px*/
 font-size: 80%; /*文字の大きさを少し小さく*/
 color: #fff;
}

/*画像はfloatの影響を受けたくない、ゆえに以下のとおり。*/

.description{
 clear: both; /*leftでもいいが大は小を兼ねるのでboth*/
}

.content{
 background-color: #fff;
 padding: 20px;
}

.songs{
 margin: 0 0 20px;
}

.songs h2{
 clear: left; /*songsだけclearしてOK*/
 font-size: 100%; /*フォントを本文と同じ大きさに*/
 font-weight: normal; /*フォントの太さを通常通りに*/
 margin: 0; /*余白なし*/
 background-color: #e6e4dd; /*薄茶*/
 padding: 5px 10px;
}

.songs ol{ /*数字のリスト*/
 padding: 0; /*要素内余白をなくす*/
 margin: 0; /*余白をなくす*/
 list-style: decimal inside; /*ショートハンド(decimalとは10進数のこと)*/
 /*list-syleの初期はdisc、ゆえに上記はdecimalが必要(書かないとdiscになる)*/
 /*list-style-type: decimal;*/
 /*list-style-position: inside;*/
}

/*floatを切りたい liたち→下に要素がないから切れない*/
.clearfix::after{ 
 content:'';
 clear: both; 
 display: block;/*インラインはclearできない*/
}
/*クラスclearfix 横並びになるものであれば何にでも使える手法*/

.songs li{
 border-bottom: 1px solid #ccc;
 width: 50%;
 padding: 5px 10px;
 float: left; /*li全体にfloatがかかる、width50%だから残りは下に追いやられる*/
}

a{
 color:#666; /*グレー*/
 text-decoration: none;
}

footer{
 text-align: center;
 font-size: 80%;
}

/*画面が600px以下になった時、floatをやめたい*/
@media screen and (max-width:600px) { /*メディアクエリー*/
 .description img{
  float:none; /*回り込みを解除*/
  display: block; /*imgタグはインライン要素だから、余白を取るためにブロック要素に変える*/
  margin: 0 auto; /*画像の中央揃え*/
 }
 header{
  padding: 5px;
 }
 header h1{
  font-size: 12px;
 }
 .songs li{
  float: none;
  width: inherit;/*幅を元に戻す(inheritの意味:継承→親要素olと一緒にする*/
 }
}

floatと解除【clearfix】

「float」は少し難しく感じました。
要素を回り込ませるために使います。

floatの英語の意味は「浮く」
CSSでは「浮動化」の意味。

下記記述でimg画像以降の要素を、右側に回り込ませることができます。

style.css

.description img{
 float: left; 
 margin: 010px10px 0; /*上 右 下 左*/
}

floatのプロパティは、以下のとおり。

left
right
none(初期値)

leftを指定すると、それ以降の要素が右側に回り込んで表示。
ぴったりとくっつくので、画像の右と下に余白を取るため、marginで調整。

ただし、画像以下の要素もすべて回り込んでしまうので注意。

解除するために、下記のclearを使う。

style.css

.description{
 clear: both; /*leftでもいいが大は小を兼ねるのでboth*/
}

clearfixの考え方は以下サイトを参考にしました。
»  参考:CSSのclearfixを完全網羅【初心者でも分かる入門図解付き】

【学習メモ】alt、target="_blank"、noreferrer、font-family

alt属性

alternativeの略称で「代替案」という意味。
画像が表示できなかった場合、どんな情報があるのかをalt属性で知らせる。

target属性

target="_blank"で、新しいウィンドウ(またはタブ)が開いてリンクが表示される。
今見ているページはそのままで、新しいページに移動できて便利。
ただし、次のような理由でわかりにくさもある。

処理速度の低下
「戻る」ボタンで戻れない
ウィンドウの見分けがつかない
スマホなどではタブを切り替える操作が煩雑

rel="noreferrer"

rel属性にnoreferrerを付けることで、参照先に対してリファラ(参照元)のリンクを渡さないようにすることができる。

電話でたとえると、非通知のようなもの。

参照元リンク情報を渡さないことで、渡したくない情報(自分のサイトからの流入やユーザーIDなど)がURLリンクに含まれていても大丈夫になります。

こーいち
脆弱性の解消です。

 font-familyに指定できる値

serif → セリフ体(明朝体)
sans-serif → サンセリフ体(ゴシック体)
monospace → 等幅フォント
cursive → 草書体(少し装飾された手書き感のあるフォント)
fantasy → より遊び心のあるフォント

 HTML要素の分類

セクショニングコンテンツ → <section>などのセクションを分ける要素(例:<nav>、<article>、<aside>など)
ヘッディングコンテンツ → <h1>〜<h6>までの見出しの要素
フレージングコンテンツ → <p>要素など、ページ内のテキスト要素
埋め込みコンテンツ → 動画の埋め込みなど、外部コンテンツ要素
インタラクティブコンテンツ → <button>要素など、ユーザーの操作を受け付ける要素
メタデータコンテンツ → <style>など主に<head>要素内に記述する要素
※ 各要素は重複部分あり

 Go Liveが出ないとき

VScode → 表示 → コマンドパレット → live server:open with live

レスポンシブWebデザインの参考サイトギャラリー3選

レスポンシブWebデザイン

 レスポンシブWebデザインの参考サイトギャラリー3選

順番に解説します。

bookma! v3

Webデザイン参考サイト一覧

Webデザインに特化したブックマークサイト。
特徴は以下のとおり。

サムネイルが大きい
文字検索しかできない
PC、スマホの両方が見れる

PC、スマホのビューを同時に見れるのが大きな特徴。

フィルターでどちらかに絞ることも可能。
» bookma! v3

81-web.com

Webデザイン参考サイト

デザイン性に優れたWebデザインを集めたサイトギャラリーとリンク集。
特徴は以下のとおり。

5,000以上の事例
掲載日の表示あり
サムネイルも大きめで見やすい
PCビュー、スマホビューを閲覧可
日本国内のWebサイト集めたギャラリー
検索はカテゴリ、カラー、タグ、Webフォントで絞り込み可

掲載日が表示されているので、いつ頃のサイトなのか確認可能。
気に入ったデザインは、サムネイル下の「+ボタン」で保存可能。
» 81-web.com

Responsive Web Design JP

Webデザイン参考サイト

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト。
特徴は以下のとおり。

5,200以上の事例集
サムネイルにはスマホ、タブレット、PCが一覧表示
検索は、カテゴリやカラー、技術仕様で絞り込み検索可

スマホ、タブレット、PC表示を一度に確認できるギャラリーサイトです。

ザッピング感覚で3画面のデザインをチェックできます。
» Responsive Web Design JP

Webデザインの参考サイト一覧

Webデザイン参考サイト
【初心者向け11選】Webデザインギャラリー・参考サイトのまとめ

まとめ:職業訓練の復習のやり方を考える【24時間以内に1回】

レスポンシブWebデザインの作り方

職業訓練33日目の悩みは「復習のやり方」です。
なかなか過去の復習に時間を取られて、新しく勉強したことの復習ができずにいました。

結果は、どんどん記憶が失われていく。
復習するときに理解に時間がかかる、という悪循環に。

解決策は、授業を受けてから24時間以内に1回復習することです。

なぜなら、人間の記憶は24時間で74%が失われてしまうから。
» 参考:エビングハウスの忘却曲線とは

エビングハウスの忘却曲線によると、最適な復習のタイミングは以下のとおり。

1回目の復習 → 学習後、24時間以内
2回目の復習 → 学習後、1週間以内
3回目の復習 → 学習後、1ヶ月以内

最大のポイントは24時間以内の復習です。
1日経つと74%失われてしまうので、記憶の抜けを防ぐ最適なタイミングなのです。

さらに、1週間以内、1ヶ月以内と記憶の定着が良くなります。

短時間であってもです。
たとえば10分だけでも。

せっかく学んだことを忘れてしまうのはもったいないこと。

こーいち
24時間以内に1回&短時間でも復習していきます。

こーいちより

P.S. レスポンシブWebデザインの作り方を復習しよう。

関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】
関連記事
【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.