【DAY3】30DAYSトライアルに再挑戦〜中級編突入!【東京フリーランス】

【DAY3】30DAYSトライアルに再挑戦〜中級編突入!【東京フリーランス】

30DAYSトライアル早くも中級編です。今日はモダンなWEBページを作る回です。ところでモダンなページって何でしょう。中級編もがんばりましょう。

【DAY3】今日のお題『Progate HTML & CSS 中級編(3章まで)』

前回の学び【DAY2】の学習ログはこちら

Progate中級編はこちらから

1章:レイアウトを作ろう

  • 目標物を確認しよう
  • 全体のレイアウトを作ろう

目標物を確認しようというのは、完成形のサイトのデザインを目で見て確認しようということです。

と、同時にどんなテクニックが使われているのか予測しながら眺める必要があると思います。

初学者は、その勘が働かないのは経験不足で仕方がないとしても、好奇心を持って確認することは大事じゃないかな。かっこいいサイトを見たら真似してみたくなりますよね。

サクサク動くけど、見た目もかっこいいサイト。私も作ってみたいです!!

1章はさすがに楽勝!じっくり観察すべし。

有料コンテンツの申し込み方法

レベル18を合格したところから有料のコンテンツになります。ちなみに月額980円(税込)の受講料がかかりますが、プログラミングスクールに通うことを考えたら随分格安ですよね。あとはきっと、気合いだけです!!

ちなみに2019年10月1日以降は、980円(税別)で若干の値上げになります。

有料会員限定のアラートが出たら、右下の「有料プラン詳細へ」から申し込みページへ進みます。

有料会員になるとできること

Progateの有料会員になると、Progateで公開中の全 78レッスンの基礎から実践まで制限なく学習できるようになります。デイトラにチャレンジするなら、最低1ヶ月は有料会員になる必要があります。

2章:トップ部分を作ろう

  • トップ部分のレイアウトを作ろう
  • 透明度、文字の間隔を調整しよう
  • ボタンを作ろう
  • レイアウトを整えよう
  • アイコンを使おう

うれしかったのは、半透明の表現。うーん。こういう見栄えの部分をコードで制御するのやってみたかったんです。opacity(透明度)プロパティを使えば、半透明の表現をすることが出来ます。

ボタンもCSSで作れるんですね。画像で書き出していた時代ってもう、旧石器時代だったんですね。

ロールオーバーも出来ました。おー!!

このくらいで喜んでるなんて、平和でしょ。でも、この喜び、非エンジニア、ガチガチの初心者、プログラミングって何?っていう人に伝えたい。面白いから!!

 

完成の見本がかっこいいとモチベーションあがります。今まで見ているだけだったデザインのサイトが自分にも作れるかもって思うだけでも、うれしくなります。

興味があったら、ホントやってみて。

ゼロスキルの私でも時間かかったけど、ちゃんと出来たから大丈夫です。きっと出来るよ。

3章:ヘッダーを作ろう

  • ヘッダーのレイアウトを作ろう
  • ログインリンクを作ろう
  • ログインリンクを完成させよう

インラインとインライン要素がいまいちわからない。

でも進む。とりあえず進む。

【まとめ】『Progate HTML & CSS 中級編(3章まで)』

所要時間:3時間程度

次々と出される指示の通り進んでいくとつまづきながらも、何となくお手本通りのサイトが完成です。でも、真っ白から作り上げるのは無理だなと感じます。

一回大きく内容をつかんだら、自分なりにもう一度サイトを作って見ることがマスターへの早道だと思いました。

【DAY3】学んだこと

透過の仕方

ボタンのCSSの指定の仕方

角丸の指定の仕方

margin: 0 autoとtext-align: centerの使い分け

30DAYSトライアル挑戦してみる?

実は、まだそんなに複雑な内容じゃないし出来るって思って受講してみたら、石のように30分固まりました。

だって、何回見てもスペルは合ってるし、条件を満たしてるし。何で何で???って思って、ようやくわかったのが、受けのかっこ } の書き漏れ。

えー。{ } ってエディターで補完されて、セットで出てくるから書き漏れしないでしょ。。って思う人たくさんいますよね。きっと。

そして、私もそう思い込んでたんです。そして、いつの間にか消してしまっていたことに気がつかなかったんです。

絶対に書いたコードが合ってるって思ったらダメなんだなと思いました。

こんな単純なミスをしない方法がきっとあるはずなんですが、今のところわかりません。学習中、常に頭の片隅に置いとこうと思います。

今日の学習のメインはCSSでボタン周りを整えることでした。必要不可欠スキルなので、しっかり身につけておきたいです。

東京フリーランスのサイトはこちらです

デイトラカテゴリの最新記事