Progate 有料プランを使った学習 （HTML & CSSについて）
Progate の有料会員になって、元を取らなきゃ！と思って頑張って勉強していて、プログの更新まで手が回っていませんでした。 (^◇^;)
ひと月980円といえども、無駄にはできませんからね〜。頑張らなくちゃ！とは思うものの、ここで一旦勉強の手を止めて今までの学習状況を振り返ります。📝
今までに修了したレッスン
- HTML & CSS初級編 ×２回
- HTML & CSS 中級編 ×４回
- HTML & CSS 上級編 ×１回
- HTML & CSS 初級編 道場コース ×１回
- HTML & CSS 中級編 道場コース ×２回
- JavaScript Ⅰ ×３回
- JavaScript Ⅱ ×２回
- JavaScript Ⅲ ×２回
- JavaScript Ⅳ〜Ⅶ ×１回づつ
- JavaScript（ES5）Ⅰ〜Ⅳ ×１回づつ
- JavaScript（ES5）Ⅰ 道場コース ×１回
- jQuery初級編 ×１回
- Python Ⅰ ×３回
- Python Ⅱ ×２回
- Command line基礎編 ×1回
全部が全部有料プランではないけれど…どうだ！元とったか！
な〜んて、まだまだこんなものです。
HTML & CSS からはじめるのがよい、と多くのWebサイトに書いてあるので、その通りHTML & CSSとか、いわゆるフロントエンドから勉強しています。
勉強するからには、まずは動きのない静的サイトのコーディングができるようになりたいな、と思っているのですが、これがなかなかどうして難しいです。
サイト模写にチャレンジ！
Progateは、エディタを用意しなくても、Webサイト内でコードを書いて学習を進めていくことができます。これが大きな特長のひとつです。そして、ステップバイステップでスライドを見て学習して、指示どおりにコードを書いていけば、あまり理解できていないとしても修了することが可能です（ホントにわかっていなければ、答えを見る以外無理だと思いますけど）。あまり挫折することがない学習方法だと言えます。
で、Webサイトのコーディングができるようになったのか？
そんなに甘くないですよね〜。(^◇^;)
HTML & CSS中級編を終わらせたところで、よ〜し、道場コース中級編を片付けるぞ！と勇んでとりかかったところ、あっけなく敗退してしまいました。
道場コース中級編は、サイト模写に近く、本当にわかっているのかどうか試されます。あまりの出来なさに愕然としましたが、もう一度学習コース中級編をやった直後にやり直すと、スライドを振り返りながらですけど、なんとか修了することができました。
中身はどうあれ完成!! 今日はここまで。
— KAEDEプログラマーを目指します！ (@KAEDE_o09) August 11, 2019
「HTML & CSS 道場コース 中級編」コースを修了しました！ https://t.co/rSLZ69RQFh #Progate
これが終了時のツイートです。
そして、実力をつけるにはサイト模写だ！と、模写にとりかかったのですが…
これがまったくできません。(T_T)
あ〜、才能ないなぁー、と思いました。Webサイトづくりなんて無理だよ…
けど、これはやっぱり道場コース中級編が、もっとスムーズにできるようにならないとダメなんだ、と思ってやり直しました。２回目は少しスムーズにできるようになりましたが、それでも他のWebサイトの模写なんて、まだまだ夢のまた夢。今のところ私は、そんなレベルです。
Progate 有料プランを使って効果的に学習するには？
それでも自分なりにできないところは何なのか？がわかりました。それは…
- HTMLが書けない
- CSSが書けない
ということです。全部じゃないかー！あはは。
ヘッダーとかフッターは比較的わかりやすいんですけど、本文の中とか見てもよくわかんないんですよね〜。つまり<div></div>とかの付け方が。
そもそもマークアップできないのは致命的なのでは？と思いながら、再度HTML & CSS 学習コース中級編をやり直してみると、div、div、div、div、divの嵐。なるほど、このdivは、このCSSのためなのかな？とか少しわかりました。
同時にProgateの効果的な使い方というか、向き合い方もわかってきました。
Progateは、あまり理解できてなくても、レッスンを修了することができます。修了したレッスンが増えていくのは、それはそれで気持ちがいいものです。
だけど、それが理解につながっているか？は別で、理解できるまで同じレッスンを何周も何周も手を動かしながらやっていくのがいいんじゃないかな、と思います。有料プランの間はそれが繰り返せる。それがメリットでもあるでしょう。
ただ、惰性で周回を重ねても、頭に入ってこないし…、おもしろくないし…、という状態になります。それでは意味がないので、サイト模写にチャレンジしたり、ポートフォリオサイト作りにチャレンジしたりしながら、わからないところ＝現時点の課題を発見する。そして、その課題を解決するひとつとしてレッスンをやり直す。
そういったことを繰り返していくのが、一番いいんじゃないかなぁ、と思います。
何の勉強でも、そうだと思いますけどね。
Wrap up!
まとめということもないのですが、自分の弱点はマークアップできない事だなぁ、と思ってネットでいろいろ調べていたら、KAEDE的にとてもわかりやすいWebサイトを見つけましたので、リンクを貼っておきます。
このサイトが、とってもわかりやすかったです！
また、サンプルサイトも作れるように素材と丁寧な解説ページがあったりして、とっても勉強させていただきました。
元を取らなくちゃ！と思って、張り切りすぎた気がしてます。次々とこなすのもムダとは思いませんが、ゆっくりめのマイペースになっても、ひとつづつ理解しながらやっていこうと思います。早く、早く、と焦る気持ちもあるのですが、人生100年時代、時間はまだまだありますからね〜。
マイペースで明日も頑張るぞー♫
Progate 有料会員になりました。
とうとうProgateの有料会員になりました！
このまま無料で勉強し続けていくのは、ちょっと無理があるなぁと考えていて、来月になったらProgateの有料プランを申し込もうと計画していました。そのためにもProgateの有料プランを調べておこうと思ってWebサイトを見てみたら…
なんと！ひと月って申込日からなのね！
と、今さらながらに知ったのでした。(^_^;)
な〜んだ。月初めまで待たなくていいんじゃん…。
というわけで、早速有料プランに申し込みました。ま、ちゃんと読め！って話しですけどね。
前回の予告では今回は、「img要素の横にp要素を並べる方法」について書く予定だったのですが、有料会員になって早速有料コンテンツをやってみましたので、予定を変えてその感想を書きます。
ひと月９８０円！時間を惜しんで元をとらないとダメですからねー。
HTML＆CSS 中級編にチャレンジ
まずはHTML&CSSの中級編をやってみました。
中級編は７章１８レッスンあります。初めの２レッスンは無料でできます。ほとんど学べることはないですが…。
実は、初級編を終わらせたとき、無料のままできるその２レッスンをやってみていたのでした。そのときのブログ記事はこれです。
todayisabeginningoftomorrow.hatenablog.com
そのときは題材の見本サイトを見て、こんなの本当に自分にできるんだろうか…
と不安になりました。初級編とは異なり、あまりにも見本サイトがカッコよく複雑そうに見えたからです。そう、KAEDEにとっては、中級編は目の前に立ちはだかる初めての大きな敵で、これはなんとしてもやっつけなければならない！と思っていたものなのです。
ということで、少し緊張しながら、いざ！
カチャカチャカチャカチャ
Progateは、エディタを開かなくても、ブラウザ上で全て完結できるのが、いいですねー。実戦的なエディタも好きですけどね。
カチャカチャカチャカチャ。あ、なんかわかる！
超初心者のKAEDEでも順を追っていけば、カッコいいページが作れるようにレッスンは構成されています。だんだんと、こんなの自分でつくれるだろうか…と考えていたページが完成に近づいいきます。早く完成させたくて、どんどんどんどんレッスンを進める手がとまりません。楽しいです。
そして、やること数時間。なんと修了しました！
Wrap up!
大きな敵だ！と思っていましたが、あっけなく１日もかからずに修了することができてしまいました。
もちろんProgateのレッスンの出来の良さのおかげです。まずスライドで勉強して、それから勉強したことをブラウザ上で動くエディタで書いて演習していくのがProgateのスタイルです。レッスンはパートごと細かく区切ってありますから、「できた」という成功体験を積み重ねて進めていけるようになっています。
スライドはわかりやすく、演習中にわからなくなってもすぐにスライドを見返せるので、初心者でもつまづくことがあまりありません。いろんなところでオススメされているProgateですが、これからプログラミングの勉強をはじめてみようかな、と思う方にはほんとオススメです。
Progateのわかりやすさもあるのですが、今回意外にすいすいとできたのは、ここまで来る間に、自分で調べながらプロフィールサイトを作ろうとしてみたことが大いに役立っていると感じました。自画自賛。(^o^) 自分で調べたという経験は、ほんと役立ちます。実戦大事！
そのすいすいの中でも、ちょっとわかりにくかったことをメモしておきます。重点的に復習リストです。
letter-spacing: ; 文字間の調整ができる
opacity: ; セレクタに透明度をつける
font awsome ドットインストールでも習ったが、使い方はいまいちピンとこず
transition これも使い方が、いまいちピンとこず
line-height: ; 行の高さを指定できる
positon: absolute;
position: relative; positionプロパティの使い方をよく調べよう
:active アクティブになったとき＝クリックしたときの動きを指定
z-index: ; positionをfixしたとき要素の高さを指定
意外に復習項目多かった(^_^;)
とにかく有料会員になって良かったです！
ひと月９８０円で自己投資ができる。いい世の中ですね。
さて、明日ももと取るために頑張るぞ！
HTML&CSS 初心者の疑問「p要素のheight」 テキストの場合
まだまだ勉強中の身ながら、てか、超初心者にもかかわらず無謀にもポートフォリオサイト（まだまだ未完成）を作っています！コチラ↓
昨日より少し外観を変更しました。☆☆☆
変更点は、
- ヘッダーの背景色をネイビーにしました。そして文字を白色に。ネイビー好きなんです。
- フォントを游ゴシックに。
です。
いろいろ遊んでいると楽しいです！(^_^)
で、昨日のエントリーに書いた疑問についても遊びながら考えてみました。
疑問「p要素のheight」について
フォントサイズを20pxにするとP要素のheightが30pxになって、img要素とheightが揃ってうまくいったけど、どうしてフォントサイズ20px→P要素のheight 30pxになるのかよくわからない。偶然こうなった、というのは失くしておきたいなぁ。
↑これが、昨日のエントリーに書いた疑問です。
img要素の横にテキストを配置できたのですが、img要素のheightを30pxに指定していて、その横のテキストのフォントサイズを20pxにすると、そのテキストのheightが30pxになって、うまく高さが揃いました。
でも、どうしてフォントサイズ20pxのもののheightが30pxになるのか？そういうものなのか？それがわかりませんでした。
ググってみると、widthもheightも初期値はautoになっているようです。widthはなんとなくわかるのですが、heightのautoっていったいいくつ？
と、さらにググってみましたが、KAEDEの調べ方が悪いのか、なかなか答えを見つけることができません。（きっと調べ方が悪いんだと思います(^_^;)）
なかなか答えがみつからないなぁ〜、こんなのは常識すぎて誰も書かないのかなぁ〜、とか思いながら… あ〜もう調べるのも面倒くさい、いっそHTML&CSSの練習ついでに自分で実験してみよう！と思いました。
実験は簡単です。まずはp要素を4つ用意して…
<p>heightのテストです。標準</p>
<p class="size20">heightのテストです。20px</p>
<p class="size30">heightのテストです。30px</p>
<p class="size40">heightのテストです。40px</p>
CSSでフォントサイズを言葉通りのフォントサイズに変更します。そして表示させてみたのがこちらです。↓
ここから各p要素を検証していきます。
まずは標準テキストを検証します。右クリック〜検証っと…
標準テキストのheightは24pxであることがわかります。
続いてフォントサイズを20pxにしたテキストの検証です。
heightは30pxになっていました。
さらにフォントサイズを30pxにしたものを検証します。
heightは45pxです！
なんとなくわかってきた予感！
さらにさらに、念には念をいれてフォントサイズを40pxにしたものも検証してみます。ドキドキ…
heightは60pxでした！
やっぱり！p要素のheightはフォントサイズの1.5倍になるんだ！
ちょっとした発見をした気分です。(^_^)
正しくいうとテキストのheightかもしれませんね〜。
ということは標準テキストのheightが24pxということは、逆算すると標準テキストのフォントサイズは16pxなのか？
と思い、標準テキストを検証してみるとフォントサイズは16pxでした！
Wrap up!
実験の結果、p要素のheightはフォントサイズの1.5倍になる（但しこの実験の範囲内）、ことがわかりました。p要素がテキストの場合でしょうけど。スッキリ！
今回勉強したのはheightについての疑問ですが、それを解消するために使ったchromeの検証画面の使い方もようやくわかってきたかなぁと思います。
こうして遊びながら勉強していくのは、なかなか楽しいもんです！
さて、本当はもう一つの疑問、img要素の横にテキストを配置する方法についても書こうと思っていたのですが、p要素のheightの話題だけでちょっと長くなってしまったので、それは次回にします。
よし！明日も頑張るぞ！
ポートフォリオサイト作ろう♪ （まったくの初心者だけど）
ProgateもドットインストールもHTML&CSSについては無料コンテンツをやってしまって、あ〜、やっぱり課金しかないなー、って状態。どうせ課金するなら月の頭からのほうがいいかなーと思って、今は、とにかく自分でつくってみよう！と無謀にもポートフォリオサイトを作ってみることにしました。
今月いっぱいは、これで遊ぼう！
ポートフォリオサイトを作ってみた！
いやぁ〜びっくりするほど身についてない(^_^;)
結構勉強したと思ったんだけどなー。
ま、今の実力はこんなものということでしょう。
ボックスモデルを理解するために、全てにボーダーをつけています。
よ〜し、ここから自分で調べてもう少しまともにしていくぞ！
と、まずはヘッダー部分の改良に取り組みます。
カチャカチャカチャカチャ
で、できたのがこちら。
自分では、まあまあみれるものになったと思っています！
調べながらつくったところ
①ヘッダーを固定しました。
ヘッダーは画面をスクロールしても常に表示していたいな、と思ったので、調べて以下のCSSにしました。
header{
background: #fff;
position: fixed; →これで固定できるらしい
top: 0; →どこから固定するかを指定
left: 0;
width: 100%;
}
結果
おー！見事に固定されました！
②アイコンの横にKAEDE Portfolio Website の文字を配置しました。
単純にimg要素の横にp要素を並べたいなぁと思っただけですが、意外にこれ悩んだんですよね〜。
header img{
width: 30px; height: 30px;
margin: 10px;
float: left; →floatプロパティを使って左にしたけれど、これ以外の方法はないのかな？
}header p{
display: inline-block; →こうすると横に並ぶ。
margin: 10px 0;
font-size: 20px;
}
フォントサイズを20pxにするとP要素のheightが30pxになって、img要素とheightが揃ってうまくいったけど、どうしてフォントサイズ20px→P要素のheight 30pxになるのかよくわからない。偶然こうなった、というのは失くしておきたいなぁ。
display:inline-block; もいまいち理解不足。これも偶然img要素とp要素が横にならんだけど、この使い方でいいのかなぁ？
③メニューはホバーで色が変わります。
これはドットインストールで勉強したことの復習です。
header li{
list-style: none;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}header li > a{
text-decoration: none;
color:inherit;
}header li > a:hover{
color:orange;
}
inheritっていい感じの文字色になったけど、何だっけ？
:hoverの書き方も忘れていたなぁ。
ドットインストールで作ったCSSを参考にしながら、書いてみたので、比較的楽でした。
ようやくヘッダー部分のみ、人様にお見せしてもそんなに恥ずかしくないものが出来上がったかと。。。(^_^;)
ああでもない、こうでもない、こうするとどうなる？とかやりながら遊んでいると時間はかかりますが、結構勉強になったかと思います。
とにかく自分でやってみると、自分の今の実力もよくわかりますね。さすがコンピュータ、ごまかしが効かないので、むっちゃデジタルに自分の実力がでます。
よくアウトプットが大事といわれますが、こうして自分で作ってみると本当にアウトプット大事だなぁと実感しました。
Wrap up!
上記②の要素のheight部分とdisplayプロパティは、今度みっちり勉強しようと思います。
残りのわからなかった部分
inherit 親に指定してある値を継承する。この場合、リンクにつく色（青）ではなく、そもそもの文字色（黒）になる。かな？
よし！明日も頑張ろう！
MDN! (Mozilla Developer Network)
ドットインストールの「実践！ウェブサイトを作ろう（全16回）」をやっていたら、途中で頭がうに〜〜〜てなりました(@_@)
難しい… 果たして自分でホームページなんか作れるようになるんだろうか… 早くもくじけそう…
ちょっと休もう…
あ、そうだ、ドットインストールで言ってたMDNでも見てみよう。役に立ちそうだし。
今日はエディタでコードを書き疲れたので座学にします！
MDN (Mozilla Developer Network)
少し見ただけで無茶苦茶、役に立ちそうなWebサイト。なんだ、こんなWebサイトがあったんだ。今まで勉強してきた中で、わからないことはググって調べてきたけれど、このリファレンスを見れば解決！じゃない？しかもHTML入門なんてコーナーもあるし。
とても気になったので、読んでみました。
全部読んだわけではありませんが、これ…
とても勉強になります！
MDNとは、正しくはMDN Web Docs というらしく学習プラットフォームとのことです。何か？と思った方は是非上のリンク先を見てみてください。（もしかしてみんな知ってる？）
この中の、HTML入門と概論を少し読んでみましたが、今までProgateとドットインストールで勉強してきたことが、整理して書かれておりだいぶ頭の中がスッキリ！しました。
要はHTMLというのは、コンテンツをPCが認識しやすいように構造を与えてあげるものなんだなー、というのが今の理解です。
そりゃまあ、PCは人間じゃないもんね、機械だもんね。例えば強調するところとか、教えてあげないとわからないよね… だからマークアップ言語っていうんだ。なるほど！
例えば、要素、要素ってよく聞いたけどわかったような… と思っていたところ下図を見て
引用：MDN Web Docs HTML の基本より
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics
スッキリ！ こういうことなんだね！と、とてもよくわかります。
もう一つ、属性についても引用しておきます。
属性とは要素に対し実際には表示されない追加情報を含んだものです。ここでは
classが属性の名前でeditor-noteが属性の値です。class属性を使って要素に識別するための名前を与えていて、後でこの要素を指定してスタイルをつけたり様々なことができるようになります。引用：MDN Web Docs HTML の基本より
こういう風に、勉強してきたことが言語化されていると頭の整理にほんと役立ちます。
また、読むだけではなくMDN Web Docsでは、手を動かして学習できるコンテンツも揃っています。デザインはProgateのほうが断然いいと思いますが。
Wrap Up!
今のところProgateとドットインストールを使って手を 動かして勉強しています。この2つは言わば問題集＆講義のようなもので、手元においておいたり、後で見返したりするような参考書は、このMDN Web Docs が使えると思います。なにしろ無料だし。無料大事！
Progate・ドットインストール・MDN Web Docs
この3つでだいぶ学習態勢が整ったと感じます！
よーし、今日も頑張るぞ！
ドットインストールはじめました。
プログラミングの勉強をはじめてから、かれこれ2週間経ちます。なかなか勉強の時間がとれないのが目下の悩み。休日に集中してProgateのWebでレッスンを行い、平日に同じくProgateのアプリで、Webでやった内容について復習！
アプリ版はスキマ時間に学習できるというのが、なんと言っても強みですね〜。これが今のKAEDE勉強スタイルです。
最初は、な〜んにもわからないんだから無料レッスンをとにかく片っ端からやってみよう！と考えていましたが、こうして勉強する中で、
これ… いろんなものに手を出しても、ちょっと覚えられないんじゃないの？
と感じはじめました。そこで、今は勉強しはじめたばかりの HTML&CSS と JavaScript 、まずはこの２つに集中してみることにします。
当面の目標は、
自分でホームページが作れるようになること！
にします☆☆☆
ドットインストールにも登録してみた！
Progateでは無料でできることに限りがあり、さりとてもう少し無料で勉強していたいなぁ… そのうち課金は考えているんだけど…
と思っていたところ、ツィッターでドットインストールを勧めていただいたことから、ドットインストールにも登録してみました。(^_^)v
（ドットインストールも無料でできることには限りがあります。）
ドットインストールは、Progateとは異なりWeb上で勉強が完結しません。自分のPCで動画を参考にしながらコードを書いていくスタイルです。
なので、まず環境を整備する必要があります。と、言っても、エディタアプリをPCにインストールするくらいです。おすすめされているエディタは「Atom」。やっぱりAtomなんだぁ〜、とか思いながらすでにAtomはインストール済みだったので、早速レッスンをはじめていくことができました。
ドットインストールのいいところ
ドットインストールの動画は1エピソード3分以内で長くないです。長くないので、見るだけならほんとうにさくさく見れます。
見ていると、なるほど、なるほど！とわかった気になるのですが、やっぱり手を動かさないと勉強にはならないよねぇ〜(^_^;) と思いましたので、動画とまったく同じことをやっていくことにしました。
やった講座はこの２つです。
見るだけなら、ほんとさくさくと見れたのですが… いざ自分でコードを書きながら進めていこうとすると、何度も再生を止めて、書くコードを確認して、書いたものが正しく再現されるかも確認しなければならず、意外と時間がかかります。
それでも、ドットインストールのよいところは以下2点だと思いました。
①動画なので、とてもわかりやすい。
やはり動画は、動きと音声があってわかりやすいです。
②エディタに書いていくので実戦的！
先日、自分でエディタでコードを書き写すということをやりましたが、やはりエディタで書くというのはとても勉強になると感じています。そしてドットインストールでは、自分で書いて勉強していくスタイルなので、より実戦的です。実戦大事！
動画を少し見て止めて、また少し見て止めて…
これを繰り返し、ようやくレッスンを終わらせることができました！疲れた〜(@_@)
Wrap up!
HTMLの基礎的なことは、だいぶわかってきたんじゃないかな？と思っていましたが、いやーまったくそんなことはなく、正直難しかったです！（こんな基礎編でそんなことを言う人いない？）
今回も、新しく学んだことや忘れていたことをメモしておきます。
属性＝attribute
rel <link rel="stylesheet" href="styles/styles.css"> こんな感じで書く。
href
target="_blank" 別タブで開くときは、こう書く。
要素＝element
nav ナビゲーションバーとかに使う？
CCSに使うもの
text-align テキストの配置場所を指定したいときに使う。
background-image: url(../images/header.png); 背景画像のところ… 難しい。
その他
MDN ＝ Mozilla Developer Network
こんなのあったんだ！読むととても勉強になりそう！
さあ明日も頑張るぞ！
エディタ「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って具体的にはいったいどれくらいのなの？
よし。復習だー！
