Web Design

職業訓練の日記をブログに書く3つの理由【Webデザイン12日目】

2021年6月24日

Webデザイン
  • 「職業訓練の日記をブログに書く理由は?」
  • 「職業訓練Webデザイン科ではどんなことを学んでいるの?」

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

 この記事でわかること

職業訓練の日記をブログに書く3つの理由
職業訓練Webデザイン科12日目に学んだこと

 本記事の信頼性

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

職業訓練Webデザインに通う人の中には、授業内容をひたすらノートに書き留めるのが大事と考える人が多いです。

私もそうでした。
先生の話した内容をひたすらメモ。

ただ、「ノートを読み返しても何が書いてあるのかわからない。読み返しただけでは復習にならない」と感じていました。
ゆえに、今ではノートをもとに当ブログ(Blog Chronicle)に日記のようにまとめています。

本記事では、職業訓練での学習内容を日記に書く3つの理由を解説していきます。

記事後半では、職業訓練12日目に学んだ内容をまとめています。

ちなみに職業訓練11日目については、【40代の職業訓練】Webデザイン未経験でも慣れてきた3つの理由で解説しています。

職業訓練校の卒業まで、ブログにアウトプットしていきます。

職業訓練の日記をブログに書く3つの理由

Webデザイン職業訓練日記

 職業訓練の日記をブログに書く3つの理由

理由その1:学習内容のアウトプット
理由その2:Web上の自分の備忘録
理由その3:ブログから離れたくない

順番に解説します。

理由その1:学習内容のアウトプット

インプットしただけでは、記憶は定着しません。

「入力と出力」が大事です。
インプットとアウトプット。

アウトプットを意識して初めて、インプットの質が変わります。

具体例をあげます。

いちばん単純なアウトプットは書くことです。
先生の話や学んだことをノートに書いてみる。

非常に単純ですが、聞いたことを書くことは立派なアウトプットです。
漠然となにかを読むより、記憶は強固なものになります。

ゆえに、当ブログ(Blog Chronicle)に学習内容をアウトプットすることで、学んだことの定着習得に注力しているのです。

理由その2:Web上の自分の備忘録

ブログにアウトプットしておけば、いつでもどこでも学んだことを閲覧できます。
ネット環境さえあれば、スマホでも復習やチェックが可能なのです。

たとえば、ちょっとした空き時間にブログ記事をひととおり眺めれば簡単な復習になります。

ブログの「検索窓」からキーワードを打ち込めば、目的の記事にたどり着けます。

疑問がすぐに解決できるのです。

いっぽう、ノートの場合はノートそのものを持っている必要があります。
検索するときも、パラパラとノートをめくり、該当箇所を探す必要があります。

検索にめっぽう弱いのがノート。
まるで復習に適しません。

ただ、「ノートには考えたことをメモできるし、またアウトプット速度も早いのでノートは重宝するのでは?」という意見もあります。

本当にそうでしょうか?

授業を受けながらmac純正のメモアプリに書き込んだほうが、手書きより早いです(ブラインドタッチができる人限定)。

最近では、有用な文字起こしアプリもあるのでブラインドタッチも不要かもしれません。
もちろん、文字起こしを再度読んで情報の取捨選択は必要ですが。

じゃあノートの有用性は?

図解ができることです。

キーワードを線で結んだり、簡単な表を書いたり、立体的にメモするのに向いています。

mac純正のメモアプリではできません(表は作れます)。

理由その3:ブログから離れたくない

Webデザインの職業訓練校に通い出してから、ブログの時間が半減しました。

今までは休職していたので1日7〜8時間、ブログを書いていました。
授業を受けるようになると、毎日5時間の授業後はブログを書く気になれません。

けっこう、ヘトヘトなのです。

しかし、ブログから離れることだけはしたくない。
稼げなくても、ブログとは近い距離を保ちたいのです。

なぜなら、書くことが自分そのものだから。

私からブログやランニング、読書をとったら何も残りません。
唯一のアイデンティなのです。

ゆえに、職業訓練で学んだことをブログに書くことは、「復習もできる&ブログも書ける」という一石二鳥なのです。

以上の3つが、職業訓練の日記をブログに書く理由です。
再度まとめます。

理由その1:学習内容のアウトプット
理由その2:自分用のWeb上の備忘録
理由その3:ブログから離れたくない

ブログにおいて日記は読者のためになりませんが、自分の成長用として割り切っています。

なお、日記の効果効用については下記記事にまとめています。

【職業訓練12日目の学び】入力フォームのHTML、CSS

Webデザイン

職業訓練12日目は、「入力フォーム」を作りました。
以下の作り方を学んでいます。

ラジオボタン
チェックボックス
セレクトボックス

2カラムに分ける

2カラムに分けるHTML、CSS

index.html

