Web Design

【職業訓練Webデザイン】8日目の学習内容をブログにまとめました

2021年6月18日

【職業訓練Webデザイン】8日目の学習内容をブログにまとめました
  • 「職業訓練のWebデザインに通っているブログはないかな?」
  • 「職業訓練のWebデザイン8日目の学習内容を知りたい

この記事は「職業訓練Webデザイン科ではどんなことを学んでいるの?」という方向けです。

 この記事でわかること

職業訓練Webデザイン8日目の学習内容まとめ

 本記事の信頼性

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

職業訓練Webデザイン科8日目は、新サイトのコーディングです。

本記事では、8日目の学習内容についてまとめました。

ちなみに、職業訓練7日目(1週間通った感想)については下記記事で解説しています。
»職業訓練Webデザインに1週間通ってみた感想【良い点、不安な点】

記事後半では、8日目に浮かんだ疑問点と素材集めに使えるサイト一覧をまとめています。

【職業訓練Webデザイン】8日目の学習内容をブログにまとめました

【職業訓練Webデザイン】8日目の学習内容をブログにまとめました

職業訓練8日目から新しいサイト作成(ケーキ屋)が始まりました。

新サイトの構造

 サイト作成手順

①フォルダ名「htdocs」(よく使うが必須ではない)※デザインデータを入れないこと
②フォルダ名「data」(資料用)
③HTMLの作り方(二重構造にしておいて問題なし)※大は小をかねるから

 今回のサイト構造

index.html

<body>
 <header> <!--ヘッダー-->
  <div class=“inner”><div>
 <header>

 <div class="key"> <!--キービジュアル-->
 <div class="inner"><div>
  <div>

 <div class="scroll"> <!--スクロールアイコン-->
  <div class="inner"><div>
 <div>

 <main> <!--主コンテンツ、1ページに一つだけ、メインだから-->
  <section> <!--セクションは見出しが必要なタグ--> <!--ケーキ屋について-->
   <div class="inner"><div>
  <section>

  <section> <!--メニューについて-->
   <div class="inner"><div>
  <section>

  <section> <!--お菓子教室について-->
   <div class="inner"><div>
  <section>

  <section> <!--参加者の声-->
   <div class="inner"><div>
  <section>
 </main>

 <footer> <!--フッター-->
 <div class=“inner”><div>
 </footer>

<body>

メモ

✔︎ 「div>div」で下記がつくれる
<div>
 <div><div>
<div>

✔︎ 「.bottom_contents>div」で下記がつくれる
<div class="bottom_contents">
 <div></div>
</div>

✔︎ <a href=“リンク先”></a>
リンク先を「./」にしておくと自分にもどる

ヘッダーナビ、keyビジュアル、スクロールアイコンでWebフォント

ヘッダーのナビをつくる

index.html

<header>
 <div class="inner">
  <h1><a href="./"><img src="img/logo.png" alt="ケーキ屋"></a></h1>
  <nav> <!-- ナビはulとliで作ることが多い -->
   <ul>
    <li><a href="#">当店について</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="lesson/">お菓子教室</a></li>
     <!--要注意:lessonの前に/をつけない(/から始まることはない)-->
     <!--/後のindex.htmlは省略できる-->
   </ul>
  </nav>
 </div>
</header>

keyビジュアルを入れる

index.html

<div class="key">
 <div class="inner">
  <img src="img/key.jpg" alt="ケーキの想い">
  <!--画像を表現したものをaltに入れる-->
 </div>
</div>

<Img>タグは画像を表示するときに使用します。

スクロールアイコンをつくる

Webフォントとは

ユーザーのフォント環境に関係なく、サーバーからフォントを引っ張ってきて表示させる。

» 参考:Webフォントとは?Webフォントを利用してWebサイトのデザイン性を高めよう

使い方の手順は、以下のとおり。

