Web Design

【職業訓練11日目】Webデザイン未経験でも慣れてきた3つの理由【40代でも勉強しよう】

2021年6月23日

Webデザイン
  • 「40代未経験でも職業訓練のWebデザインでやっていけるかな?」
  • 「職業訓練・Webデザイン科で11日目に学んだことを知りたい」

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

 この記事でわかること

・職業訓練Webデザインに慣れてきた3つの理由
・職業訓練のWebデザイン11日目に学んだこと

 本記事の信頼性

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

結論、40代未経験でも職業訓練・Webデザイン科に慣れます。
なぜなら、43歳でWebデザイン未経験の私が慣れてきたと感じているから。

ただ、「訓練期間3ヶ月だと少々ハードルが高いのでは?」と想像しています。
3ヶ月コースだと課題が出たりして、勉強づけになり余裕が保てないからです。

本記事を読むことで、職業訓練のWebデザインの勉強に慣れてきた3つの理由がわかります。
43歳の私が実際に思ったリアルを書いていきます。

記事後半では、職業訓練11日目に学んだ内容(CSSセレクタ)がわかります。

なお、職業訓練10日目については、【10の質問】Webデザインを勉強して、IT系友人に聞いてみた【職業訓練10日目にまとめています。

こーいち
「何事も慣れ」と実感しました。

【職業訓練11日目】Webデザイン未経験でも慣れてきた3つの理由

Webデザイン

職業訓練の勉強にだいぶ慣れてきました。
理由は3つです。

・理由その1:体が慣れた
・理由その2:頭が慣れた
・理由その3:心が慣れた

順番に解説します。

理由その1:体が慣れた

学校に10日間(約2週間)も通えば、身体が慣れます。

身体が慣れてくると余裕が出てきます。
余裕が出てくると、勉強に集中できます。

職業訓練校に通い始めは、行って帰ってくるだけでヘトヘトでした。

2年5ヶ月も会社や社会から離れていたので当然かもしれません。
ただ、それだけでなく新しいコミュニティは疲れるもの。

当たり前のことなのです。
これから職業訓練を検討している方でも心配不要。

40代未経験でも身体は慣れます。

「自分でもついていけるかな」と不安な方も、ある程度は「慣れ」で解決できると思います。

ただ、職業訓練に通い出した頃は「ついていけない」と感じたのも事実。
»【3つの解決策】職業訓練のWebデザイン授業についていけない【5日目に学んだHTML、CSS】

こーいち
今振り返れば、慣れていないのでついていけないと感じるのは正常なのです。

理由その2:頭が慣れた

Webデザインの勉強について、頭が慣れてきました。

・Webデザインの仕組みが見えてくるから
・理屈や考え方が大事なのがわかってくるから
・勉強の重みづけが自分なりにできてくるから
・先生の授業のやり方やテンポに慣れてくるから
・勉強のコツや要領のようなものが見えてくるから

要するに「頭が慣れた」、ただそれだけです。

誰でも慣れます。
IT系の友人も言っていましたが、プログラミングに暗記は不要です。
»【10の質問】Webデザインを勉強して、IT系友人に聞いてみた【職業訓練10日目】

こーいち
わからないところは飛ばしたり、仮説を持てるまでググするのが大事だと思っています。

理由その3:心が慣れた

心の慣れは、一番メリットが大きいかもしれません。
理由は、あらゆる悩みは人間関係が大きなウェイトを占めているから。

当たり前ですが、新しい生活では周りの人に対して気を遣います。

・どんな人なんだろう?
・話しかけたほうがいいかな?
・今、質問して迷惑じゃないかな?

人間に興味がある人ほど気疲れをしてしまうはず。

ただ、気疲れも慣れます。

職業訓練に通う人たちはみんな色々と事情がる大人たちばかり。
そんな簡単にプライベートにズカズカ踏み込んできません。

自由にさせてくれます。

昼休みはほとんどの方が自由に過ごしています。
ベラベラとおしゃべりを楽しんでいる人は1割もいません。

みんな自分の時間の大切さをわかっていますので干渉しません。

気楽なのです。

以上の3つが、Webデザイン未経験でも職業訓練に慣れてきた理由です。

・理由その1:体が慣れた
・理由その2:頭が慣れた
・理由その3:心が慣れた

こーいち
慣れると勉強に集中できます。

Webデザイン未経験の40代が職業訓練11日目に学んだこと【CSSセレクタ】

Webデザイン

職業訓練11日目はサイト作成の続きです。

2カラム作成

2カラムを作る

CSS

.col_wrap{
 display: flex;
 justify-content: space-between;
}

.col_wrap main{
 width: 650px;
}
/* 2カラムの左側=main部分 */

.col_wrap .side{
 width: 300px;
}
/* 2カラムの右側=side部分 */

.col_wrap .side ul{
 list-style: none;  /* ・を消す */
 margin-bottom: 20px;
}

.col_wrap .side ul li{
 border-bottom: 1px solid #f77237;
 text-align: center;
 line-height: 65px;
}

.col_wrap .side ul li a{
 display: block;
}
/* インライン要素aタグに対して領域を持たせる */

.col_wrap .side ul li a:hover,
.col_wrap .side ul li.current a{
 background-color: #f77237;
 color: #fff;
 opacity: 1;
}
/* li.currentは下段で解説しています */
/* opacity=不透明度 */

.lesson main .lesson_box{
 display: flex;
 justify-content: space-between;
}

.lesson main .lesson_box + .lesson_box{
 
margin-top: 60px;
}
/* +は隣を表す*/

