Web Design

職業訓練Webデザイン科でサイト作成【勉強で生まれ変われる理由】

2021年6月16日

職業訓練Webデザイン科でサイト作成【勉強で生まれ変われる理由】
  • 「職業訓練のWebデザイン科で学んだことを知りたい」
  • 「サイト作成とはどんな感じだろう」
  • 「転機に職業訓練で勉強することで生まれ変わりたい」

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

 この記事でわかること

職業訓練のWebデザイン科で学んだこと
勉強することで生まれ変われる理由

 本記事の信頼性

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

本記事では、Webデザインの職業訓練6日目に学んだことを書いています。

この記事を読むことで、6日目に学んだサイト作成の練習内容がわかります。

ちなみに、職業訓練5日目については職業訓練校のWebデザイン授業についていけない【3つの解決策】にまとめています。

勉強で生まれ変われることに気づきました。

職業訓練Webデザイン科でサイト作成の練習をする

職業訓練Webデザイン科でサイト作成の練習をする

職業訓練6日目からは実際に手を動かして、サイトを作っていきます。

なし園のサイト作成【参考になるサイト一覧】

完成サイト(なし農園の販売サイト)を見ながら、コードを書いていく授業が始まりました。

index.html

<div class="header">
 <div class="inner">
  <h1><img src="img/gra_top.jpg" alt="なし園"></h1>
 </div>
</div>

先日の授業で習った<img/gra_top.jpg>のファイルパスをすでに忘れていました。
※ファイルパスは「/」から始まることはない。

h1見出しを使う意味がわかりませんが、飛ばします。
hは「Heading」の略。

横並びになっているものは、必ず何かでくくること。
3つでも4つでも横並びはくくるのが大事です。

メモ

CTL + / コメントアウト
Desc ディスクプリションの略
<figure>図形を示す
<figcaption>説明文
<br>改行(break)→ 閉じタグは不要(空要素)で、ここからここまで改行という意味がないから

 参考になるサイトデザイン一覧

その他の参考サイトは、下記記事にまとめました。
»【初心者向け11選】Webデザインギャラリー・参考サイトのまとめ

「コードも文章も論理の積み重ね」と感じました。

reset.css、style.css、font-family

CSSフォルダをつくり、reset.css、style.cssのファイルをつくります。

reset.cssファイルを作成

最終のreset.cssファイルを下記のとおり。

style.css

html,body,h1,h2,h3,h4,h5,h6,p,div,
figure,figcaption,section,ul,li,header,footer,
table,tr,th,td,nav,small,aside,article{
 margin: 0;
 padding: 0;
} /*CSSに書くものは(半角のカンマで区切る、改行してもOK)*/

h1,h2,h3,h4,h5,h6{
 font-size: 100%;
 font-weight: normal;
}

img{
 vertical-align: bottom; /*画像(インライン要素)の余白を消す */
}

li{
 list-style: none; /*リストののマークを消す*/
}

table{
 border-collapse: collapse;
}

reset.cssファイルを作ったら動作確認しておくこと。
たとえばbody、back-groundcolor: で色を見てみる。

HTMLの<head>に、<link>タグでreset.cssファイルは読み込ませる。
※パスの考え方はhtml、cssでも変わらない。

go live、liveshareをいったん消すと反映される

メモ

section → 区分
aside → 主ではないタグ
ui → 順番関係ないリスト
li → 箇条書きリストの1つ1つ

style.cssファイルを作成

全体的な設定からドカっと作っていくのが望ましい(合理的)。

style.css

body{
 font-size: 16px;
 color: #333; /*少し色を抑える(白背景が多いのに真っ黒は見づらい、疲れる、目立つが)*/
 line-height: 2; /*2文字分あける*/
 font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;
}

font-familyについて

端末次第で入っていないと無視される。
基本はベーシックなフォントしか指定しない。
おすすめでググり、検索から持ってくること。

font-familyは先頭に書いてあるものが優先される。

遊ゴシック → 比較的新しい(嫌いなデザイナーは下記選択が多い)
ヒラギノ角ゴシック → mac専用フォント
メイリオ → windows専用のフォント

font-familyの指定方法は、以下のとおり(CSSにコピペでOK)。

【游ゴシックを優先するfont-family】

font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;

【Windowsはメイリオ、Macはヒラギノ系を優先するfont-family】

font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;

【明朝を優先するfont-family】

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;

中央揃え、黄金比1.6

なしの画像サイズを確認する(1000px、353px)。

 中央揃えにするために必要な3つのこと

width
margin-left
margin-right

✔︎ 画像を中央に揃える

style.css

.inner{
 width: 1000px;
 margin-left: auto;
 margin-right: auto;
}

別解 → marginの上下を0、左右をauto

margin: 0 auto

✔︎ ヘッダー画像下に50pxの余白を作る

style.css

.header{
 margin-bottom: 50px;
}

別解 → padding-bottom: 50px;

✔︎ 見出しの大きさを変える

style.css

.title{
 font-size: 41px;
 border-bottom: 4px dotted #d69411;
 margin-bottom: 30px;
}

フォントサイズは黄金比1.6倍を2回かける。
たとえばフォントサイズ16px → 25px → 41pxのように。

デザインセンスのない人は計算すること。
「感覚」と「理論」を組み合わせていく。

✔︎ 横並びにする方法

display: flexを使います。

style.css

.desc{
 display: flex; /*内側のものが横になれ*/
}

figure、figcaption、text-align

✔︎ 画像の右側に余白が欲しいとき

style.cssに以下のコードを書きます。

style.css

.desc figure{
 margin-right: 40px;
}

