遊びは終わりだ。

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

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

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

どうも、Yoshiです。

 

さて、「超初心者のHTML & CSSのLearning story」も今回で3回目となりました。

コツコツとですが、やっとレベル10まで上がりまして、ますます学習意欲が出てまいりました。

 

ここまでの流れは”Part.2”をご覧いただくとして、今回はあれからズンズン進み、いわゆる「サイト」らしいものを作成する工程に入りました。

 

 Part.2はこちら↓

to-many-hopes.hatenablog.jp

 

実際にサイトのページを作っていく

前回までは、サイトの仕組みや形、どのように表示されるかという基礎がメインだったのですが、今回の学習では、実際にサイトページを作成していきながらさらに知識を深めていくという内容。

 

サイトを作る前に!

どんなデザインにしようかな。とか考えて「いざ作ろう!」というよりも前に、この”<head>”と呼ばれる部分に重要な情報を書くということ。

 

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

文字コード

②ページタイトル

CSSの読み込み

 

文字コードっていうのを調べたところ、

HTMLの記述形式(文字コード)を正しく設定することによって、ページが読み込まれたときの文字化けを防ぎます。

 とのことです。他にも「Shift-JIS」とか「EUC-JP」とか色々あるみたいなのですが、今回Progeteでは”utf-8”というものが使用されているので、こちらを使ってます。

なぜ、コードを統一しないのか。という素朴な疑問がありますが、きっと発展していくうちに、新しいコードが出てきたんだろうな。ぐらいの気持ちで思っております(笑)

 

 

CSSを読み込む!?

CSSという存在はもちろん知っておりましたが、読み込むという発想は全くなかったため少し戸惑いましたが、どうやら簡単にいうと、「デザイン部分を指定するのがCSS」という解釈でいいのではと思っております。

 

HTMLで作った基礎パーツをCSSでアレンジしながらデザインを整えていく

 

というのが僕の解釈なのですが、合ってるのかな?(もし間違っていればご教授いただければ幸いです。)

となんとなくはわかったのですが、読み込むという理屈がわかりませんでした。

でもこれはきっとHTMLとかCSSとかという概念でなく、”web”という構造上こうなるのだ。と勝手に理解したフリをしています。

 

とまあこんな感じで進めていきました。

 

ブロックごとに考えてみよう

 

サイトって一枚の紙にツラーと書いてあるイメージだったのですが、各パーツごとに色々構成があるみたいですね。

 

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

ブロックごとに分けて考えると、わかりやすそうです。

こうすることで、CSSで細部までデザインにこだわれそうですね。 

 

 

こんなところまで詳しく説明してくれる

これもデザインとしては面白いと思いました。

意外とこういう細かいところにこだわるのって好きなんですよね。

 

こういう場合は、こうするとできますよ。

みたいな解説もあって、実践的なデザインにも適応できそうな感じがします。

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

 

 

「ここに入力してください」みたいなコメントも書かれている

HTMLにもCSSにもこんな感じで、コメントが書いてあるんです。

なので、迷わず「どこの何をどうするか」ということが視覚的にもわかりやすく解説してくれています。 

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

 

順調に進めていき…

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

 

 スペルミスや脱字などがないかもしっかりチェックして、完成したのがこれです。

 

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

 

一般的な、ヘッダー部分、そしてメインコンテンツ部分、フッター部分を作成できました。

ヘッダーとフッターがあるだけでもなんとなくサイトを作った気分になりますね(笑)

 

やっとLv.10へ!

ゆっくりですが、レベル10までやってきました。

なんとなくキリがよくて嬉しいですね。

 

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

 

もっと毎日、コンスタントに学習できたらいいのですが、今の状況では時間の合間にやるしかなくて・・・とても楽しいのでもう少しハイペースでやれたらなとは思うんですけどね。

でも、この調子で少しづつ前進していけるように頑張りたいと思います。

 

 lesson 1 初級編5-1 「コンテンツを作ろう!」をクリア

いよいよ、メインのサイトを作るところまでやってきました。

少しずつですが、着実に進んでる感じがしますし、理解も深まってきた気がしています。

これを全て学習し終えた後には、簡単なサイトのページが作れるようになるのかな?と思うとますます楽しくなってきます。

覚えることが多いので、ちょっと大変ですが、みなさん覚えてるのかな?と思って調べて見たら、”HTMLクイックリファレンス”という辞書みたいなものを持ってるっていう方もいるみたいですね。

そういうの使ってもいいんだ・・・ってちょっと驚いた僕です(笑)

 

今度、本屋に行った時に見てみようかなと思っております。

 

新しいことを勉強するってやっぱり楽しいですね。

これから先がますます楽しみです。

 

 

 

ではまた!

© 2017 to-many-hopes.blog