Web制作おすすめツール・勉強のコツ

こんにちは! ヤマウチです。
実習2日目を向かえました。

昨日は急に冷え込みがきつくなり
肩こりと腰痛が悪化してマッサージに駆け込みました。
座りっぱなしの姿勢が多いので同じ悩みを抱えている方が
多いのではないでしょうか。

長時間のデスクワークをする時はストレッチが一番です。
頭の上に両手を乗せて、体を左右に揺らすだけでも
首・腰・背中のストレッチになります。
私も疲れた時に行っていました！ぜひお試しください！

では、今日はWeb制作の勉強ツールを紹介したいと思います。

ドットインストール

もちろんご存知の方も多いでしょう。
私は職業訓練でドットインストールの存在を知りました。
タイムスリップして一人で勉強していた時、
参考本と検索で勉強していた自分に教えてあげたいと思いました。
それだけ便利で分かりやすい勉強ツールです

簡単に説明をするとHTML・CSSをはじめPHP・javascriptなど
Web制作に必要なことが項目ごとに動画見ることができます
しかも全てが3分以内！！！
中だるみせず、知りたい項目に集中できるからとてもオススメです。

ひとつ注文を付けるなら、説明は分かりやすいのですが、
3分以内に収めているので少し早口なところ。
でも繰り返し視聴できるから聞き漏れナシです！

苦手なメールフォーム

私はメールフォームのタグが苦手で、name、value、type・・・など
何の属性を入れたらいいか分からなくなったり。と
避けていた部分でもありました。

特に分からなかったのは<label>!!!
どこに付けるのか、何の為に付けるのか。全く分かりません！！

で、この苦手意識を改善したくてドットインストールで勉強。
目的の動画を見ながら、メモをとって合計３回は同じ動画を見てみました。

分かったことは、
・フォーム部品の全てに付けることができる
・チェックボタン、ラジオボタンに付けると便利
・<label>でマークアップした部分をクリック。
関連させているチェックボックスやラジオボンタンをチェックすることができる。

＜使い方１＞まるっと全体をlableでマークアップ

どちらを食べたいですか？
<label><input type"radio" name="food" value="meet">肉料理</label>
<label><input type"radio" name="food" value="fish">魚料理</label>

＜使い方2＞forとidで関連づける

飲み物はどちらが好きですか？
<input type"radio" name="drink" value="coffee" id="coffee"><label for="coffee">コーヒー</label>
<input type"radio" name="drink" value="tea" id="tea"><label for="tea">紅茶</label>

３回目の再生の時は、実際の作成動画に合わせて、
同じように打ってみると理解が早いと思いました。
苦手意識もだいぶ和らぎました♪

ドットインストールを使ったことがない方、
苦手な部分がある方は一度お試しください。

mr100（HTML&CSSタイピング）

私はこのツールでだいぶタイピング上達しました！
ゲーム感覚で点数も出るのでちょっとムキになって
100点出すまでプレイし続けました（笑）

コーディング苦手な方や、初心者の方にはもってこいですよ！
綴りが間違えやすいコードが連続で出てくるのでとても勉強になります。
打ち間違いも減りますよ！
ぜひこちらも活用してみてください。

では、ヤマウチでした。