Web Design

【感想】職業訓練Webデザインに1週間通ってみて【7日目に学んだ内容】

2021年6月17日

Web Design
  • 「職業訓練のWebデザイン講座を1週間学んだ感想は?」
  • 7日目に学んだ内容を知りたい

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

 この記事でわかること

・職業訓練Webデザインに1週間を通ってみて【感想】
・7日目に学んだ内容

 本記事の信頼性

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

この記事を書いている私は、職業訓練校でWebデザインを学んでいます。
まだまだ7日目を迎えたばかりで、知識もスキルも乏しいです。

本記事では、そんな私が実際にWebデザインの職業訓練校に7日間通ってみての感想を書いています。
良いところや不安なところ、ありのままをお伝えします。

記事後半では7日目の学習内容を、備忘録としてまとめています。

ちなみに、職業訓練6日目については下記記事で解説しています。
» 職業訓練Webデザイン6日目はサイト作成の練習をする【勉強することで生まれ変わる】

こーいち
職業訓練校に通おうかどうか迷っている方の参考になれば幸いです。

【感想】職業訓練Webデザインに1週間通ってみて【よかったところ、不安なところ】

職業訓練Webデザインに1週間通った感想

1週間通ってみて、よかったところ、不安なところを書いていきます。

職業訓練のWebデザインを受講して、よかったところ

・環境が変わった
・視野が広がった
・新しいスキルが身につく

環境が変わった

「2年間の休職+5ヶ月の無職」の状況でした。
ファミレスやカフェでひたすらブログの日々です。

職業訓練で外の世界とにつながれた感じがします。

メンタルを病んでから、いきなり転職するのはハードルが高いもの。
人間関係がうまくいくかどうか不安だからです。

そんな方は職業訓練で徐々に慣らしていくのもあり。
良いウォーミングアップになります。

視野が広がった

Webデザイン(HTML、CSS)を学ぶと、ふだん見ているWebサイトが違って見えてきます。

今まででは気づけなかったサイト構成が少しわかるようになりました。
コードも勉強することでブログデザインの助けになります。

勉強は世界に広げます。

こーいち
40代で先生から学べる環境に感謝です。

新しいスキルが身につく

Webデザインのスキルが身につきます。
6ヶ月コースでWebデザインの基礎が身につけられます。

就職できるかどうかはわかりません。
ただ、勉強したことを自分の中に残ります。

勉強でスキルを身につける。
スキルを身につけて人生を変える。

職業訓練に通ってから「一生勉強しよう」と決めました。

こーいち
1週間でもとが取れた気分です。

職業訓練のWebデザインを受講して、不安なところ

・就職できるのか
・給付金はもらえるのか
・人間関係はうまくやっていけるか

就職できるのか

40代で新しいスキルを身につけて、新しい業界へ飛び込むわけですから不安です。

・就職できるのか
・そもそもキャリア形成は合っているか
・就職できたとして、うまくやっていけるか
・就職できずにハズレくじを引くことにならないか

先のことを考えると希望より不安が大きいです。

そもそもブログだけで生活したいと思っていました。

ただ、職業訓練に通うようになり、実際のWeb業界の現場、仕事の流れを内容を見ておきたいのは正直なところ。

とりあえず今は勉強しつつ、当ブログを育てることに注力します。

給付金はもらえるのか

求職者支援制度(毎月10万円給付)に申請しています。
まだ返事が来ません。

10万円がもらえないと6ヶ月のうちに貯金がなくなります。
審査に通らない場合は、アルバイトを始めなくてはなりません。

お金の悩みは切実です。
求職者支援制度に通れば、6ヶ月はお金の心配をしなくてすみます。

人間関係はうまくやっていけるか

職業訓練校でも人間関係があります。
もちろん6ヶ月だけの特殊な環境なので、周りとのコミュニケーションを遮断しても問題なし。

ただ、せっかく出会えた縁もあります。

就職してからも、どこに行っても人間関係はついてまわります。

少しでも気持ちよく、プラスに、成長しあえる人間関係を築きたいところ。

7日目で何も進展はありません。
特に不快なこともありません。

このまま時間が過ぎて、何もなかったかのように元の生活に戻る。

こーいち
ちょっともったいない感じもします。

職業訓練のWebデザイン講座7日目の学習内容

Web Design

ナビゲーションの作り方、クリックしてスクロール、line-heightの考え方

ナビゲーションの作り方

HTMLの一例は、以下のとおり。

HTML

<div class="nav">
 <div class="inner">
  <ul>
   <li><a href="#about">なし農園の思い</a> </li> 
   <li><a href="#nashi">なし農園について</a></li>
   <li><a href="#kind">なし農園の梨の種類について</a></li>
  </ul>
 </div>
</div>

ulタグ(Unordered List=順序のないリスト)の内側には、liタグ(List Iitem)しか入らない。
aアンカータグで#で飛ばす → idの名前に飛ぶ。

reset.cssに追記する。

CSS

li{ 
 list-style: none;
}
/* ulでもliでもOK、・中黒点を消せる*/

クリックしてスクロールしたい

style.cssに記述。

CSS

html{
 scroll-behavior: smooth;
}

line-heightの考え方

Line-height(行間)→ 1行の文字に限り使える。

bodyのCSSで書いた「line-height: 2;」の意味は、以下のとおり。