Google FontsのIconsメニューをクリック
② Developer guideをクリック
③ リンク「https://fonts.googleapis.com/icon?family=Material+Icons」をコピーして、<head>内に<link>タグで貼る
④ IconsメニューからFilledにチェックを入れ、使用したいアイコンを探してクリック → コードをコピーして貼り付け(コード:<span class="material-icons">expand_more</span>)

index.html

<div class="scroll">
 <div class="inner">
  <span class="material-icons">
   expand_more
  </span>
  <p>scroll</p>
 </div>
</div>

Google Fontsとは

Googleが提供するWebフォントのサービス。
無料で利用でき、さまざまな言語のフォントにも対応している点が特徴。

» 参考:Googleフォントとは?Google Fontsとは?使い方や人気のフォントをご紹介!

<main>コンテンツを作り込む

✔︎ ケーキ屋について

index.html

<section class="top_about">
 <div class="inner">
  <h2 class="title">ケーキ屋について</h2>
   <p class="lead">リード文のテキストが入ります。</p>
   <p class="btn"><a href="#">ケーキ屋についてもっと見る</a></p>
 </div>
</section>

<section>タグはh見出しが必要です。

✔︎ メニューについて

index.html

<section class="top_menu">
 <div class="inner">
  <h2 class="title">メニュー</h2>
  <!--画像と文字が一緒で、4つが横に並んでいると見る、たまたま画像に文字がついていると考える-->
   <div class="menu_wrap">
    <figure>
     <img src="img/cake01.jpg" alt="ショートケーキ">
      <figcaption>ショートケーキ</figcaption>
    </figure>
    <figure>
     <img src="img/cake02.jpg" alt="チョコレートケーキ">
      <figcaption>チョコレートケーキ</figcaption>
    </figure>
    <figure>
     <img src="img/cake03.jpg" alt="モンブラン">
     <figcaption>モンブラン</figcaption>
    </figure>
    <figure>
     <img src="img/menu_cake04.jpg" alt="ショートケーキ">
     <figcaption>ショートケーキ</figcaption>
    </figure>
  </div>
  <p class="btn"><a href="#">ケーキ屋の詳細を見てみる</a></p>
  <!-- figureの下には入れない、横並びになる-->
 </div>
</section>

「横に並んでいるものは、必ず何かで括れる」と考えるのが大事です。

classの名前wrap(ラップ)はよく使います(サランラップの意味)。

✔︎ お菓子教室について

<h2>
「画像と文字」の構造を考える
<div>
 <p>タグ → img
 <p>タグ → 文章

index.html

<section class="top_lesson">
 <div class="inner">
  <h2 class="title">お菓子教室について</h2>
  <div class="lesson_wrap">
   <p class="lesson_img"><img src="img/about.jpg" alt="お菓子教室について"></p>
   <!--imgでやってもいいがpタグで括っておくとラク-->
   <p class="lesson_msg">テキストが入ります。<br>
   テキストが入ります。<br>
   テキストが入ります。</p>
  </div>
  <p class="btn"><a href="#">お菓子教室について</a></p>
 </div>
</section>

✔︎ ボトムコンテンツについて

<dl>タグ → 定義リストを表す(definition list)
<dt>タグ → 定義する用語を表す(definition Term)
<dd>タグ → 用語の説明を表す(definition description)

一例は以下のとおり。

<dl>
 <dt>野菜</dt>
  <dd>きゅうり</dd>
  <dd>トマト</dd>
  <dd>ナス</dd>
<dt>果物</dt>
  <dd>バナナ</dd>
  <dd>リンゴ</dd>
  <dd>みかん</dd>
</dl>

index.html

