Web Design

レスポンシブWebデザインのHTML、CSS、JavaScript

2021年7月29日

レスポンシブWebデザインのHTML、CSS
  • レスポンシブWebデザインのHTML、CSS、JavaScriptを知りたい
  • 「職業訓練校のレスポンシブWebデザインの授業に興味がある

この記事はそんな方へ向けて書いています。

本記事では、職業訓練校で学んだレスポンシブWebデザインのHTML、CSS、JavaScriptを公開します。
コードにコメントアウトを書いていますので、初学者でもわかりやすい記事内容です。

記事後半では、職業訓練校でのレスポンシブWebデザイン学習メモをまとめました。

 記事の信頼性

本記事を書いている私は、2019年1月からWordPressで当ブログを開設(最高で月間62,000PV)。
2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)ので、初心者目線の記事です。

※使用テキスト:HTML&CSS、JavaScriptのきほんのきほん

なお、レスポンシブWebデザインの作り方は、レスポンシブWebデザインの作り方を学びました【職業訓練の復習】で解説しています。

こーいち
職業訓練34〜36日目で学んだレスポンシブWebデザインをまとめていきます。

レスポンシブWebデザインのHTML

レスポンシブWebデザインのHTML、CSS

ケーキ屋のサイトをレスポンシブWebデザインで作りました。

HTML、CSSをどちらから書くのか

HTMLから一気に書くか、HTMLの区分ごとにCSSを書いていくのか。

結論、どちらでもOK。

ただ、CSSを用途に応じて分けるのが吉。
理由は、全ページをCSS1枚で書くと量が長くなるから。

レスポンシブはCSSの記述が多くなります。
通常の2倍までいかないですが、PC版の1.5倍くらいにはなるのが普通。

ゆえに、CSSは用途別(ページ別)に分けたいところです。

今回のサイトのCSSファイルは、以下のとおり。

共通のCSS → common.css
トップページのCSS → top.css
リセットCSS → reset.css

トップページのHTML

index.html

<!DOCTYPE html>
<html lang="ja">
 <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>新宿駅西口から徒歩3分のケーキ屋 | 洋菓子店○○</title>
 <meta name="description" content="新宿駅西口から徒歩3分のケーキ屋 | 洋菓子店○○">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link rel="stylesheet" href="css/common/rest.css">
 <link rel="stylesheet" href="css/common/common.css">
 <link rel="stylesheet" href="css/page/top.css">
</head>