たとえば、フォントサイズが16pxでline-height:1の場合、行の高さは16px。
line-height:2の場合、行の高さは32px(16pxで文字、上に8px 下に8px)。

こーいち
文字が2行のボタンには、line heightは使えません。

ボタンの装飾

✔︎ ボタンの幅、センタリング、高さ

CSS

.nav ul li{
 width: 300px;
 text-align: center;
 line-height: 70px;
}

✔︎ ボタンの色、文字色、下線を消す、文字以外でも押せる、枠線を見えなくする、ボタンに触れると0.3秒で変化

CSS

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

opacity 0.5 /*不透明度を表す。0が透明→何もないから*/

ボタンにカーソルを乗せると、下のボタンがずれる(実際2px分)。
解決策は、ボタンにborderをつけること。

メモ

・transparent → 透明な、透き通る
・transition → 遷移(指定した時間をかけて透明になる)

✔︎ ボタン横並びのCSS

CSS

.nav ul{
 display: flex; /*いろんなことができる 一番使う*/
 justify-content: space-between; /*左右の隙間なし、真ん中が等間隔で空く*/
}

メモ

・Space-evenly はじ、真ん中、ともに等間隔
・Space-around はじに小さい隙間&真ん中は大きめの等間隔

表の作り方(tableタグ)

テーブルは行単位(row)でつくること。
まず、1行分をつくるのが大事。

・tr=table row
・th=table header
・td=table date

tableのHTMLの一例

HTML

<!DOCTYPE html>
<html lang="en">
<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>表(table)の練習</title>
 <style>
  td,
  th {
    border: 1px solid #999;
    padding: 20px;
   }

  table {
   border-collapse: collapse; /*崩壊*/
  }
 </style>
</head>

<body>
 <h1>表の作り方</h1>
 <table>
  <tr>
   <th>A-1</th>
   <th>A-2</th>
   <th>A-3</th>
  </tr>
  <tr>
   <td>B-1</td>
   <td>B-2</td>
   <td>B-3</td>
  </tr>
  <tr>
   <td>C-1</td>
   <td>C-2</td>
   <td>C-3</td>
  </tr>
  <tr>
   <td>D-1</td>
   <td>D-2</td>
   <td>D-3</td>
  </tr>
 </table>
</body>
</html>

tableタグの隙間をなくしたい → <style>内部参照でtdに指示を出す 

border-collapse:collapse /*崩壊*/

paddingで整える。
見出しを作るのはth(table header)を使う。

メモ

marginがかち合うと無効になる → 1pxでも大きいほうが勝つ

✔︎ h3のCSS例

CSS

.sub_title{
 font-size: 26px;
 border-left: 10px solid #d69411;
 padding-left: 15px;
 line-height: 1.5;
 margin-bottom: 30px;
}

tableタグのCSSの一例

以下のとおり。

CSS

.shopping table{
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 30px;
}

.shopping table td, /* 半角カンマの意味はAND*/
.shopping table th{
 border: 1px solid #333;
 padding: 10px;
}

.shopping table th{
 width: 250px;
 font-weight: normal; /*デフォルトで太字だから*/
 background-color: #d69411;
 color: #fff;
}

reset.cssに下記追記。

CSS

table{
 border-collapse: collapse;
}

/* tableの境界線を共有させる。
隣接するボーダーラインを重ねあわせて表示するよう指定。
初期値はseparate */

フッターのHTML、CSSの一例

フッターのHTMLの一例。

HTML

<div class="footer">
 <div class="inner">
  <p class="copy">&copy; Yachiyo Nashi Noen;</p>
 </div>
</div>

&copyでcマークが出てきます。

フッターのCSSの一例。

CSS

.footer{
 background-color: #d69411;
 color: #fff;
 line-height: 50px;
 text-align: center;
}

これで、なし園のサイトが完成しました。

7日目の疑問点

質問
→ CSSでclass名を指定するとき、多重構造でも書いていないclass名があるが、すべて書く必要はないのか?

先生の回答
→ 書く必要はない。ちゃんと論理がつながっていて、CSSに指示ができていれば省いても問題なし。
CSSは案外、適当でも大丈夫。

こーいち
先生に聞くだけで解決できました。

【感想まとめ】Web業界のスキル計画を考えよう

Web Design

 職業訓練の良かったところ

・環境が変わった
・視野が広がった
・新しいスキルが身につく

 職業訓練の不安なところ

・就職できるのか
・給付金はもらえるのか
・人間関係はうまくやっていけるか

先生が「Web業界はいろんなことをやらないといけない」と言っていたのが印象的でした。

・Webデザイン
・Webライティング
・Webマーケティング

他にもコーディング、写真や動画編集、営業、ディレクション、プログラミングなど。
» 参考:FFのジョブを使って、 スキル計画とロードマップをしっかり考えよう!

今までの営業スキルやブログ経験(ライティング、マーケティング)がどこまで活きるのかわかりません。

自分がどんなスキルを求めて、どんな仕事をしていきたいのか。
職業訓練は勉強だけじゃなく「キャリアやスキル計画を考える」良い機会です。

職業訓練webデザイン
【職業訓練Webデザイン】8日目の学習内容をブログにまとめました【新サイトに着手】
こーいち
時間は有限ですね。

こーいちより

P.S. スキル計画を考えよう。

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

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.