<div class="bottom_contents">
 <div class="inner">
  <section class="top_voice">
   <h2 class="voice_wrap">参加者の声</h2>
   <div class="">
    <p><img src="img/voice01.jpg" alt=""></p>
    <div>
     <p>2021年6月18日参加</p>
     <p>佐藤さんご家族</p>
     <p>とても楽しかったです。子供たちも夢中で作っていました。</p>
    </div>
   </div>
   <p class="btn"><a href="#">受講生の声一覧</a></p>
  </section>

  <section class="top_news">
   <h2 class="title">ケーキ屋からのお知らせ</h2>
   <dl>
    <dt>2021年6月1日</dt>
    <dd><a href="#">更新情報:6月のケーキラインナップ一覧</a></dd>
   </dl>
   <dl>
    <dt>2021年5月15日</dt>
    <dd><a href="#">【重要】新しいケーキが発売されました</a></dd>
   </dl>
   <dl>
    <dt>2021年4月30日</dt>
    <dd><a href="#">いつもありがとうキャンペーン第2弾</a></dd>
   </dl>
   <dl>
    <dt>2021年3月14日</dt>
    <dd><a href="#">リベンジ編|ホワイトデーにお返ししよう</a></dd>
   </dl>

   <p class="btn"><a href="#">お知らせ一覧</a></p>
  </section>
 </div>
</div>

<footer>コンテンツの作り込み

プラグイン htmltag(拡張機能)をインストール → ドラッグして使う

win → alt + w(たぶんwrapの略)
mac → option + w(wrap)

✔︎ フッターが左右に分かれる構造の一例CSS

style.css

<div class="footer_wrap">
 <div class="footer_left">
  <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>

 <div class="footer_right">
  <ul>
   <li><a href="#"><img src="img/icon.png" alt="Facebook"></a></li>
   <li><a href="#"><img src="img/icon.png" alt="Twitter"></a></li>
   <li><a href="#"><img src="img/icon.png" alt="Instagram"></a></li>
  </ul>

  <dl>
   <dt>Address</dt>
    <dd>
     <address>
      テキストが入ります。
     </address>
    </dd>
  </dl>
 </div>

</div>

✔︎ smallタグを使う

<p class="copy"><small>&copy; ケーキ屋の名前</small></p>

reset.cssを作る

フォルダ名はすべて小文字か大文字にする(パスが切れるから)。
どっちでもいいが、普通は小文字にする。

VScodeのファイルを選択肢しない状態で新規フォルダを作成

reset.cssファイルをつくる

リセットCSSを探してくる(so whatまで)→ reset.cssにペースト
» html5 Doctor

htmlにreset.cssを読み込ませる(自分から見て、CSSフォルダの中のreset.css)

✔︎ 注意点

cssの前にスラッシュを入れない(/css/reset.css)。
ファイルパスの前にスラッシュが入ることはない。

上記リセットcssは → hタグを大きくしてくれない。
→ cssにfont-weight: normal;を追記

上記リセットCSSは、画像に謎の隙間を残す。
→消すために以下CSSのmiddleの記述を、bottomに変える。

style.css

input, select {
 vertical-align:middle; /*bottomに変える*/
}

VScodeの機能

CTRを押しながらリンクをクリックすると、画像が見れる。

まだ作られてないファイルを作ってくれる(ファイルを作りますか→yes、作れる、ファイル名間違いに注意)
<link rel="stylesheet" href="css/style.css">

style.cssを作る

 サイト作成のポイント

基本設定を整える
サイトは色を多く使わないほうが後々ラク
CSS → タグだけくくることはない
HTMLは高さを揃えるのは難しい(align-itemsで揃えられる、flex前提)

✔︎ style.cssの共通設定
トップページだけじゃなく他のページも共通。

style.css

body{
 font-size: 16px;
 color: #333;
 line-height: 2;
 font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;;
}

a{
 color: #f77237;
 text-decoration: none; /*リンクの下線を消す*/
}

a:hover{
 opacity: 0.6; /*リンクにホバーしたらやや透明にする*/
}

✔︎ ヘッダー横並びにする

style.css

header{
 padding-top: 10px;
 padding-bottom: 10px;
}

header .inner{
 display: flex;
 align-items: center; /*flexにしたうえで使えるalign-items*/
 justify-content: space-between;
}

header ul{
 display: flex;
 justify-content: space-between;
}

