遊びは終わりだ。

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

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

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

どうも、Yoshiです。

 

 先日お昼にココイチをいただきました。

ベーシックの300gと野菜サラダ。

今までならペロリと平らげてたはずが、最近年のせいかこれだけでかなりお腹がいっぱいになりました。

暑くなってきたし、夏バテかなと思ったのですが、そこまで体にだるさを感じてることもないので、きっと胃が小さくなってきたんじゃないかと。

 

学生時代や20代の頃はご飯も3合ぐらいは普通に食べてたのですが…やはり年には勝てないようです…

 

さて、「超初心者のHTML & CSSのLearning story」パート5です。

前回までで、ヘッダー部分、メインのレッスン部分まで作りましたので、続きのメッセージ部分と、フッター部分を作り中級編でページを完成させていくところに入ります。

 

 

 

 中級編最終章

 まずはメッセージ部分から

 

f:id:to-many-hopes:20170624144720j:plain

画像で確認するところの部分ですね。

こちらもどういったパーツでできてるのかを確認して、コードを打ち込んでいきます。

 

メッセージ部分に使用されている、「さっそく開発する」のボタンにアクション的なものをつけます。

f:id:to-many-hopes:20170624144729j:plain

クリックしたらボタンが押し込まれたような見た目にするために、影などを駆使して デザインしていきます。

これもここでできるんだと物凄く勉強になりました。

 

 

f:id:to-many-hopes:20170624144741j:plain

影の使い方などを使ってクリックしたときにボタンが押し込まれたような雰囲気を出します。

 

 

 

 続きましてフッター

上記のメッセージ部分をクリアして、ページの一番下のフッターを作っていきます。

f:id:to-many-hopes:20170624144904j:plain

フッターのパーツを確認して作成。

ゆっくりできていく感じが本当に楽しいです。 

 

 

 最終仕上げ

f:id:to-many-hopes:20170624144805j:plain

「ヘッダーを固定しよう」

ということで、スクロールしてもヘッダー部分だけが残るデザインにするようです。

こういうのってよくありますよね。

使う側からしたら物凄く助かるというか便利な仕様で個人的には好きです。 

 

 

f:id:to-many-hopes:20170624144816j:plain

「fixed」と呼ばれるものを使うと固定されるようですね。

本当に色んなタグがあるなあと毎回関心してます(笑)

 

ヘッダーを固定する際にこんなワザも

f:id:to-many-hopes:20170624144825j:plain

要素の重なりというものを決めることができるようで、いわゆるパーツの優先順位というイメージになるんですかね?

最背面とか、最前面とかっていう指定をここでできるみたいです。

今回作ってるヘッダー部分を一番前に配置することで、スクロールしても綺麗に表示されるという形になるみたいです。

 

これをすべてクリアしてようやく完成です!

 

 

 中級編 全編クリア

 f:id:to-many-hopes:20170624144924j:plain

ゆっくりではありますが、中級編も無事クリアしました!

次は上級編が待ってますので、かなりドキドキしますがこのドキドキも楽しみだということだと思います。

基礎を身に着けるために今回progateさんを利用させていただいていますが、自分でも色々サイトを実際に作ってみて、失敗を重ねながら覚えていくというスタイルも次の上級編がクリアできたらできるのかななんて思っています。

 

 

実はこのHTML&CSSのコースなのですが、全部で8レッスンあります。

こちらがレッスンリスト

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

 

段階があり、今回僕がクリアしたのは中級編ですから、あと6レッスンをクリアすることでprogateにおけるHTMLの学習は満了という形になります。

先がまだまだ長いですが、逆にその方がモチベーションの維持にも繋がるので、僕個人としては逆にやる気になれます。

 

次から上級編に入り、ますます覚えることやこれまで学習してきたことの応用なども絡んでくると思いますので、思い出しながら一個一個着実に前進したいと思います。

 

 せっかくprogateを利用しているので、ここで学べるものはすべて学んでみようかなと思ってるので、確実に消化していきながら基礎を固めていきたいと思います。

 

次は上級編、気合を入れなおして頑張ります。

 

 

 

ではまた!

© 2017 to-many-hopes.blog