VSCodeの好きなところ
西野カナの曲、♪あなたの好きなところ をもじってみた。笑
歌詞に従って、「~ところ」って書いていってもいいけど、
さすがに見にくいからちゃんと書く(笑)
さあ今回から、VSCodeにプログラムを書いていく!(ちょっと楽しみ)
まずは、HTMLから。
プログラミング初学者にとって、一番とっつきやすいのは、おそらく画面だと考える。
となると、画面ってプログラミングなのか?設計なのか?ちょっと不明だが、
プログラミングって、学ぼう!、その仕事をしよう!と思わなかったら、たぶん一生知らないままで人生終わると思う。
でも今度から、小学校の授業かなんかに取り入れることになったんだっけか。
すごいなー、時代は変わるなー、歳とってくなーw
そんなわけで、頭がかたくならないうちにいっぱい覚えようと思う✊
と、いうことでボスから教材をいただいた。
「できる」!はい、やってみせます!!👍
ぱっと見たところ、カラーで見た感じがわかりやすいので、とっつきやすそう…!
勉強はいいね。なにも課題がないより、あったほうが人生豊かになる気がする。人との交流もあるし…!
そしてその教材を参考に、はじめのHTMLをVSCodeで書いてみた。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTMLのてすとだよ</title> </head> <body> <p>おはようございます</p> <p>今日は<b><em>20分</em></b>残業します!</p> </body> </html>
はい、今日残業します。笑
で、書いたら保存(ctrl+s)する。その瞬間、感動!!
なにが起こったか。それは…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTMLのてすとだよ</title> </head> <body> <p>おはようございます</p> <p>今日は <b> <em>20分</em> </b>残業します!</p> </body> </html>
保存した瞬間、なんとコードを整形してくれたのだ!!!!!
おおお、なんという機能!Atomくんには無かった!
素晴らしすぎて、一瞬口がぱかんって開いた(笑)
はじめにオススメされるがままにユーザー設定をいじったせいかもしれない。
その(推奨)設定方法はこうだ
1.VSCodeを開く
2.開いたら、左下の歯車マークをクリック
3.既定のユーザー設定とユーザー設定の二画面が表示される
→ ユーザー設定のほうに以下を設定する
これだけでOK!簡単3ステップ!
ここでタグの説明をしていく。
<!DOCTYPE html>
は、HTMLを書くときに必ずといっていいほど書く1行。
このタグは、HTML5で書かれているよって宣言してる意味かな。あまり意味は気にしなくていいと思う。でも大事。
<html></html>
タグは、HTMLでプログラムを書いているよ、と定義している。終了タグあり。
そう、終了タグには「/」がつくのでお忘れなく。
<head></head>
コンピュータ側の要素。この文章はどんなものかをコンピュータが読み取る部分。
ブラウザに表示させた時に、中身の書いた部分は、人間には見えない。コンピュータには見えているイメージ。
<meta charset="UTF-8">
<title></title>
ブラウザに表示させた時に、上に出てくるタブの部分の名前。終了タグあり。
こんな感じ↓
<body></body>
ブラウザが表示する部分で、コンピュータと人間に見える部分。終了タグあり。
<p></p>
パラグラフ。段落のこと。表示された時、改行され上下に余白できる。終了タグあり。
<b></b>
文字を太文字にしたいとき。終了タグあり。
<em></em>
エンファシス。文字を斜体にしたいとき。終了タグあり。
さっそく上のHTMLファイルをブラウザに表示させてみると、
表示できてますね。「20分」を、太文字&斜体で書いているのも反映されている◎
で、最後に大事なのは、
「.html」で保存すること!
じゃないとHTMLファイルじゃなくなっちゃうからね!!笑