【HTML】ドットインストール#1-5【Web学習】day1

【HTML】ドットインストール#1-5【Web学習】day1
2020年1月8日

ドットインストールに新規登録したキムタッカーです。

まず右も左もわからないのですが、最初のロードマップ通りに進んでいきたいと考えています。

HTMLからですね。ドットインストールの中の「初めのてのHTML(全14回)」という動画を見始めてみます。

ドットインストールをインストールしてみる


はっきりと書きます。

私はプログラミングのプの字も知りません。

つまり、一番の初歩となる(と言われている)HTMLと言われている言語についても何一つ知りません。

私の現在の知識はそんなもんです。

さっそくドットインストールに無料で新規登録してみます。

Googleアカウントなどを持っていれば同期できるため楽に登録できました。

ふむふむ。ブラウザはクローム、エディッターはvsコードを使いますだって。

なんのこっちゃ。意味わからん。vsってことは何かと戦うのか? パソコンとってこと?

少し話を脚色しましたが、これが最初の感想。でも初心者なんてそんなもんでしょ。

焦ってもしょうがないよね。どんどん行きましょう。

始める前に準備が必要


やっぱり何事にも準備は必要ですよね。

ドットインストールにも前準備は必要でした。

初めてのHTMLの#1の下の概要欄をみてみると、

このレッスンを始める前に、以下を参考にして学習環境を整えるようにしましょう。

とある。どうやら、始める前に色々と準備があるらしいね。

前準備として

・HTML/CSSの学習環境を整えよう [Windows編] (全5回)
・HTML/CSSの学習環境を整えよう [macOS編] (全5回)

この2つで学習の環境を整える必要があるんですね。了解しました。

私はWindowsユーザーのため上をクリックしてみます。



なるほど。Google chromeは既に使っている。次にvisual Studio code

をインストールすればいいんだね。はい。簡単でーす。

なんせ動画の通りに打ち込んだりダウンロードしたりして設定するだけだもん。

さすがの私でもできますって。

初めてのHTML開始


ではいよいよ本格的にHTML開始です。

#1-#5を一気に実践してみます。

興味がある人は自分でもドットインストールをやってみると思うので、内容は詳しく書きません。

  • タグを覚える
    <h1></h1>ヘディング(見出し)や<p></p>パラグラフ(段落)
    <img>イメージ(画像)
  • タグにはいろいろな属性を付けたせる
    <img src=”img/kimutakka.png”>これでkimutakkaというファイルの画像が差し込まれる。
    <img src=”img/kimutakka.png”width=”120″height=”120″>と書き込むことで120×120の大きさに表示を変更することができる。
  • タグ毎に付けられる属性は決まっている
  • 基本的にHTMLコードを書く時には大文字でも小文字でもいいが、気を付けるのはコードを書く時には半角英数字で書くこと。じゃないと認識されない。

振り返りと今後の課題


本日は生まれて初めてコードというものに触れてみた。
もろもろの事情により1時間ほどしか学習できなかったため本日はここまでで終了とした。
素直に思ったのはプログラミングって面白いねってことです。別に難しいコードを書いているわけではないので、理解できたから面白いのではなく、「なんか英字と数字と記号ばっかりな画面をカタカタやってる俺かっけー」と一人でニンマリできているから楽しかったって意味です。
しかし、ドットインストール、このサイトは侮れないね。本当に初心者にもわかりやすく説明してくれている。ありがたいです。




基本的にはどんどん動画を進めて勉強していこうと思いますが、コードを書いていて切実に思ったのがブラインドタッチの未熟さですね。こうやって普通の文章を書くだけなら全然問題なくブラインドタッチはできます。でもね、記号や数字が入ると途端にキーボードを目で追ってしまう。

記号ってさ、Shiftキーを押しながら違うキーも押さなきゃいけない。
例えばダブルクォーテーションと言われる「”」を打つ時にはShiftキーと左上の2のキーを押さなきゃいけない。ということは右手でShiftキー、左手で2のキーを押します。んで、「<>」とか「=」とかを打つのには左手でShiftキーを押しながら右手で「、」や「。」を押さなきゃいけません。私はそうしてます。もしかしたらちゃんとしたタイピングがあるのかもしれませんが、まだ私はそこまで覚えていません。そういう記号や数字系のタイピングがすごく弱いことに気づかされました。まずね、左右のShiftキーを目で探そうとしちゃうんですよ。何とかそれっぽいところを小指で押したと思ったら↑キーだったり、Caps Lockキーだったりするんですよ。それをやっちゃうとリカバリーするのにも若干のタイムロスが生じてしまいます。




グーグル先生に「ブラインドタッチ 上達するには」とかって検索かけないとね。たぶん最初にしっかりしたタイピングを覚えてしまうのが一番の近道になる。それだけはなんとなくわかるんだよね。基本はしっかりと!頑張っていきましょう。

 次回は「未定」をお届けしたいと思います。是非ご覧くださいね。
 以上、ブロガーキムタッカーでした。また来週!