<div class="inner col_wrap">
 <main>
  <div class="flow_area">
   <ul>
    <li class="current">1.入力</li>
    <li>2.確認</li>
    <li>3.送信</li>
   </ul>
  <div>
 </main>

 <div class="side">
  <ul>
   <li><a href="./">お菓子の教室</a></li>
   <li><a href="#">お申込みの流れ</a></li>
   <li><a href="#">参加者の声</a></li>
  <li class="current"><a href="#">お申込み</a></li>
  </ul>

 <aside>
  <p><a href="#"><img src="../../img/bnr.jpg" alt="ブログバナー"></a></p>
 </aside>

 </div>
</div>

style.css

.contact .under_title{
 background-image: url(../img/contact_main.jpg);
}

.contact .flow_area{
 margin-bottom: 70px;
}

.contact .flow_area ul li{
 border: 1px solid #f77237;
 color: #f77237;
 width: 90px;
 line-height: 90px;
 text-align: center;
 border-radius: 90px;
}
/*liはブロック要素、高さは文字分のみ*/

.contact .flow_area ul li.current{
 background-color: #f77237;
 color: #fff;
}

お問い合わせフォーム作成【inputタグ】

HTMLでは、入力内容をPHPなどに送る必要があります。
PHPも普通のテキストファイルです。

index.html

<div class="form_area">
 <form action="mail.php" method="POST">

 <dl>
  <dt><label for="daihyou">代表者のお名前</label></dt>
  <dd><input type="text" name="daihyou" id="daihyou"></dd>
 </dl>

 <dl>
  <dt><label for="mail">メールアドレス</label></dt>
  <dd><input type="email" name="mail" id="mail"></dd>
 </dl>

 <dl>
  <dt> <label for="qa">ご質問</label></dt>
  <dd>
   <textarea name="qa" id="qa"></textarea>
  </dd>
 </dl>

 <p><button type="submit">この内容で次へ</button></p>
 <!-- ボタンはpタグで括っておくと後がラクかも、submit=送信 -->

 </form>
</div>

入力はformタグ、methodでデータの運び方も必須。
<form>タグのactionは、<a>タグのhrefと同じ意味。

<input>タグには、type属性、name属性(中はなんでもOK)が必須。
<input>タグはインライン要素。
name属性のnameはPHP開発者に聞かないとわからない。

メモ:おさらい

dl要素(definition list 定義リスト)
dt要素(definition term 用語)
dd要素(definition descriptionその用語に対する説明)

先生から「Webディレクターになるなら、大きな流れは把握しておくこと大事」と聞きました。

仕事をお願いする立場として「相手の仕事内容がまったくわからないのはNG」と理解しました。

【HTML】ラジオボタン、チェックボックス、セレクトボックス、入力フォーム

ラジオボタンのHTML

index.html

<dl>
 <dt>参加される保護者</dt>
 <dd>
  <input type="radio" name="hogo" value="ご両親" id="hogo1">
  <label for="hogo1">ご両親</label><br>
  <input type="radio" name="hogo" value="お母さん" id="hogo2">
  <label for="hogo2">お母さん</label><br>
  <input type="radio" name="hogo" value="お父さん" id="hogo3">
  <label for="hogo3">お母さん</label><br>
  <input type="radio" name="hogo" value="その他" id="hogo4">
  <label for="hogo4">お母さん</label>
 </dd>
</dl>

選択したときに、送る言葉を決めるのがラジオボタン。

radioボタンは選んだら消えない。

name属性でグループ化する(同じ名前hogoなど)
value属性が必要で、nameと一致しなくてもOK。
valueと言葉は一緒じゃなくてもOK(因果関係なし)

valueがあって送信されます。

<label>でくくると文字にクリックができます。
ただし、for属性で名前をつけて、inputにid=名前を同じにする必要があります。

チェックボックスのHTML

index.html

 <dl>
  <dt>好きなケーキを選んでください</dt>
  <dd>
   <input type="checkbox" name="cake" value="ショートケーキ" id="cake1">
   <label for="cake1">ショートケーキ</label><br>
   <input type="checkbox" name="cake" value="チーズケーキ" id="cake2">
   <label for="cake2">チーズケーキ</label><br>
   <input type="checkbox" name="cake" value="モンブラン" id="cake3">
   <label for="cake3">モンブラン</label>
  </dd>
 </dl>

name属性はバラバラでもOKですが、面倒なので「cake」に一致させています。

 重要ポイント

選ばせる系 → valueが必要
入力する系 → value不要、なぜなら、そのまま飛ぶから

ラジオボタン、チェックボックス、セレクトボックスはすべて「選ばせる系」ですね。

セレクトボックスのHTML

index.html

<dl>
 <dt><label for="hizuke">ご参加日時</label></dt>
 <dd>
  <select name="hizuke" id="hizuke">
   <option value="">日付を選択してください</option>
   <option value="2021年7月3日">2021年7月3日</option>
   <option value="2021年7月10日">2021年7月10日</option>
  </select>
 </dd>
</dl>

<select>タグの中は<option>で書くのがルールです。

メモ

Windows → ctr+半角スペースでコードヒント
Mac → 半角スペースを前後に入れてコードヒント

覚えるべきことは「選ばせる系はvalue必要」です。

ご質問フォームのHTML(ある程度の文章を入力できる)

index.html