<body id="top" class="home">
 <header>
  <div class="inner">
   <h1 class="log">
    <a href="./"><img src="img/logo.png" alt="洋菓子店〇〇のロゴ"></a>
   </h1>
   <div class="menu_btn"> <!--ハンバーガーメニュー-->
    <span></span>
    <span></span>
    <span></span>
   </div>
   <nav>
    <div class="menu_body">
     <ul>
      <li><a href="#">当店について</a></li>
      <li><a href="#">メニュー</a></li>
      <li><a href="#">お菓子教室</a>
       <ul>
        <li><a href="#">ご参加の流れ</a></li>
        <li><a href="#">参加者の声</a></li>
        <li><a href="#">お申込み</a></li>
       </ul>
      </li>
     </ul>
    </div>
   </nav>
  </div>
 </header>

 <div class="key">
  <div class="inner">
   <p class="sp"><img src="img/logo_white.png" alt=""></p>
   <div class="pc">
    <p>おいしいケーキを<br>
    一人でも多くの<span class="break">お客様に</span><br> /* spanタグはインライン要素 */
    召し上がって<span class="break">いただきたい</span><br>
    <span class="sub_title">それがケーキ屋○○の想いです</span>
    </p>
   </div>
  </div>
 </div>

 <div class="scroll">
  <p>
   <span class="material-icons"> < !--ここから3行がGoogleiconfontのコピー -->
    expand_more
   </span>
  </p>
  <p>scroll</p>
 </div>

    <main class="top_main">
  <section class="top_about row">
   <div class="inner">
    <h2 class="title">ケーキ屋○○について</h2>
     <p>オープンして20年、振りかえれば長い道のりでした。それは、お客さまのよろこぶ顔を思い浮かべながら進んできた一歩一歩の積みかさね。 変わらない、味とこだわり。進化しつづける、お客様へのサービス。どちらも大切にしてきました。これからもケーキ屋○◯は、お客様の心に懐かしく残る様な、そんな洋菓子店であり続けます。</p>
     <p class="btn"><a href="#">ケーキ屋についてもっと見る</a></p>
   </div>
  </section>

  <section class="top_menu row">
   <div class="inner">
    <h2 class="title">メニュー</h2>
    <div>
     <a href="#">
      <figure><img src="img/menu_cake01.jpg" alt="モンブラン">
       <figcaption>モンブラン</figcaption>
      </figure>
     </a>
     <a href="#">
      <figure><img src="img/menu_cake02.jpg" alt="ショートケーキ">
       <figcaption>ショートケーキ</figcaption>
      </figure>
     </a>
     <a href="#">
      <figure><img src="img/menu_cake03.jpg" alt="チョコレートケーキ">
       <figcaption>チョコレートケーキ</figcaption>
      </figure>
     </a>
     <a href="#">
      <figure><img src="img/menu_cake04.jpg" alt="チーズケーキ">
       <figcaption>チーズケーキ</figcaption>
      </figure>
     </a>
    </div>
    <p class="btn"><a href="#">メニュー</a></p>
   </div>
  </section>

  <section class="top_lesson row">
   <div class="inner">
    <h2 class="title">お菓子教室について</h2>
    <div>
     <p class="lesson_img">
      <img src="img/about.jpg" alt="お菓子教室について">
     </p>
     <p class="lesson_text">毎月第1第2土曜日にお菓子教室を開催しています。<br>
     丁寧にレクチャーしますので、小さいお子さんでも安心して参加していただけます。<br>
     家族の楽しい思い出作りに、ぜひご参加ください。</p>
    </div>
    <p class="btn"><a href="#">メニュー</a></p>
   </div>
  </section>

 <div class="bottom_contents row pb0">
  <div class="inner">
   <section class="top_voice">
    <h2 class="title">お客さまの声</h2>
    <dl> <!-- こんなやり方もあり -->
     <dt><img src="img/voice01.jpg" alt="お客さまの声"></dt>
     <dd>
      <p><time datetime="2021-07-31">2021年7月31日</time>参加</p>
      <!-- timeタグだけではブラウザはわからない→datetimeで教える -->
      <p>結城様ご家族</p>
      <p>おもしろかったです。初めての体験で新鮮でした。</p>
     </dd>
    </dl>
    <p class="btn"><a href="#">参加者の声をもっと見る</a></p>
   </section>

   <section class="top_info">
    <h2 class="title">ケーキ屋からのお知らせ</h2>
    <dl>
     <dt><time datetime="2021-08-02">2021年8月2日</time></dt>
     <dd><a href="#">緊急事態宣言について</a></dd>
     <dt><time datetime="2021-07-30">2021年7月30日</time></dt>
     <dd><a href="#">新メニューを発表します</a></dd>
     <dt><time datetime="2021-07-21">2021年7月21日</time></dt>
     <dd><a href="#">新スタッフのブログ更新</a></dd>
     <dt><time datetime="2021-07-08">2021年7月8日</time></dt>
     <dd><a href="#">今月のおすすめ改善メニュー</a></dd>
    </dl>
    <p class="btn"><a href="#">参加者の声をもっと見る</a></p>
   </section>
  </div>
 </div>
</main>

<footer>
 <div class="inner">
  <p class="footer_logo"><img src="img/logo_white.png" alt="洋菓子店CHALON"></p>
  <div class="footer_wrap">

   <div class="footer_left">
    <ul>
     <li><a href="#">当店について</a></li>
     <li><a href="#">メニュー</a></li>
     <li><a href="#">お菓子教室</a></li>
     <ul>
      <li><a href="#">ご参加の流れ</a></li>
      <li><a href="#">参加者の声</a></li>
      <li><a href="#">お申し込み</a></li>
     </ul>
    </ul>
   </div>

   <div class="footer_right">
    <ul>
     <li><a href="#"><img src="img/icon_fb.png" alt="Facebook"></a></li>
     <li><a href="#"><img src="img/icon_tw.png" alt="Twitter"></a></li>
     <li><a href="#"><img src="img/icon_insta.png" alt="Instagram"></a></li>
    </ul>
    <dl>
     <dt>Address</dt>
     <dd>
      <address>
       〒160-1234<br>
       東京都新宿区○○○
      </address>
     </dd>
    </dl>
   </div>

  </div>
  <p class="copy"><small>&copy;ケーキ屋</small></p>
 </div>
