遊びは終わりだ。

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

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

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

どうも、Yoshiです。

 

昨日は朝から色々出歩いてかなり疲れてしまいました。やはり年齢には勝てないのでしょうか。

いらない漫画とかDVDとかを売りに行こうと思って、小さい段ボール2箱分ぐらいを売りに行ったら、2800円ほどになりました。

 

いやーいらない本を処分できる上に、お金がもらえるっていうのは凄いことですよね。

今となっては結構普通の環境ですけど、やっぱり凄いなと。

それに、漫画とかって古いものになるとすぐに値が落ちるイメージがあるから、そんなに行かないんじゃないかなーと思ってたんですけど、予想以上の値段がついてさらにテンションが上がりました。

 

その浮いたお金で、森川亮さん著の「シンプルに考える」という本を購入しました。

今はもう使ってない人いないんじゃない?っていうレベルのあのLINEの元社長さんであった森山亮さんの著書です。

まだ読み始めてないのですが、今からとても楽しみです。

www.amazon.co.jp

 

さて、本題の「超初心者のHTML & CSSのLearning story」もパート4までやってまいりました。

あれから進めていき、僕のレベルもようやく14までやってきました。

初級編を無事に終え、現在は中級に入っております。

また覚えることなども増え、なかなか覚えられない自分と格闘しながら頑張っております。

 

 と、その前に!

 今回「progate」を利用させていただいてHTMLの学習を進めておりますが、中級編から”プラス”というプランを変更する必要があり、月額980円の利用料金が発生します。

初級は無料にてご利用いただけるようですが、さらに深く学習する場合費用が掛かります。もし万が一僕と同じで「progate」を利用したいと思っている方、現在初級を利用されている方で、中級上級と考えている方はご注意くださいませ。

 

僕は、深く勉強したいと思ったので、その場でプラン変更をしまして、中級に進んでおります。

 

 

では、今回から中級編へと進みたいと思います!

 

 

HTML&CSS中級編スタート!

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

中級編はこんなページを作成していく模様です。

かなりおしゃれで、実際にprogateのトップページにも使用されているものと同じようなデザインのものを実際に自分の手でコードを打ち込みながら作っていくようです。

このクオリティのものができると思うと物凄く楽しみです(笑)

 

 

まずは全体像の把握から

先ほどのページがどのような構成で作られているのかをまずは確認。

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

 

 こういったブロックに分かれて作成されているんだなということを知るだけでも、他のwebサイトを見たときに見え方が変わるような気がします。

 

 こういうパーツごとに分けて作ってるんだなと。

 

 

まずはトップ部分から

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

 

 まずは一番上に来るトップ部分から作っていきます。

ログインリンクの部分やFacebookTwitterでのログインボタンも作成します。

これってなんか地味にかっこいいなと思ってたんですよね(笑)

 

進めていくと中にはこんな効果が!

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

透明にする効果をつけることができるみたいです。

これは初めて知りました。

こういうこともHTMLとCSSでできるんだなとつくづく感心(笑)

 

 

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

これは今僕が一番苦手としてる「ブロック要素」です…

説明の意味は分かるのですが、実際に実行するとなるとごっちゃになってしまう一番苦手な部分です。

 でも、これも頑張って覚えていかなくては。

 

 

アイコンを使おう

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

FacebookTwitterのアイコンを使うということで、アイコンを使うために、あるものを利用するみたいです。

 

 

 

アイコンを使うなら「Font Awesome」

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

ログインの時とかに、アイコンが表示されているサイトを良く見かけますが、これってこういう仕組みだったんだと。

僕は、画像で表示させてるものだと思ってたのですが、実際はこんな便利なものがあるんですね。これだとサイズを大きくしても荒くなったりしないからすごく便利だと思います。

 

 

 

ヘッダー部分を作る

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

まずは上の部分から順番に作っていきます。

ヘッダーと呼ばれる部分なのですが、こういう感じで細かく分けて作っていくんだなと。ある程度ひとまとめでバンと表示させているものだと思っていたのですが、実際はこういう感じで構成されていたんですね。

 

 

こんなアニメーションまで

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

リンクのところにマウスを乗せたら色が変わるとかそういうアクションとかも学ぶことができます。

僕の今までのイメージだとあれって”javascript”とかでやってると知ったかぶりしてたのですが、HTMLとCSSでできることなんですね。改めて奥が深い。

 

 

続いてレッスン一覧部分

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

ヘッダー部分を順調に進めていき、次はレッスン一覧部分のレイアウトへ。

ここも各表示されているパーツに分けてデザインを作っていくようです。

 

実は僕ここで気づいたのですが…

「なぜこんなにバラバラにして作っていくんだろう」とずっと疑問だったのですが、これって各パーツごとに細かいデザインを適応させるためなんですね(苦笑)

 

頭の回転が鈍い僕は”こういうものだ”という勝手な解釈でここまで学んできたのですが、実は各パーツを精密にデザインしていくための手法だったんだと。

お恥ずかしい…

 

 

上の画像の一つのパーツに対してもこれだけ細かく設定されているんですね。

 

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

 

 

ここではこんなことも!

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

これについても先ほど上で書いた通り、右側に表示されている画像を作って画像として表示させているイメージだったのですが、こういう形で表示していたのには驚きでした。

なんかHTMLとCSSに無限の可能性を感じ始めている今日この頃です(笑)

 

 

lesson 2 中級編に突入

初級編を無事にクリアし、先日より中級編に入りました。

内容も一気にランクアップしたような気がして、ちょっとついていけるかどうか不安な部分もありますが、でもこれから覚えていくことやできることが増えていくという楽しみの方が大きいです。

 

この記事を書いている間にも進めていますので、記事自体は一応「過去の記事」という形になりますが、またまとめて書いていきたいと思います。

 

なんでもそうだと思うんですけど、難しいんですけど理解できたときの楽しさっていうのは感じますね。

初めて自転車に乗れた時のような感覚というか。今でもこういう経験ができるんだなと思うとより一層頑張ろうという気持ちになれました。

まだまだ先は長いですが、頑張っていきたいと思います。

 

 

 

 

ではまた!

 

© 2017 to-many-hopes.blog