Web Design

職業訓練Webデザイン6日目はサイト作成の練習をする【勉強することで生まれ変わる】

2021年6月16日

Web Design
  • 「職業訓練のWebデザイン講座で6日目に学んだことを知りたい」
  • 「練習のサイト作成とはどんな感じだろう」

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

 この記事でわかること

・職業訓練のWebデザイン6日目に学んだこと

 本記事の信頼性

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

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

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

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

職業訓練Webデザイン6日目はサイト作成の練習をする

Web Design

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

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

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

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)→閉じタグは不要(空要素)で、ここからここまで改行という意味がないから

 参考になるサイト一覧

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

reset.css、style.css、font-family

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

reset.cssファイルを作成

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

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ファイルを作成

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

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専用のフォント

中央揃え、黄金比1.6

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

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

・width
・margin-left
・margin-right

✔︎ 画像を中央に揃える

CSS

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

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

margin: 0 auto

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

CSS

.header{
 margin-bottom: 50px;
}

別解 → padding-bottom

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

CSS

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

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

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

✔︎ 横並びにする方法

display: flexを使う。

CSS

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

figure、figcaption、text-align

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

style.cssに以下のコードを書く。

CSS

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

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

✔︎ 画像下の文字をセンタリングする方法
style.cssに以下コード

CSS

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

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

marginとpaddingの考え方、違いを理解しておく。
なんでもOKだが、後からの更新性、汎用性を考えたうえでの最適解を考える。

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"をつける(以下)。

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に以下を記述。

CSS

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

✔︎ ボタンをつくる

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の一例

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にする。

CSS

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

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

CSS

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

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

Web Design

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

目の解像度が上がるから

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

なお、職業訓練7日目については【感想】職業訓練Webデザインに1週間通ってみて【7日目に学んだ内容】にまとめています。

Web Design
【感想】職業訓練Webデザインに1週間通ってみて【7日目に学んだ内容】
こーいち
知識や経験のある先生から学ぶのがコスパ良しですね。

こーいちより

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

関連記事【初心者向け11選】Webデザインギャラリー・参考サイトをまとめました
関連記事【初心者向け】Webデザインの基礎知識をまとめました【入門から色彩、配色まで】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.