</footer>

<p class="to_top">
 <a href="#top">
  <span class="material-icons">
   expand_less /* topに戻る上向きのアイコン*/
  </span>
 </a>
</p>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="js/main.js"></script>

</body>
</html>

Emmet(エメット)のメモ

今回、覚えたEmmet(エメット)は3つです。

Emmet(エメット)とは簡潔な書き方で、コードを展開できる方法です。
ショートカットのようなもので、省エネで作業できるので覚えておいて損はありません。

以下のとおり。

展開前
span*3

展開後
<span></span>
<span></span>
<span></span>

展開前
li*3 > a

展開後
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

展開前
li*3 > a[href=#]

展開後
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

「エメット チートシート」で検索すると、他にもたくさん出てきます。
ぜひ参考にしてみてください。

レスポンシブWebデザインのCSS

レスポンシブWebデザインCSS

リセットCSS
共通のCSS
トップページのCSS

リセットCSS

reset.css

/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/

:where(:not(iframe,canvas,img,svg,video):not(svg*)){all:unset;display:revert}*,::after,::before{box-sizing:border-box}ol,ul{list-style:none}img{max-width:100%}table{border-collapse:collapse}textarea{white-space:revert}

reset.cssの作成手順は、以下のとおり。

手順①:「reset css 2021」で検索し、下記サイトのCSSをコピー
手順②:reset.cssファイルを作成し、ペーストする
手順③:index.htmlの<head>部分に、linkで読み込む

» 参考:2021年、モダンブラウザに適したCSSリセットのまとめ

もちろん、上記サイトじゃなくてもOKです。
たとえば、下記サイトなどでも有用できます。
使い方は、「Rawをクリック → 全選択 → コピー → resetcssに貼り付け」です。
» 参考:https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css

共通のCSS

common.css

@charset 'UTF-8'; /* 文字コード指定(セミコロン必須)*/

/* 主たるブレイクポイント(目安、決まりではない)
960px
520px 
*/

/*=====
全クラス共通 & 汎用クラス
=====*/
html{
 font-size: 62.5%; /* ブラウザは標準16pxが多い→0.625でかけると10px相当→10pxにすれば文字サイズはremでわかりやすくサイズアップできる */
 scroll-behavior: smooth;
}

body{
 font-size: 1.6rem;
 line-height: 2;
 font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Osaka', 'MS Pゴシック', 'MS PGothic', sans-serif;
 color: #333;
 margin: 0;
}
/* ダブルクォートをシングルクォートに変える(ダブルの中にダブルは入れられないから)*/

a{
 text-decoration: none;
 color: #f77237;
}

a:hover{
 opacity: 0.6;
}

.inner{
 max-width: 1000px;
 margin-left: auto;
 margin-right: auto;
}
/* レスポンシブで横スクロールが出るのは良くない → max-widthを使う */

/* 左右に余白を取りたい */
@media screen and (max-width:960px){
 .inner{
  padding-left: 5%;
  padding-right: 5%;
 }
}/*======max-width:960px==========*/

img{
 vertical-align: bottom;
}
/* 画像と画像の隙間を消すために入れる */

.break{
 display: inline-block; /* <span>タグはインライン要素だからインラインブロックに変える → 画面が小さくなったときにちょうどよく改行される */
}

.title{
 text-align: center;
 font-size: 2.6rem;
 line-height: 1;
 margin-bottom: 30px;
 font-weight: normal;
}

.btn{
 margin: 0; /* <p>タグのmarginをとる*/
}

.btn a{
 background-image: linear-gradient(to right,#3cad5a,#307041); 
 /*グラデーションを書くときに使用(線形グラデーション)*/
 /* 向き,最初の色,最後の色*/
 width:270px;
 display: block; /* aタグはインライン要素 */
 color:#fff;
 text-align: center;
 line-height: 70px;
 margin-left: auto;
 margin-right: auto;
}

.pb0{
 padding-bottom: 0!important;
}

/*===============
ヘッダー
===============*/
header{
 position: sticky; /* スクロールしても追尾する */
 top: 0;
 background-color: rgba(255, 255, 255, 0.3); /* 白、透明度0.3 */
 backdrop-filter: blur(10px); /* blur=ぼかし→重なったところがぼける(pxが大きいほどぼかせる)*/
}

header .inner{
 display: flex;
 justify-content: space-between;
 align-items: center; / *ロゴとナビの高さを揃える */
}

header h1{
 margin: 0;
}

header ul{
 margin: 0;
 padding: 0;
}

header .menu_body > ul{
 display: flex;
}

header .menu_body > ul > li{
 margin-left: 30px;
}

header .menu_body > ul li ul{
 display: none;
} /* いったん消す → ホバーで出したいから */

header .menu_body > ul li:hover ul{
 display: block; /* カテゴリを下に出す */
 position: absolute; /* 高さをとる(positionとは要素の位置を決めるプロパティ)*/
}

@media screen and (max-width:960px){
 header nav{
  position: fixed;
  background-color: #faebdf;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* vh=viewport height(表示領域)→ %にしてしまうとnavタグ分だけの指定 */
  padding-top: 64px;
  padding-left: 32px;
  padding-right: 32px;
  opacity: 0;
  visibility:hidden; /* 後述の学習メモで詳細解説 */
  transition: 0.5s;
  }

header.on nav{ /* ハンバーガーメニューをクリックすると出てくる */
 visibility:visible;
 opacity: 1;
}

header .menu_body > ul{
 display: block;
 line-height: 7rem; /* スマホ用に押しやすく間隔をとる */
}

header .menu_body a{
 color: #666; /* グレー */
 display: block; /* 横でもクリックできるように */
}

header .menu_body > ul > li{
 margin-left: 0px;
 font-size: 3rem;
 border-bottom: 1px solid #666;
}

header .menu_body > ul > li:last-child{
 border-bottom: none;
}

header .menu_body > ul li ul{
 display: block;
 position: static; /* absoluteからstatic初期値に直す */
 font-size: 2rem;
 padding-left: 2rem;
}

header .menu_body > ul li ul li{
 border-bottom: 1px dotted #666;
}

header .menu_body > ul li ul li:first-child{
 border-top: 1px solid #666;
}

header .menu_btn{
 width: 24px;
 height: 24px;
 z-index: 100; /* 1でもいい、他にないz-indexがないから */
}

header .menu_btn span{
 display: block;
 height: 2px;
 width:100%;
 background-color: #333;
 transition: 0.3s;
}

header .menu_btn span:nth-child(2){
 transform: translateY(9px);
}

header .menu_btn span:last-child{
 transform: translateY(18px);
}

/*バッテンの考え方→まずは真ん中のバーを消す*/
header.on .menu_btn span:nth-child(2){
 display: none;
}

/*最下段バーを真ん中に移動*/
header.on .menu_btn span:last-child{
 transform: translateY(10px) rotate(-45deg);/*度=degree*/
}

/*最上段バーを真ん中に移動(移動する起点が違うから移動する量が違う*/
header.on .menu_btn span:first-child{
 transform: translateY(12px) rotate(45deg);
}
}/*======max-width:960px==========*/

/*===============
フッター
===============*/
footer{
 background-color: #f77237;
 margin-top: 150px;
 padding-top: 30px;
}

footer a {
 color: #fff;
}

footer ul{
 margin: 0;
 padding: 0;
 list-style: disc;
 list-style-position: inside;
 color: #fff;
}

footer ul ul{
 padding-left: 1.6rem;
}

footer .footer_logo{
 margin-bottom: 30px;
}

footer .footer_wrap{
 display: flex;
 justify-content: space-between;
}

footer .footer_right ul{
 list-style: none;
 display: flex;
}

footer .footer_right ul li{
 margin-right: 10px;
}

footer .footer_right dl{
 color: #fff;
}

footer .footer_right dt{
 border-bottom: 1px solid #fff;
}

footer .footer_right dl dd{
 margin: 0;
 line-height: 1.5;
}

footer p{
 margin: 0;
}

footer .copy{
 color: #fff;
 text-align: center;
}

@media screen and (max-width:960px){
 footer .footer_logo{
  text-align: center;
 }

footer .footer_wrap{
 flex-direction: column-reverse; /* 縦にして逆にする */
}

footer .footer_right ul{
 justify-content: center;
}

footer .footer_right ul li:last-child{
 margin-right: 0;
}

footer .footer_left a{
 display: block;
}

footer .footer_left ul{
 list-style: none;
 font-size: 2.1rem;
 line-height: 3;
}

footer .footer_left > ul > li:not(:last-child){
 border-bottom: 1px solid #fff;
}

footer .footer_left > ul > li > ul > li{
 border-bottom: 1px dotted #fff;
}

footer .footer_left > ul > li > ul > li:first-child{
 border-top: 1px dotted #fff;
}
}/*======max-width:960px==========*/

トップページのCSS

top.css

/*=======
キービジュアル
=======*/
.key{
 background-image: url(../../img/key.jpg);
 height:80vh;
 background-size: cover; /*元画像の縦横比は保持して、要素をちょうどよく覆うサイズに*/
 background-position: center center;
 margin-bottom: 30px;
}

.key .sp{
 display: none ; /*スマホ版は表示させない*/
}

.key .inner{
 display: table;
 height: 80vh;
}
/*tableは中の要素の横幅、高さの思い思いをとるのが特徴*/

.key .inner .pc{
 vertical-align: middle; /*効かない → どうにかしたい → テーブルセルにするのがいい*/
 display: table-cell;
 text-align: center;
}
/*垂直方向に対しての真ん中にするのは面倒、ゆえにtable-cellを使ってセンタリング*/

.key .inner .pc p{
 color: #fff;
 background-color: rgba(247, 114, 55, 0.5);
 font-size: 4.6rem;
 line-height: 1.5;
 font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', serif;
 padding: 46px;
}

.key .inner .pc p span.sub_title{
 font-size: 2.1rem;
}

/*レスポンシブは大きい順に書かないとダメ*/
@media screen and (max-width:750px){
 .key .inner .pc p{
  font-size: 3.6rem;
 }
}/*======max-width:750px==========*/

@media screen and (max-width:520px){
 .key .sp{
  display: table-cell;
  vertical-align: middle;
 }
 .key .inner .pc{
  display: none;
 }
}/*======max-width:520px==========*/

/*=========
スクロール
=========*/
/*トップページにしかスクロールアイコンはないのでtop.cssに書いていく*/
.scroll{
 text-align: center;
}

.scroll p{
 margin: 0;
 line-height: 1;
}

.scroll p span{
 border: 1px solid #707070;
 border-radius: 50%;
}

/*=========
当店について
=========*/
.top_main .row{
 padding-top: 70px;
 padding-bottom: 70px;
}

.top_about h2+p{ /*h2の隣のpタグ*/
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 30px;
 text-align: justify; /*右端の文字のズレを直す*/
}

/*=========
メニュー
=========*/
.top_menu .inner div{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap; /*flexアイテムをサイズダウン時に折り返す*/
 margin-bottom: 30px;
}

/* 上記だけでデフォルトのcssが効き、良さそうに見えるがいったん↓まっさらにする(padding0 margin0)*/

.top_menu .inner div a{
 width: 205px;
}

.top_menu .inner div figure{
 padding: 0;
 margin: 0;
}

.top_menu .inner div figcaption{
 text-align: center;
}

@media screen and (max-width:960px){
 .top_menu .inner div a{
 width: 48%; /*50%にすると真ん中の隙間がなくなる*/
 margin-bottom: 30px;
 }
}/*======max-width:960px==========*/

@media screen and (max-width:520px){
 .top_menu .inner div a{
 width: 60%;
 margin-left: auto;
 margin-right: auto;
 }
}/*======max-width:520px==========*/

/*=========
お菓子教室について
=========*/
.top_lesson{
 background-color: rgba(247, 114, 55, 0.5);
}

.top_lesson .inner div{
 display: flex;
 justify-content: space-between;
 margin-bottom: 30px;
}

.top_lesson .inner div .lesson_img{
 width: 40%; /*レスポンシブなので%が良い*/
 margin: 0;
}

.top_lesson .inner div .lesson_text{
 width: 55%;
 margin: 0;
}

@media screen and (max-width:520px){
 .top_lesson .inner div{
 flex-direction: column-reverse; /* columnに縦並び、逆*/
 }
 .top_lesson .inner div .lesson_img{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
 }
 .top_lesson .inner div .lesson_text{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
 }
}/*======max-width:520px==========*/

/*=========
bottom_contents
=========*/
.bottom_contents .inner{
 display: flex;
 justify-content: space-between;
}

.bottom_contents .inner section{
 width: 48%;
}

/* 参加者の声 */
.top_voice dl{
 display: flex;
 margin: 0;
 margin-bottom: 30px;
}

.top_voice dl dt{
 width: 168px;/ *168pxより小さい携帯端末はないので168pxのままでOK*/
 margin-right: 20px;
}

.top_voice dl dd{
 margin: 0;
}

.top_voice dl dd p{
 margin: 0;
 line-height: 1;
}

.top_voice dl dd p:first-child{
 font-size: 1.2rem;
 margin-bottom: 5px;
}

.top_voice dl dd p:nth-child(2){
 margin-bottom: 15px;
}

.top_voice dl dd p:last-child{
 line-height: 1.5;
}

/* お知らせ */
.top_info dl dt{
 font-size: 1.2rem;
 line-height: 1;
}

.top_info dl dd{
 margin: 0;
 line-height: 1.5;
 margin-bottom: 20px;
}

.top_info dl dd:last-child{
 margin-bottom: 0;
}

.top_info dl{
 margin-bottom: 30px;
}

.top_info dl dt span{ /*newのCSS、spanタグはnew.js*/
 background-color: #f77237;
 color: #fff;
 display: inline-block;
 padding: 3px 5px;
}

/*ブレイクポイントはあくまで目安、変えていい*/
@media screen and (max-width:700px){
 .bottom_contents .inner{
 flex-direction: column;
 }

.bottom_contents .inner section{
 width: 80%;
 margin-left: 0;
 margin-right: 0;
 }

.bottom_contents .inner .top_voice{
 margin-bottom: 140px;
 }

}/*======max-width:700px==========*/
@media screen and (max-width:520px){
 .top_voice dl{
  flex-direction: column;
 }

.top_voice dl dt{
 width: auto;  /*初期値に戻したいauto or 100%*/
 margin-bottom: 10px; /*画像の下*/
 margin-right: 0;
 }
}/*======max-width:520px==========*/

レスポンシブWebデザインのJavascript

レスポンシブWebデザインのJavaScript

ユーザースニペット登録

やり方は後述の学習メモ参照。

css.json

{
 // Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
 // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
 
// same ids are connected.
 // Example:
 // "Print to console": {
 //  "prefix": "log",
 //  "body": [
 //      "console.log('$1');",
 //      "$2"
 //  ],
 //  "description": "Log output to console"
 // }

    "ゴシック体": { /*名前はなんでもOK*/
   "prefix": "sans", /* 他と被らないように名前をつける */
   "body": [ /*配列*/
    "font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Osaka', 'MS Pゴシック', 'MS PGothic', sans-serif;"]
   }, /*カンマが必要*/

    "明朝体": {
   "prefix": "serif", 
   "body": [
   "font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'MS P明朝', 'MS 明朝', serif;"]
   },

  "max-width": {
   "prefix": "mmax", 
   "body": [
    "@media screen and (max-width:$1px){", /*960pxを$1pxに変える*/
    "\t$2",  /*$2にしておく→タブキーでここにくる、\tでタブスペースがあく*/
    "}/*======max-width:$1px==========*/"
    ]
   },

     "min-width": {
    "prefix": "mmin",
    "body": [
     "@media screen and (min-width:$1px){",
     "\t$2",
     "}/*======min-width:$1px==========*/"
     ]
    }
   }

職業訓練校の学習メモ

レスポンシブWebデザインのHTML、CSS

タイトルタグとメタディスクリプション

タイトルタグに何を書くかは重要

なぜなら、タイトルタグはGoogle検索で重要度が高いから。
集客のために、Google検索で上位表示されることが必要だから。

<title>タグはGoogle検索で優先順位が高い
<title>タグにSEOキーワードを入れることが重要
<title>タグの言葉がGoogle検索結果に表示される

「どんなキーワードで引っかかったらサイトが儲かるのか」を考えるのが大事。
さらに、ユーザーにクリックしてもらいやすいタイトルを考えてつけること。

たとえば、ケーキ屋であれば「店名」だけでなく「駅から徒歩何分のケーキ屋○○」など。

店舗名で検索する人は少ないので「地域名(駅名)+ケーキ屋」など。

HTML

<title>新宿区から徒歩3分のケーキ屋 | 洋菓子店○○</title>

SEOとは?

検索エンジン最適化のこと。
サイトをGoogleの検索エンジンに最適化して、上位表示をねらう技術です。

メタディスクリプションも重要

Google検索結果の説明文に表示されるので(されない場合もあり)、クリックされやすい説明文を書いておくこと。

メタディスクリプションはブログで散々書いてきました。
型は以下のとおり。

問題提起
記事を読む価値
読者の行動

たとえば、【初心者向け11選】Webデザインギャラリー・参考サイトのまとめの記事のメタディスクリプションは以下のとおり。

Webデザインの参考サイトを知りたいですか?
本記事は、最新のデザインや技術のトレンド、情報設計の参考になるWebデザインギャラリー参考サイトをまとめました。
この記事を読むことで初心者でも使えるWebデザインの参考サイト11選がわかります。

ただし、タイトルもメタディスクリプションは正解はありません。
Googleの公式発表や成功例、失敗例をたくさん見て、テストし続けるしかないのです。

Googleはアメリカの会社なので、SEOキーワードは「タイトル前方に入れたほうが良い」という意見もあります。

英語では結論が前に来るから
タイトルは左から読むだから

逆に「そこまで意識せずに、ユーザーファーストがすべて」という意見もあります。

こーいち
いずれにせよ、最適解はテストです。

font-size 62.5%の理由【rem】

文字サイズをpxで決めるより、相対的な書き方62.5%としました。
理由は、以下のとおり。

ブラウザは標準で16pxになっていることが多い

16pxを0.625でかけると、10px相当になる

10pxにすれば、以降の文字サイズはremでわかりやすくサイズアップできる

rem(レム)は「root em」の略で、名前のとおり「最上位階層の『em(エム)』」です。

最上位のHTML要素である「HTML」の文字サイズを基準とした相対値で文字サイズを規定します。
メリットは以下のとおり。

親要素の指定の影響を受ける「%やem」に比べて、個々要素の文字サイズ設定がしやすい
HTML要素の文字サイズを調整することで、サイト全体の文字サイズ変更にも対応しやすい

こーいち
シンプルに「親要素の影響を受けない」ということですね。

ユーザースニペット登録

ユーザースニペット登録とは「ショートカットをつくる」みたいなものです。

よく利用するコードや長いコードは、毎回書くのが大変です。
したがって、よく利用するコードはスニペットを登録しておくのが吉。

スニペット登録しておくと、必要なときに簡単にソースコードを呼び出して展開できます。
ゆえに、作業効率を上げることができます。

スニペット(sunippet)は「断片」という意味。
プログラミングなどで再利用可能なソースコードを表すIT用語です。

 ユーザースニペット登録のやり方(CSS版)

Codeメニュー

基本設定

ユーザースニペット

cssで検索

css.jsonをクリックしてファイルをつくる(HTMLの場合は、html.jsonでファイル作成)

デフォルトの記述例「 // "Print to console": { 」以下をコピー&ペースト

以下のように書き換える

一例は、以下のとおり。

css.json

"ゴシック体": { /* 名前はなんでもOK */
   "prefix": "sans", /* 他と被らないように名前をつける */
   "body": [ /*配列*/
    "font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Osaka', 'MS Pゴシック', 'MS PGothic', sans-serif;"]
   }, /*カンマが必要*/

こーいち
登録後はprefixで指定したコードを入力するだけで、配列が出力されます。

配列について詳しくは、下記記事で解説しています。
» 【基礎】JavaScriptの配列の定義方法【今日の日付を出力】

timeタグ【daytime】

timeタグは、ユーザーに対して日時を示すのではなく、検索エンジンに向けて日時を示すもの。

timeタグを使用しないときに比べて、検索エンジンに日時を認識してもらえます。
検索順位がアップするというメリットがあり、SEO対策になります。

さらにdatetime属性を使うことで、検索エンジンやコンピューター側に正確な日付を認識させられます。

HTMLの記述例

<p><time datetime="2021-07-31">2021年7月31日</time>参加</p>

»参考:【初心者向け】timeタグの使い方とdatetime属性の役割を解説

header navのアニメーションについて

下記は「画面サイズ960px以下になったとき、ナビゲーションをどう表示させるか」のHTMLです。

「padding-right: 32px;」までの記述は、ナビの固定、位置、色、表示領域を表しています。

index.html

@media screen and (max-width:960px){
 header nav{
  position: fixed;
  background-color: #faebdf;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* vh=viewport height(表示領域)→ %にしてしまうとnavタグ分だけの指定 */
  padding-top: 64px;
  padding-left: 32px;
  padding-right: 32px;
  opacity: 0;
  visibility:hidden; /* 後述の学習メモで詳細解説 */
  transition: 0.5s;
  }

    header.on nav{ /* ハンバーガーメニューをクリックすると出てくる */
  visibility:visible;
  opacity: 1;
 }

やりたいことは「クリックでパッと出てくるから、アニメーションをつけたい」です。

ダメなやり方は「display:none → display:block」で表示させようとすること。
なぜなら、間が存在しないから。
間が存在しないものは、たとえ「transition 0.5s」を入れてもパッと切り替わるだけ。

違う方法を取るしかないです。

解決策は上記コードのとおり「opacity:0 → opacity;1」とすること。
opacityであれば間が存在するから、移り変わりを表現できる。

ただし、opacityではリンクをクリックできてしまうのが難点。
ゆえに、visibility:hidden;とvisibility:visible;を追記して、クリックさせないようにして解決する。

メモ:visibility:hidden

要素はあるけど見えない状態。
ちなみに、display:noneは要素も取得されず完全にその場にない扱い。

まとめ:感想と気づき

レスポンシブWebデザインのHTML、CSS

細かい論理の積み重ねで作っていく感じがしました。
スニペット登録のやり方は覚える必要があります。
タブレットはマウスオーバーがないことに気づけなかったです。
ハンバーガーアイコンの考え方を再現できるように復習します。
さらにJavaScriptが入ると混乱しそうですが、論理を理解していきたいと思います。

ナビが一番重たい作業、ここをクリアすればあとはサラッと進みがち
Javascript、table-cellの使い方、インライン要素、ブロック要素など、要復習と感じました。
グラデーションボタンやアニメーション、スマホ用に押しやすくするリンクの間隔など新しく学ぶことが多かったです。
週末に今週勉強したことを復習します。

flex-wrap、timeタグ、datetimeなどを学びました。
デフォルトでcssが効いているものを、いったんまっさらにするという考えを忘れないようにします。
「168pxより小さい携帯端末はないので168pのままでOK」というのが印象的でした。
last-child、last-of-type、rowの使い方、pb0、!importantなど再度復習します。
前回のHTML、CSSを学んでから1ヶ月以降くらいなので、ちょうど良い復習のタイミングだと感じました。

【職業訓練の入校式】オリエンテーション内容や服装、自己紹介を解説
【職業訓練の入校式】オリエンテーション内容や服装、自己紹介を解説
職業訓練2日目に自己紹介はなく他己紹介【パソコン基本知識を学ぶ】
職業訓練2日目に自己紹介はなく他己紹介【パソコン基本知識を学ぶ】
【Webデザイン職業訓練】3〜4日目に学んだHTML、CSSの内容
【Webデザイン職業訓練】3〜4日目に学んだHTML、CSSの内容
こーいち
レスポンシブWebデザインは慣れです。

こーいちより

P.S. レスポンシブWebデザインのHTML、CSSを学ぼう。

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

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.