クラスdescの中のfigure(図表を表すタグ)、こうしておけば他のコードに干渉しない。

✔︎ 画像下の文字をセンタリングする方法

style.cssに以下コードを書きます。

style.css

.desc figure figcaption{
 text-align: center;
}

クラスdescのfigureの中のfigcaption。
「align」は整列の意味です。

marginとpaddingの考え方、違いを理解しておくことが重要です。
後からの更新性、汎用性を考えたうえでの最適解を考えると学びました。

style.css

.about{
 background-color: rgba(0, 148, 17, 0.3);
 padding-top: 50px;
 padding-bottom: 50px;
}

.nashi{
 background-color: rgba(214, 148, 17, 0.3);
 padding-top: 50px;
 padding-bottom: 50px;
}

.kind{
 background-color: rgba(0, 148, 17, 0.3);
 padding-top: 50px;
 padding-bottom: 50px;
}

修正しやすいデータをつくる

修正しやすいデータをつくるのが大事です。
なぜなら、修正やアップートはよくあることだから。

✔︎ 文字の余白を50px → 80pxにしたい

それぞれのdivのpaddingを直すと時間と手間がかかる。
改善策 → divクラスのabout、nashi、kindのそれぞれにclass="row"をつける(以下)。

index.html

<div id="about" class="row">
 <div class="inner">
  <h2 class="title">なしのすばらしさを広めたい</h2>
  <div class="desc">
   <figure>
    <img src="画像jpg" alt="なしの画像">
    <figcaption>なしの実</figcaption>
   </figure>
   <p>
    テキストが入ります。テキストが入ります。テキストが入ります。
  </p>
  </div>
 </div>
</div>

汎用的なクラスstyle.cssに以下を記述。

style.css

.row{
 padding-top: 50px;
 padding-bottom: 50px;
}

✔︎ ボタンをつくる

index.html

<div class="btn">
 <div class="inner">
  <p class="order">
   <a href="#">ご注文はこちら<br>
    <span>2,000円(税込み)</span>
   </a>
  </p>
 </div>
</div>

リンクの飛び先は <a href="#">  </a>でつくる。
仮のリンクは「#」を置いておく。

aとはアンカー(いかり)のこと(#はトップの戻るだけ)。

✔︎ ボタンのCSSの一例

style.css

.order a{
 background-color: #cc3227;
 display: block; /*先に指定しておく(横幅をつけるため)aタグ=インラインは横幅を指定できない*/
 width: 700px;
 margin-left: auto;
 margin-right: auto;
 color: #fff;
 text-decoration: none; /*下線が消える*/
 text-align: center; /*テキストを中央よせ*/
 line-height: 1; /*テキストの行間*/
 padding-top: 15px;
 padding-bottom: 15px;
 font-size: 41px;
 border-radius: 10px;
 transition: 0.3s; /*ホバーの前後で0.3秒かけてフワッとする、transitionとは遷移*/
}

2,000円税込のフォントサイズを24pxにします。

style.css

.order a span{
 font-size: 24px;
}

カーソルをボタンにホバーするとやや透明になるようにします。

style.css

.order a:hover{  /*ホバーする*/
 opacity: 0.6; /*opacityは不透明度 → 0.1は超薄い、1はクッキリ)*/
}

職業訓練でWebデザインを勉強することで生まれ変われる理由

職業訓練でWebデザインを勉強することで生まれ変われる理由

勉強することで生まれ変われる。
Webデザインの勉強を始めてから思ったことです。

理由:目の解像度が上がるから

Webデザインを勉強すると、継続してきたブログの裏側が見れるようでおもしろいです。
さらに言えば、Webサイトを見るたびに「目の解像度」が上がる気がします。

もっと勉強すればするほど、見えるものや目に飛び込んでくるもの変わるはず。

旅行会社のアナログ世界もそうだった

旅行に必要な知識は、森羅万象、無限です。

いろんな顧客
世界の観光地
世界の食べ物
日本史、世界史

見るもの、食べるもの、歴史などすべてを勉強する必要がありました。
外に出れば、勉強だったのです。

本を読むなら旅行地理の情報が入ってくる、テレビをつければ世界のクイズが目に飛び込む。
レストランに行くなら、せっかくだから勉強になりそうなスペイン料理にしてみる。
車で観光地に出かけるなら、観光に必要な時間、見どころやトイレ、名産物、バスの配車場所を見ておく。
さまざまなお客さまの話がわかるように、あらゆる仕事や知識を仕入れておく。

勉強すればするほど、見えるものが変わるのです。

世界を広げるには勉強すること

目の解像度を上げるだけです。
遠くに出かける必要はありません。

解像度を上げるだけで、フィルターが変わるだけで景色は変わります。

勉強なしで解像度を上げる方法は?

偏見を取りのぞくこと。
経験を積めば、角がとれるはず。

経験がないなら、それまでの知識や経験から判断するしかありません。

知識や経験が豊富であればあるほど、別世界に行けるのです。

ゆえに、勉強することで生まれ変われる。
職業訓練は生まれ変わるために行くところなのです。

なお、職業訓練7日目については職業訓練Webデザインに1週間通ってみた感想【良い点、不安な点】にまとめています。

職業訓練Webデザインに1週間通ってみた感想【良い点、不安な点】
職業訓練Webデザインに1週間通ってみた感想【良い点、不安な点】

知識や経験のある先生から学ぶのがコスパ良しですね。

人生の転機に職業訓練校に行くことで、生まれ変われます。

こういちより

P.S. 勉強で見える世界を変えよう。

関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】
関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.