Web Design

職業訓練校のWebデザイン授業についていけない【3つの解決策】

2021年6月15日

職業訓練校のWebデザイン授業についていけない【3つの解決策】
  • 「職業訓練校のWebデザイン授業についていけない」
  • 「同じ気持ちの人はいるのかな?解決策を知りたい」

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

 この記事でわかること

職業訓練校のWebデザイン授業についていけないときの解決策
職業訓練校のWebデザイン5日目に学んだこと【HTML、CSS】

 本記事の信頼性

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

職業訓練5日目で早くも「ついていけないかも」と感じました。

HTML、CSSはプログラミング言語の中でも「初心者でもわりと理解しやすい」と言われています(正確にはマークアップ言語)。
» 参考:【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】

それでも「授業だけ聞いていればOK」とはいきません。
「要復習、できれば予習もしておいたほうがいい」と思いました。

本記事では、Webデザインの職業訓練についていけないときの解決策3つを書いています。

記事後半では、職業訓練5日目に学んだことを書いています。

ちなみに、職業訓練3〜4日目については下記記事にまとめています。
»【Webデザイン職業訓練】3〜4日目に学んだHTML、CSSの内容

※ 40歳からはじめられるオンラインプログラミングスクール
基礎理解を進めるためにスクールの無料体験を利用するのも一案。「本気のパソコン塾」には7日間の無料体験があり、未経験からでも理解しやすい基礎コンテンツが豊富。職業訓練に行こうか迷っている方も、ついていけそうか体感できるかもです。
» 本気のパソコン塾の7日間無料トライアルはこちら

職業訓練校のWebデザイン授業についていけない【3つの解決策】

職業訓練校のWebデザイン授業についていけない【3つの解決策】

「授業についていけない」と感じたときの解決策を考えました。

解決策その1:疑問点を先生に聞く
解決策その2:ついていけない部分は飛ばす
解決策その3:素材を変えて、復習してみる

順番に解説します。

解決策その1:疑問点を先生に聞く

わからない点は先生に聞いてみることです。
なぜなら、疑問点を解消するための存在だから。

せっかく学校に行っているのに先生に聞かないのはもったいないです。

こんなこと聞いてもいいのかな
初歩的な質問だし、的外れかも
わかった気がするから聞かない

私はこんな気持ちで、聞けないことが多かったです。

ただ、やはり少しでも「違和感」があるなら聞いてみるのが良いです。

理解できることで芋づる式にわかることもあります。
逆に理解したことで「あれ、じゃあこれはどうなんだろう?」という新たな疑問が生まれることも。

どちらにしても聞かないと始まりません。
職業訓練が終わってしまったら聞けません。

ゆえに、以下が大事です。

授業内容に集中する
内職は絶対にしない
休憩中も、Web関連

基礎が一番大事だと思いますので、ひとつひとつの基礎理解を大切にしたいところ。

先生を使い倒したほうが元が取れます。

解決策その2:ついていけない部分は飛ばす

「完璧主義を捨てる」ということです。

なぜなら、いつまでたっても先に進めないから。

先ほどの「先生に聞こう」と矛盾していますが、あとでわかることもあります。
先に進まないとわからないこともあります。

全体像が見えてから、理解が進む
実際にCodeを書いてみてわかる
飛ばすことで、とりあえず進める

最初はとりあえず全体像をおさえるのを目的にすれば良いです。

先生に聞いてもわからない
小さな疑問が無限に出てくる

そんなときは飛ばすのもありです。

コードを書きながら、都度調べる、ググる感じでいいと思います。

解決策その3:素材を変えて、復習してみる

「学校からもらった参考書だとわかりにくい」ということもあるかもしれません。
そんなときは素材(参考書)にこだわらず、ブログや動画を見てみると理解が進みます。

 参考になるブログ

 参考になるYouTube動画

 【おまけ】Web制作のインフルエンサー

【ついていけない原因】職業訓練Webデザイン5日目に学んだHTML、CSS

【ついていけない原因】職業訓練Webデザイン5日目に学んだHTML、CSS

5日目に学んだことを書いていきます。

class、色の指定方法、width

id属性とclass属性の使い分け

「id=identify」のとおり「唯一の値」という意味で、同ページ内で1回しか同じid名は使えません。
ただし、別ファイルなら同じid名でも使用可。

class属性は、同じページ内でも何回でも使えます。
同じ種類の要素を「クラス」としてひとまとめにする役割(1回でもかまわない)。

「あだ名」をつける感覚なので、どんな名前でもOKです。

※厳密には以下ルールがあります。

半角英数字
先頭が数字や記号から始まるのはNG
-(ハイフン)と_(アンダーバー)の記号はOK

» 参考記事:【イラスト解説】divに付いているidとclassの意味と使い方

idとclassは同じタグにつけてもOKですが、idが優先されます。

色の指定方法3つ

16進数やrgbaをよく使います。