header ul li{
 margin-left: 20px; /*一番左のnavの左マージンはムダだが無視*/
}

職業訓練Webデザイン8日目の疑問点【解決済】

職業訓練Webデザイン8日目の疑問点【解決済】

8日目に浮かんだ疑問点を書きます。

transitionについて

transitionについて、わからなくなりました。

transitionとは変化するまでの秒数を指定できるプロパティ。
どれくらいの時間をかけて変化するか指定できます。

下記CSSでtransitionを0.3秒に指定しています。

.nav ul li a → 変化前の状態
.nav ul li a:hover → 変化後の状態

変化前から変化後になるのに0.3秒かかるという意味です。

疑問点は「.nav ul li a:hoverにtransitionを記述してもいいのでは?」です。
ホバーしたときに0.3秒かけて「変化後の状態」になるから、同じ意味になると思ったのです。

先生の回答は「.nav ul li a:hoverにtransitionを記述すると0.3秒かけて変化するけれど、カーソルをはずしたときにパッと戻ってしまう。0.3秒かけて戻らないよ」とのこと。

style.css

.nav ul li a{
 background-color: #d69411;
 color: #fff;
 text-decoration: none; /*下線を消す*/
 display: block; /*文字以外でも押せるように*/
 border: 1px solid transparent; /*枠線を見えなくつける*/
 transition: 0.3s; /*0.3秒かけて変化*/
}

.nav ul li a:hover{ /*マウスをのせる*/
 background-color: transparent; /*透明*/
 color: #d69411; /*文字の色*/
 border: 1px solid #d69411; /*枠線*/
}

.nav ul li a → 変化前の状態(こちらにtransitionを記述することで、変化する元に戻る時間を指定できる)
.nav ul li a:hover → 変化後の状態(こちらにtransitionを記述すると、ホバーしたときだけの時間を指定できる)

先生に質問しないと気づけないことでした。
上記のような行間を読む力のようなものが必要かもしれません。

改めてHTML、CSSの難しさを感じました。

独学では、私にはほぼ無理です。

以下サイトも参考になりました。
» 参考:【CSS】hoverで作る簡単アニメーションとおすすめプロパティ6選

おまけ:素材集めに使えるサイト一覧

以下のとおり。

詳しくは下記記事で解説しています。
»【初心者向け11選】Webデザインギャラリー・参考サイトのまとめ

まとめ:ブログだけじゃなく、コードを書くことで生まれ変わる

まとめ:ブログだけじゃなく、コードを書くことで生まれ変わる

仕事で体を壊して、2年間休職。
休職中はずっと「生まれ変わりたい」と思っていました。

ブログを書くことで生まれ変わりたいと思っていたのです。
»【自己紹介】ブログを書くことで生まれ変わる【5つの好きなこと】

Webデザインの職業訓練に通うようになって心境に変化が。
「コードを書くことで生まれ変われるのでは?」と思うように。

HTML、CSSのコードを書く。
今まで書いてきたブログの裏側が見える。
ふだん目にするWebサイトすべてが違って見える。

森羅万象、アナログもデジタルもすべてが勉強になる。

ブログとコードのおかげで人生が変わる。
人生を楽しくするコツは、勉強すること。

なぜなら、勉強すれば見える景色が変わるから。

Webを勉強すればWebの世界が。
文章を勉強すれば文章の世界が。
音楽を勉強すれば聴こえる音が。

ゆえに、一生勉強し続けます。

なお、職業訓練9日目については下記記事で解説しています。
»【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

【未経験】Webデザインの独学は難しい3つの理由【解決策あり】
【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

勉強して見えるものが変わることを生まれ変わると言うのですね。

こういちより

P.S. コードを書いて生まれ変わろう。

関連記事【初心者向け】Webデザイン基礎知識まとめ【入門から色彩、配色】
関連記事【職業訓練の入校式】オリエンテーション内容や服装、自己紹介を解説

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.