progateでhtmlとcssについて学ぼう初級編１
こんにちは、なんでも初めてのぽんきちさんです。
今日から、「progate」というサイトで
プログラミングについて学びたいと思います。
[フリー画像素材] 人物, 子供, 赤ちゃん, PC / パソコン, 家電製品 ID:201309162000 - GATAG｜フリー画像・写真素材集 4.0
progateのサイトはこちらです。
実は、かつて「progate」でhtmlを学んだことがあるので、
厳密には「初挑戦」ではありません。
でも…
「途中で挫折しているから、ほとんど初挑戦と言っていい」
（こじつけ）
ではさっそく、今回学びたいhtmlとcssに挑戦してみましょう♪
ログイン
ログイン画面が出てきます。
facebookやtwitterでもアカウントが作られるみたいですね。
私は、以前に取り組んだことがあるはずなのでemailからログインします。
「パスワードどこだっけ」
パスワードをどこに控えていたかを忘れ、
紙に書いておいたのを発見するまでに数十分を費やしました。
…パスワードの保管について考え直さなくては。。
ログインしてみると、どうやらHTMLとcssに関しては初級編を卒業していたようです。
まるで記憶にないのでやり直すこととします。
HTML&CSS 初級編
まずは基本
最初はこのような画像が出てきます。
まずは学んでから、コードを自分で書いていくというスタイルです。
ちなみに、progateの推奨ブラウザはGoogle Chromeだそうです。
（Safariを使っていてすみません）
最初は、タグの使い方のレッスンからでした。
解説を読んだら、実践編です。
レッスン１は、
「Hello World」をh1タグで囲むことから始まりました。
h1タグで囲めたので無事合格！
「ワクワクが止まりません♪」
私は全くプログラミングがわからない人ですが、
最初はこのような感じから始まるので
非常にわかりやすいです。
リストを作成したり、
cssの書き方も丁寧に教えてくれます。
htmlの全体構造
リンクのはりかたや画像の入れ方、
簡単なcssの設定の仕方を学んだら、
いよいよ全体構造です。
「…。」
は！いかんいかん！寝るところだった！
さっきまで簡単だったので、いきなり難しくなった気にもなるというものですが
これはまだ初級編の入り口です。ここで寝るわけにはいきません。
気をとりなおして説明を読んでいきます。
head要素の中身を学び…
レイアウトを学び…
htmlとcssを書きます。
今回やるべきことは、
コメントがかれているので、非常にわかりやすいです。
cssもわかりやすい！
復習のはずだったのですが、
きれいさっぱりと忘れていたので
これを機会にまた学び直そうと思いました。
「ここまでやっただけでも、
はてなブログのカスタマイズの意味がわかってくる感じですよね」
初級編は全て無料で、中級編は途中まで無料で学ぶことができます。
まだまだ初級編も終わりそうにないので、がんばってみたいと思います。