カラーネーム(英単語)で指定 → background-color:blue;
rgb(red green blue)で指定 → background-color:rgb(255, 0 , 0);
16進数記法での指定 → background-color:#ff0033(6桁または3桁)
rgbaでの半透明を使う指定 → background-color: rgba(214, 148, 17, 0.3);
hslおよびhslaでの指定 → 色相(Hue)0〜360、彩度(Saturation)、明度(Lightness)ともに0〜100%

rgbaは、rgbに「透明度」を加えて指定します(aはアルファのこと)。
透明度は0透明〜1不透明で、0.5や.5と表します。

メモ:光の3原色

青を混ぜて、すべての色を表せます。
・Red:0〜255(256段階)
・Green:0〜255(256段階)
・Blue:0〜255(256段階)

256の3乗=16,777,216通りの色が表せます。
ただ、モニターではすべて再現できません(緑の色が落とさせることが多いから)。
ちなみに255は16進数で「ff」

メモ:bit

bit(ビット)とは「binary digit=2進数」
すなわち1ケタの2進数(0か1)の略称。

widthで幅を指定する

「width」はブロックの幅を指定するプロパティ。

読み方はウィドゥスやワイズです。

中央揃え、border、ボックスモデル、ボタン作成(角丸、ぼかし、boxshadow)

中央揃えにする

ブロックを中央に揃えるために必要な要素は、以下のとおり。

横幅
左側余白
右側余白

style.css

.content{
 width: 600px;
 margin: 10px auto; /*上下、左右*/
}

「auto」にするとCSSで自動的にWebブラウザの幅が取得され、真ん中になるように調整されます。

borderで枠線を引く

「border」の書式は以下。
ショートハンドプロパティです。

border: 1px solid #d1d1d1; /*枠線の幅、枠線の種類、枠線の色*/

枠線の種類は、たとえば以下など。

solid 線
dotted 点
dashed 点線

その他の種類は、下記が参考になります。
» 参考:border線の種類別ーHTML&CSSデザイン14選

上下左右のプロパティもあります。

border-top 上部の枠線
border-right 右側の枠線
border-bottom 下部の枠線
border-left 左側の枠線

上下左右をさらに深掘りできます。

border-top-width 上の枠線の幅
border-top-style 上の枠線の種類
border-top-color 上の枠線の色

ボックスモデルの考え方

重要です。
なぜなら、先生は「テストに出る」と言っていたから。

ボックスモデル

出典:Webliker

padding → 要素の中の余白(内側)
margin →要素の外の余白(外側)

HTMLは通常、上と左へつめて配置します。
そのためpaddingやmarginで余白を確保しないと、綺麗にならないのです。
» 参考:paddingとmarginの違いをできる限り難しい言葉を使わず説明してみた

ちなみに、borderがなかったらpaddingでもmarginでもどちらでもOK。
CSSに「こうじゃなきゃいけない」という明確な理由はありません。

ボタン作成(角丸、ぼかし、boxshadow)

たとえば、以下のとおり。

style.css

button{
 background-color: #d1d1d1;
 width: 100%;
 color: #fff;
 padding: 15px;
 border-radius: 3px; /*角の丸み(角から3px分進んだ感じ)*/
 box-shadow: 0 0 8px rgba(0,0,0, .4) /*ブロックに影をつける*/
}

box-shadowの書式は下記。

box-shadow: x位置 y位置 ぼかし 色

「ぼかし」の値を大きくするほど、ぼけた感じになり、小さくするほどくっきりした影になります。
» 参考:【CSS】box-shadowで影をつける方法とサンプル集

【ついていけない】label、インライン、ベンダープリフィックス

labelタグ

<label>は、<input>要素などのフォームパーツとともに利用される。
ラベルをクリックしたときに、フォームにカーソルが移動する。

書式は以下のとおり。

<label for=""> ラベル名 </label>
<input type=" "> 

入力例は下記。

index.html

<div class=“クラス名”>
 <label for="mymail">メールアドレス <span class="required">必須</span></label>
 <input id="mymail" type="email" name="mymail" placeholder="入力してください">
</div>

<label>要素はインライン(横幅が「文字だけ」かつ「改行」されない)。

この辺から「ついていけない。ちょっと混乱してきた」という気持ちになりました。

インライン要素、ブロック要素とは?

ブロック要素、インライン要素

出典:Webliker

ブロック要素(横幅いっぱい、改行される)の例

<p>
<h>
<div>

インライン要素(文字列分だけ、改行されない)の例

<a>
<span>
<label>

メモ

デフォルト設定では以下。
<p>タグはmarginをとっている
<div>タグはmarginをとっていない

ベンダープリフィックスとは

-ms-や-webkit-は、ベンダープレフィックスと呼ばれる、CSSのプロパティの拡張機能をさまざまなブラウザに実装するために付け加えられる接頭辞です。
正式なプロパティではなく、Webブラウザの開発元(ベンダー)が独自に定義しているプロパティ。

ChromeやSafari 「-webkit」
Firefox 「-moz」
IE 「-ms」
Opera 「-o」

span、背景色

span