.lesson main .lesson_box:nth-child(even){
 flex-direction: row-reverse;
}
/* 偶数番目の「画像、文字」が逆転する。奇数番目はodd */

.lesson main .lesson_box div{
 width: 315px;
}

.lesson main .lesson_box div h2{
 text-align: left;
}

.lesson main .lesson_box div p{
 text-align: justify;
/* テキストの改行位置を揃える */
}

.lesson main .gaiyou table th,
.lesson main .gaiyou table td{
 border: 1px solid #ccc;
 height: 80px; 
 vertical-align: middle; 
}
/* tableタグは基本的には文字が上に揃う */
/* th,tdに対してのみvertical-alignが効く */

.lesson main .gaiyou table{
 width: 100%;
 margin-bottom: 30px;
}

.lesson main .gaiyou table th{
 width: 200px;
 background-color: #f77237;
 color: #fff;
}

.lesson main .gaiyou table td{
 padding-left: 1em;
}

li.current → セレクタ(要素)に続けてクラス名を指定すると、そのクラス名が付加された要素に装飾が適用される。

上記「li.current」の意味は、liタグのクラス名.currentがついているaタグに適用。

ヘッダーなどのナビゲーションで、現在表示中のページの色を変えたりすることを「current(カレント)表示」と言います。

なお、vertical-alignプロパティを適用できるのは、インライン要素とtableセルのみ。

こーいち
ブロックレベル要素には適用できません。

CSSセレクタ

 CSSセレクタの参考メモ3つ

1.半角スペース → 内の
2.> → 直下の子要素
3.+ → 隣の
4.,(カンマ) → AND

順番に解説します。

1.セレクタの次に「半角スペース」を入れて、他セレクタを指定すると、指定の親要素内のすべての子要素に装飾が適用されます。

以下の意味は「親要素<p>タグ内の子要素<span>タグにcolor#F80206を適用」です。

CSS

p span {
 
color: #F80206;
}

こーいち
「半角スペース」は「内の」という意味です。

2.セレクタの次に「>」を入れセレクタを指定すると、指定の親要素内の一階層下の子要素に装飾が適用されます。

以下の意味は「divタグの一階層下にあるspanタグにのみ装飾が適用」です。

CSS

div > span {
 color: #F80206;
}

こーいち
「直下の子要素」とはその要素から見て、「1つ下の入れ子階層にある要素」という意味ですね。

3.セレクタの次に「+」を入れセレクタを指定することで、指定の要素に隣接した要素に装飾が適用されます。

以下の意味は「divタグの直後にあるpタグに装飾が適用」です。

CSS

div + p {
 color: #F80206;
}

こーいち
「+」は「隣の」という意味です。

4.セレクタの次に「,(カンマ)」を入れてセレクタを指定すると、複数の要素に同じ装飾が適用されます。

CSS

ul li a:hover,
ul li.current a{
 background-color: #f77237;
}

上記の意味は、以下のとおり。

・親要素<ul>タグ内の子要素<li>タグ内の<a>タグをホバーしたとき、背景色#f77237を適用
・親要素<ul>タグ内のクラス名「current」がついている子要素<li>タグの子要素<a>タグに、背景色#f77237を適用

こーいち
「,」は「AND」の意味ですね。

» 参考:【初心者向け】CSSセレクタとは?セレクタの種類や指定方法を解説!(基礎編)

画像サイズを縮小する方法

HTMLは以下のとおり。

HTML

<!DOCTYPE html>
<html lang="ja">

<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>画像の縮小の仕方</title>
 <style>
  img {
   max-width: 100%;
   height: auto;
  }

  .w200 {
   width: 200px;
  }
 </style>
</head>

<body>

<p class="w200"><img src="img/lesson_main.jpg" alt=""></p>

</body>
</html>

スマホの写真はサイズが大きいので、上記のようなHTMLの内部参照でサイズを縮小する方法もあり。

なお、画像は<p>タグで括るクセをつけておくと便利です。

まとめ:Webデザイン未経験でも職業訓練は慣れる【余裕を生み出し、勉強は不安を消す】

Webデザイン未経験でも慣れてきた3つの理由

 【まとめ】Webデザイン未経験でも慣れた3つの理由

・理由その1:体が慣れた
・理由その2:頭が慣れた
・理由その3:心が慣れた

40代未経験でも職業訓練についていけます。
慣れて余裕ができたら、あとは勉強するだけ。

ちなみに私は復習で手いっぱいの状況です。

予習もしたいところですが、復習に時間がかかり思うように進みません。

それでもコツコツ勉強するだけ。

未来がどうなるのか、不安はもちろんあります。
ただ、不安がエネルギーになります。

理想と現実の落差が、不安になりエネルギーを生み出します。

不安からのエネルギーで勉強するだけ。
不安があるから、勉強できます。

未来が不安(就職やお金の問題)

不安がエネルギーになる(理想と現実のギャップ)

エネルギーで勉強する(勉強しないと不安)

勉強すると不安が消える(今、ここに集中)

40代でも年齢にかかわらず勉強です。

なお、職業訓練12日目の内容は下記記事にまとめています。
» Webデザイン科・職業訓練の日記をブログに書く3つ理由【12日目に学んだHTML、CSS】

Webデザイン
Webデザイン科・職業訓練の日記をブログに書く3つ理由【12日目に学んだHTML、CSS】
こーいち
勉強することが不安を解消する解決策ですね。

こーいちより

P.S. 40代・未経験でもコツコツ勉強しよう。

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

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.