エディタ「Atom」を使ってみた！（HTML&CSS初級編のコードの書き写し）
今日は七夕です。🎋
プログラマーを目指すぞ！って決めて勉強しはじめてから今のところProgateさんを使っています。
Progateさんは、サイトのデザインがきれいだなぁ、と思って使いはじました。とても今風で気に入っています。
肝心の内容も、
スライドを読む→その内容のコードを書く→わからなかったらすぐスライドで確認する
といったことがすべてWebサイト上でできて、KAEDEのような超初心者にもとてもわかりやすいです。
こんなのが無料でできるなんて… ありがたいなぁ！
だけど… 無料だと勉強できる範囲が限られているんですよね （涙）。まぁ、当たり前の話ですけど。。。
課金しないとこのままではむりだなぁと思いつつ、もうちょっと無料で楽しんでみよう！と今のところ思っています。Progateさん ごめんなさい！
エディタ「Atom」でコードを書き写してみた！
JavaScript Ⅰ コースを終了して次は何をやろうかなぁ〜、と考えていましたが、
よーし！まずはここで一旦実戦だぁ！
と思ってWebページを実際に作ってみることにしました！
と言っても、いきなり自分ですべてを作ることは無理なので（当たり前^^;）、HTML&CSS初級編で書いたコードをエディタ「Atom」で書き写してみて、それをブラウザで読み込んでWebページとして再現してみることにします。
↓ここに書いてあることを、初級編で書いたものに置き換えるイメージです。
まずはHTML&CSS初級編で書いたコードをダウンロード。
Progateダッシュボードの修了レッスンから、HTML&CSS初級編 復習するボタンを押すと次のような画面になり、ここからダウンロードできます。
ダウンロードしたものは zipファイルで、それを解凍するとhtml_study_1というフォルダができます。そのフォルダの中のpage23フォルダが完成版のはずなので、その中のindex.htmlファイルを一旦Atomで開きます。Atomで開くと↓こんな感じになります。
こうしてAtomで表示されたコードをすべてコピーして、それを今度はEvernoteに貼り付けます。
今回Evernoteに貼り付けましたが、Evernoteでなくてもメモアプリとかでもいいかもしれません。あ、KAEDEはMacなので、Mac環境で書いています。
htmlファイルをそのままEvernoteとかで開くと、タグとか全部消えてしまって、↑こんな感じのコードにならなかったんですよね〜。だから、こんな面倒なことをやってますが、もしかするともっといい方法があるのかもしれません。が、そんな方法がわからなかったですー(｡>﹏<｡)
次は、画面の半分をEvernote、もう半分をAtomにしていよいよ書き写していきます。
その前にエディタはHTML記法にしておかなければならないようです。
カチャカチャカチャカチャ…
エディタはむちゃくちゃ便利で、例えば div と打ってtabキーを押すと、自動的に<div =class""></div>まで書いてくれます！Progateのレッスンでも習いました。
それが実際のエディタでそうなるとちょっと感動します！エディタにも慣れなくちゃだね。CSSファイルも同様にやっていきます。
よしできた！ブラウザで読み込んでみよう！
あれ？なんか違う。レイアウトとかおかしいし… →見直し。
というのを何度か繰り返し、ようやく完成できました！
実は、contents-itemのmargin-rightは40px指定なのですが、40pxにすると何故かレイアウトが崩れるんですよね〜。どうしてだろう？
ちょっとよくわかりません。なのでとりあえずそこは35pxにしました(^_^)v
だけどやっぱりちょっと右端が余っておかしいな（ウ～ン）。ま、いいか。初めてだし！
こうして、書き写しとはいえ自分でエディタで書いたものがブラウザで再現されると、おー！って感じで気分はもうプログラマーです。
ですが、こうして作ったWebページをPCの全画面で見てみると…
な、なんとチープな… 今どきこんなチープなサイトないよね… むしろまだこんなのすら自分だけではつくれないんだ…
と、まだまだ登らなければならない山の大きさに愕然ともします。逆にその山が大きすぎてプログラミングってあらためてすごいなぁと思います。
Wrap up!
ただただ書き写しているだけなのに、書き写し漏れとか、スペル間違いとかがあって、コードを書くのもなかなか難しいなもんだんなぁ、と反省もありました。書いていくべき順序もまだよくわかんないし。
また、あれ？こんなの勉強したかな？と思ったのもたくさんあって、まだまだ復習が必要だなぁと痛感させられました。やっぱり実戦一番！勉強になるなぁ！（模擬だけど）
最後に個人的にまったく忘れていたことを振り返ります。
今回、Evernoteに元テキストを貼り付けて書き写していったのですが、Evernoteだと忘れていたところに自分でマーカーが引いておけるので、後で復習のために見返すとき便利でした。
HTML
<input>
<textarea></textarea>
<input =class"contact-submit" type ="submit" value ="送信">
以上まったく忘れていました(^_^;)
list-style:none; これなんだっけ？
.header とかの頭の「.（ピリオド）」 そうだ。こういうルールだったかも(^_^;)
全般
pxって具体的にはいったいどれくらいのなの？
よし。復習だー！