<dl>
 <dt><label for="qa">ご質問</label></dt>
 <dd>
  <textarea name="qa" id="qa"></textarea>
 </dd>
</dl>

<textarea>タグは閉じタグが必要。

デフォルトで<textarea name="" id="" cols="30" rows="10"></textarea>と出てくるが、cols="30" rows="10”は不要。

なぜなら、cssで指定するから。

【CSS】ラジオボタン、チェックボックス、セレクトボックス、入力フォーム

ラジオボタン、チェックボックスの装飾のCSSは以下のとおり。え

style.css

.contact dl{
 margin-bottom: 30px;
}

.contact input[type="text"],
.contact input[type="email"]{
 width: 400px;
 border: 1px solid #ccc;
 padding: 1em; /*入力したものを読みやすく*/
}
/*inputタグかつtype属性がtextのインプットタグ*/
/*text、emailに対して*/
/*,はANDの意味*/

.contact input[type="radio"]+label,
.contact input[type="checkbox"]+label{
 padding: 5px;
}
/*ラジオ、チェックボックス隣接のlabel padding*/

.contact input[type="radio"]:checked + label{
 background-color: #f77237;
 color: #fff;
}
/*ラジオボタンがチェックされた隣接のlabel*/

.contact input[type="checkbox"]:checked + label{
 background-color: #3cad5a;
 color: #fff;
}
/*チェックボックスがチェックされたら隣のlabel*/

.contact select{
 padding: 1em;
 border: 1px solid #ccc;
}

.contact textarea{
 border: 1px solid #ccc;
 width: 100%;
 height: 100px;
 padding: 1em;
}

.contact button{
 border: none;
 width: 270px;
 height: 70px; /*ボタンの場合はheightでもちゃんと真ん中になる*/
 background-color: #3cad5a;
 color: #fff;
 cursor: pointer; /*カーソルがのっかったときに指マークになる*/
 transition: 0.3s; /*0.3秒かけて遷移*/
}

.contact button:hover{
 opacity: 0.5; /*不透明度*/
}

参考になるサイトは、以下のとおり。
» 参考:【初心者向け】0からformがわかる|HTMLでのフォーム作成

キービジュアルの作り方【background-size】

HTMLは高さの中で真ん中をとるのは難しい。
したがって、<table>タグを使って考えます。

<div class="t_wrap"> → tableの代わり
<div class="cell"> → tdの代わり

index.html

<div class="key">
 <div class="inner">
  <div class="t_wrap"> 
   <div class="cell"> 
    <p>美味しいケーキをたくさんの人たちに<br>
    召し上がっていただきたい<br>
    <span>それがケーキ屋の想いです</span>
    <!-- <img src="img/key.jpg" alt="ケーキ屋の想いです"> -->
    </p>
   </div>
  </div>
 </div>
</div>

style.css

.key{
 margin-bottom: 30px;
 background-image: url(../img/key2.jpg);
 height: 500px;
 background-size: cover; /*Y軸のセンター*/
 background-position: center; /*X軸のセンター*/
}

.key .t_wrap{
 display: table;
 height: 500px;
 width: 100%;
}
/* 親要素にtable要素にする */
/* tableは文字にしか高さ、幅が取れない、ゆえに高さ,widthを入れる */

.key .cell {
 vertical-align: middle;
 display: table-cell;
 text-align: center;
}

/*divタグに対してvertical-alignは来ない*/
/*子要素にdisplay: table-cell; テーブル要素に見せかける*/

.key .cell p{
 font-size: 46px;
 line-height: 1.5;
 color: #fff;
 background-color: rgba(247, 114, 55,0.5);
 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
 display: inline-block;
 padding: 46px;
}

/*要素は、横幅と高さの指定が可能*/

.key .cell p span{
 font-size: 21px;
}

 background-sizeに使うプロパティ一覧

cover 元画像の縦横比はそのままで、要素をちょうどよく覆うサイズにする
contain 元画像の縦横比はそのままで、要素に元画像がすべて収まるように調整する
auto 自動算出する。基本的に元画像の大きさそのまま
数値px pxで大きさを調整する
数値% 要素に対しての割合で指定する

【まとめ】職業訓練の日記でアウトプットしよう

Webデザイン

 【まとめ】職業訓練日記をブログに書く理由

理由その1:学習内容のアウトプット
理由その2:自分用のWeb上の備忘録
理由その3:ブログから離れたくない

授業をmac純正のメモアプリに書き留める。
ブログにアウトプットするために、再度読み直し、理解をして、読みやすくまとめる。

これだけで、けっこうな労力です。

ただ、自分のためになり、場合によっては1ミリでも読者のためになる。

ゆえに職業訓練の日記を、自分のためにブログに書くのはありです。

なお職業訓練13日目については、下記記事で詳しく解説しています。
»【初心者向け】Webデザイン基礎知識まとめ【入門から色彩、配色】

【初心者向け】Webデザイン基礎知識まとめ【入門から色彩、配色】

ブログで検証ができるのもメリットです。

こういちより

P.S. ブログにアウトプットしよう。

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

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.