<span>要素は、ある範囲をマークアップしてidやclassを付加できる便利なタグ。
<div>タグとの違いはインラインであるという点。

index.html

<div class="control">
 <label for="mymail">メールアドレス <span class="required">必須</span></label>
 <input id="mymail" type="email" name="mymail" placeholder="入力してください">
</div>

style.css

.required{
 margin-left: 0.3em;
 color: #f33;
 background-color: #fcc;
 padding: 3px;
 font-weight: bold; /*文字の太さを変化させる、4種類=normal、bold、lighter、bolder*/
}

背景色

CSSを当てて仕上げをする。

body{
 background-color: #f3f3f3;
}

以上で、HTML&CSS、JavaScriptのきほんのきほんのChatper2つ(P.82まで)が終わりました。

Chapter1  Webの開発環境を整えよう
Chapter2 HTMLとCSSのきほんを学ぼう

Visual studio codeを共有する【Live Share】

VSCodeの拡張機能「Live Share」で、Visual Studio Codeを共有できます。

Live Shareで先生の画面を見ながら、作業ができるようになりました。
6日目から実践練習に入ります。

5日目の最後に学んだこと

Webサイトはいきなり書かない
Webサイトの外側から作るのが基本

「まずは設計から」ですね。

5日目までの感想

参考書はあるものの、実技授業というだけに「コードを書いてみる」という授業でした。

実際に教わった順番は、参考書の順番を無視したもの。
いきなり20ページ先に飛んだり、10ページ戻ったりは日常茶飯事でした。

好印象です。

なぜなら、先生の最適解で教えてくれていた感じがしたからです。

実際、おおむね理解しやすい授業でした。
「ついていけない」と感じた瞬間はあったにせよ、なんとかなるレベルです。

40代で先生から学べる機会に感謝します。

Webデザインの勉強でWebサイトが違って見える【ついていけなくても勉強で未来を変えよう】

Webデザインの勉強で、 Webサイトが違って見える【ついていけなくても勉強で未来を変えよう】

Webデザインを勉強することで、ふだん見ているWebサイトが違って見えてきます。

Webサイトが違って見える理由

理由は以下のとおり。

コードやサイト設計を学べる
デザインセンスや配色カラーが学べる
SNSやテレビ、本など配色からも学べる

Webデザインの勉強を開始して5日目で気づけたことです。
6ヶ月の授業が終わる頃には、さらに多くの気づきがあるはず。

デスノートの目が手に入るような気持ち【一番欲しいもの】

大学時代はWebに興味がなく、なにも見えませんでした。
卒業して20年、かなり遠回りしましたがWebサイトの見え方が変わりつつあります。

職業訓練に通い出して、一番良かったことかもしれません。

もっと言えば「見える景色が変わること」が一番欲しいものかもしれません。

あらゆる物欲を超えて、新しい視点視座を手に入れる。

旅行会社(手配、営業、添乗)

ブログ(Webマーケティング、Webライティング)

Webデザイン

都度、見えるものが変わります。
「遠回りはしましたが、結構いい脚本だったんじゃないか」と感じます。

あとはコツコツ積み上げるだけ。

過去の自分も未来の自分も裏切りたくない。
過去の自分に申し訳が立たないからです。

デスノートでは、「目」は寿命と引き換えでした。
勉強は「時間」と引き換えです。

「時間=命」と考えると、同じ意味ですが。

新しい景色は簡単には手に入らない

Webデザインの基礎知識を手に入れるのに、職業訓練で6ヶ月かかります。

新しい視点や視座は簡単には手に入りません。
お金を出せば買えるものじゃないからです。

ただし、勉強すれば手に入ります。

勉強だけでなく、体験することでさらに血肉になります。

コツコツ勉強して、発信して、体験する。

さらに楽しめるようになれば、もっと血肉化できるはずです。

十人十色でみんな違ったものを見ている

人は千差万別、十人十色。

知識や経験、育ってきた環境、興味や価値観など人それぞれ。
同じはありえません。

同じものを見ても、まったく違うものを見ている可能性があります。
同じものを見ても、まったく違うことを考えている可能性があります。

遠足の感想が、全員バラバラのように。

知識がなくても、持っているロジック論理的思考力があれば違う景色を見てるかもしれません。

言いたいことは「勉強で見える景色が変われば、未来で見ているものも変わる」ということ。
勉強して、ついていけなくても、稼げるようにならなくても、少なくとも見える景色は変わるのです。

なお職業訓練6日目については、 職業訓練Webデザイン科でサイト作成【勉強で生まれ変われる理由】で解説しています。

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

後日談ですが「本当についていけない、難しい」と感じたのはJavaScriptの授業です。

JavaScript基礎知識、文法
【JavaScript入門】初心者向けに基礎から文法をまとめました

Webデザインだけじゃなく勉強することで未来を変えていきます。

こういちより

P.S. 勉強で未来を変えよう。

関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】
関連記事【初心者向け11選】Webデザインギャラリー・参考サイトのまとめ

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.