遊びは終わりだ。

おっさんが自由気ままに更新します。

そろそろ人生の遊びは終わりだ…

超初心者のHTML & CSSのLearning story Part.2

どうも、Yoshiです。

 

藤本美貴さんが原付と事故をしたとのニュースを見ましたが、どうもこういうことをニュースにするのは好きではない僕です。

だってみんな事故するじゃない。

 

ネタになるからと言ってこういうことをすぐにニュースにするのってあんまり好きじゃないなあと。

まあこういうネタを書くのも仕事のうちかもしれませんが、なんかどうも書き方が「藤本美貴さんの不注意で!」みたいな印象になってしまう感じがしてどうも好きではありません。

※あくまでも個人的な意見ですので事実に基づいた発言ではありません。もちろん誹謗などではありませんので、勘違いなさらないようお願い致します。

 

という何ともご覧になっていただいている皆様には、不快な気持ちにさせるような僕の不満から入ってしまい申し訳ありません。

 

さて、切り替えて今回も「Progate」さんを使わせていただいて、HTML&CSSの勉強をさせていただきました。

 

 

順調に進めていくことができました!

これまで学習したこと

 

今日は色々ブログの更新をしながらも少しずつですが、HTMLの勉強もやりました。

前回のPart.1から進んだ内容としては下記の通りです。

  • HTMLでのリストのタグの書き方
  • CSSの書き方
  • CSSでのフォントの色の変更
  • CSSでの背景色の変更
  • 高さや幅のサイズの指定
  • クラスの使い方

などなどを学習しました。

この辺りは、以前にも学習していたのですが、もう一度復習しなおすということで、読み飛ばすことはせずに全て読み進めながらやっていきました。難なくクリアできました。

タグっていうのはやっぱりなかなか覚えることが難しいなあと思います(苦笑)

 

次のchapterはどんな内容!?

次のチャプターは「実際にページを作ってみる」ということになります。

f:id:to-many-hopes:20170617214034p:plain

「目標物を作ろう」

ということで、表示されているページを実際に自分で作りながら学んでいくという流れになります。

 

f:id:to-many-hopes:20170617214128p:plain

「HTMLの全体構造」

ということで、”HTMLの型”というものが必要になりますとのこと。

画像に書いてあるように、サイトを作る上での必要な情報を書き込む部分だそうです。

 

f:id:to-many-hopes:20170617214350p:plain

「HTMLのバージョンを指定する」

HTMLには色々歴史があるらしく、そのバージョンを指定するということ。

今回学習しているHTMLのバージョンは”HTML5”と呼ばれるものですから、上記のようにHTML5のバージョンを指定することを記載する。

 

何となくコーディングらしくなってきました(笑)

 

タグなどの打ち間違えがあると…

では、テンションもそのままに早速入力してきます。

とその前に、ひとつ気づいたことが!

f:id:to-many-hopes:20170617214809p:plain

赤マルで囲んだ部分にご注目!

実はこれ、「ここのコード間違えてますよ!」って知らせてくれる×印なんです。

これはとっても親切です。

この画像では本来<html>と記入しなければいけないところを<htmi>と記入してしまったため、「ここ間違えてますよ!」と知らせてくれたということなんです。

 

これは本当に便利で親切な機能だと思います。

みたいな超初心者の人間でもすぐにわかるので安心です。

 

f:id:to-many-hopes:20170617215305p:plain

間違えた箇所を修正し、間違えがないことを確認してその他の記入するタグも入力しました。

 

無事にすべてのタグが正しく入力されていてホッと一安心。

 

この画面を見るのが楽しみなんです(笑)f:id:to-many-hopes:20170617215450p:plain

今回の「目標物を作ろう」の工程でLv.7にレベルアップ!

 

これは本当に嬉しいです。

こうやって実際にタグを入力しながら学習していってさらにレベルが上がることでどんどん次の工程に進みたくなってしまうこの感じ。

 

本当に僕にはピッタリの学習法だと思っています。

 

 

lesson 1 初級編3-1 「目標物を作ってみよう」をクリア

今回も色々と解説を読みながらコードを入力して、もしわからなければスライドを見直して、またエディタに戻ってコードを入力してとゆっくりですが、ひとつずつ進めていきました。

もともと何かを作るということが大好きな僕なので、こういう形を作っているというような作業は大好きです。

 

それに、コードを入力した時に右側にある”プレビュー”のところにリアルタイムで入力したコードが反映されるので、今自分がどこを入力しててどこを触っているのかというのもわかりやすくて本当に助かります。

 

まだまだ初歩の初歩の段階ですが、こんな感じで時間の合間に進めていけたらと思っております。

まだ全然何もできないくせに、なぜかワクワクしている僕です(笑)

 

一人前のwebデザイナーになれるよ日々精進。

 

 

 

ではまた! 

© 2017 to-many-hopes.blog