唐突ですが!
親子でプログラミングでも学んでみることにしました。
中学受験勉強中はなかなか他のことをする余裕もないのですが💦、近い将来きっと呼吸するようにコーディングする時代が来るのではないかと思い(笑)、昨年子供たちにPCを1台ずつ与えました。
娘にはMac Book Air
息子にはWindows
与えたはいいけど、得意のほったらかし状態で😅しばらく寝かせちまいました。
私自身が全くのゼロ知識で、どんな教材を与えていいのやらわからずアレコレ考える間に完全迷子になっていたからです。
結局、子供たちに始めてもらうには、まず私が学習する姿勢を示そうということで、勝手に私がやりたいものを選びました(笑)。
そんなわけで、すっかり劣化した私の脳みそに鞭打って?プログラミング学習を始めてみたいと思います。
こんな日が来るとは😅。繋がれ私のシナプス!!
学習効果を高めるため、そして知識ゼロからおばちゃんがプログラミング学習したらどんな道をたどるのかがもしかしたらどなたかの参考になることもないかもしれなくもないので(笑)
これから学んだことを書き綴っていこうと思います。
きっと超スローペースだけど、やさしく見守って頂けると幸いです。
興味ない方にはつまらないと思うのでサクッと飛ばして他の記事を見てってください!
ちなみに、なぜ子供たちに違うOSのコンピューターを与えたのかには特に意味ありません。
私はずっとWindowsユーザーなのですが、私の周りのIT業界で活躍されている方はみんなMacが使いやすいというので、子供たちにはMacを与えてみようと思ったんです。
で、息子にも同じものを買おうとおもったら、息子が私と同じがいいというのでWindowsになった、というだけです😅。
娘はその後学校でSurfaceを全員購入することになったので、ダブらなくてよかったです。我が家で唯一の両刀使い。うらやましいぞ。
では早速今日学んだことを記録していきまーす。初歩的過ぎてずっこけたらごめんね!
今日学んだこと(HTML)
- HTMLを学習する環境づくり
- タグ、コンテンツ、属性
- HTMLファイルを作ってみる
HTMLを学習する環境づくり
- HTML5 UP
- Visual Studio Code
HTML5 UP
https://html5up.net/
HTML5 UPはテンプレートを配布しているサイトです。
ここから好きなテンプレートをダウンロードして使えるんだって。かっこいいのがいっぱい!これ全部無料で使えるってすごくない?!
今日はとりあえず一個ダウンロードして保存しました。
Visual Studio Code
https://code.visualstudio.com/
Visual Studio Codeは、コードエディタ。世界中で最も使われているエディタだそうです。こちらも無料です。
こいつらをダウンロードして、学習する環境をつくりました。
Visual Studio Codeのワークスペース
Visual Studio Codeのワークスペースをつくりました。
自分のPCのどこかに専用のフォルダを一つ作る。
Visual Studio Codeでそのフォルダを開く。
Visual Studio Codeではプレヴュー中のファイルはタブのタイトルはイタリックっぽく斜めに表示される。開いたファイルはまっすぐに表示される。
タグ、属性、コンテンツ
HTMLではタグ、属性、コンテンツを見分けれられるようにする。見分けられたらテンプレートを編集して使う。
タグは<>入ってるやつ。開始タグと終了タグ。終了タグには</p>みたいに/がはいっているよ。
pはパラグラフ(段落)<p> pタグって呼ぶらしい。いつもブログでお世話になっているh1タグはheading(見出し1)。
属性 タグの中にはいっているやつ。 属性名と属性値 <html lang="en">(言語=英語)を<html lang="ja">(言語=日本語)に変えてみた。
コンテンツ タグじゃないやつ。コンテンツが実際見えている部分。
HTMLファイルを作ってみる
Visual Studio Codeでファイルを一つ作ってみました。
タイトル.html という名前を付けてファイル作成。
1行目に「!」を入れると自動でタグが出てくる。これをEmmetっていうらしい。
<body>と</body>の間にコンテンツを書く。
保存してファイル名右クリックでフォルダを開くと、htmlファイルができているので、それを開いてみたら変わってた!
今日はここまで! これを子供と一緒に明日やるよ。それで私は自動的に復習できる♪