【DAY4】30DAYSトライアルに挑戦〜動くボタンを作ろう【東京フリーランス】

【DAY4】30DAYSトライアルに挑戦〜動くボタンを作ろう【東京フリーランス】

デイトラ4日目です。三日坊主は脱しました。どんどん難しくなってくるので、サクサクとは進まなくなりましたが、めげずに行ってみよー!

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

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

イマの自習室
イマの自習室
https://at-ima.com/programming/tokyofreelance-day3/
学びのログサイト

4章:レッスン一覧部分を作ろう

  • レッスン一覧のレイアウトを作ろう
  • レッスンを並べよう
  • レイアウトを整えよう

昨日の続きで、今度は画面で言うと4つの6角形のボタンを作ります。

また、画像のボタンの上にテキストを重ねて表示させる方法を学びます。全部画像にするのではなくて、見た目も気にしつつSEOを考えた時に文字情報が残っていることが重要なので、しっかりマスターしたいです。

 

通常重なって表示されることがないHTMLの要素同士も、position: absolute;を使うと、重ねて表示できる!

メモ:positionは立場、absoluteは絶対の

英語できる方が頭に残りやすいんだろうなあ。

text-contentsじゃなくtxt-contents“ textってeを入れて何回も間違えてる。。。

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

  • メッセージ部分のレイアウトを作ろう
  • 立体的なボタンを作ろう
  • クリック時に変化をつけよう

ボックスに影をつける方法。前にやったことがあります。でも、すっかり忘れています。おさらいです。

 

ボタンの影も数値でつけられます。

クリック感がある動きも簡単につけられるよ。

ちょっと楽しい。

6章:フッターを作ろう

  • フッターを作ろう
footerタグはクラスではないので、CSSで『. ドット 』をつけない。これ。いまいち理解仕切れていません。
たくさんCSS書いていくうちに『. ドット 』を機械的につけるようになってしまっていて、.footerって書いてエラーになりました。
クラスについて、おさらいしないと。

containerは容器の意味

読めない記号とかプログラミングによく出てくる単語をまとめたらいいかもなあ

7章:ヘッダーを固定しよう

  • ヘッダーを固定しよう

うわー。これ。やってみたかったんです!!わーい。

どうやってやるんだろうな、止まりで自分でコードを書いてみようと思ったことがなかったんですけど、出来たら本当にうれしいね。

 

固定した時にヘッダーに要素が乗らないように、z-indexで重なりを指定する

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

中級編コース終了しました!!スキルが定着したとは言い難いですが、概要はわかりました。

所要時間:5時間程度

多分、人の倍の時間かかってるんじゃないのかな。

コードの階層が深くなって行った時、ちょっと気を抜くと自分が今どこにいて、今何しようとしてコードを書いてるのかわからなくなっちゃうことがあるんですが、これって私だけなんだろうか。

とにかく、眠い時はダメってことはわかりました。気力、体力も大事です。

プログラミング界隈の人がやたら、【筋トレ】してるのは、なんでなんだろうってずっと思ってましたけど、なんかわかる気がします。精神面も体力面もタフじゃないとこなせないんだ、きっと。

【DAY4】できるようになったこと

ボタンの上にテキストの要素を重ねて表示させられました

また、ボタンを押した時の動きをつけられました

スクロールしても固定されているヘッダーの作り方も知りました

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

丸暗記は出来ませんが、サイト作りのなんとなくの雰囲気はつかめてきた感があります。

よく丸暗記は無理だからググる能力や質問力が大事と話には聞いていましたが、何を言わんとするか少しわかった気がします。

全くの初学者でも学習の仕方を間違えなければ、独学でもなんとか勉強できそうな感じがします。

40代文系出身、初学者が言うので間違いないです。

こんなプログラミングと無縁みたいな普通の人でも、なんとかなります。

若い子たちがすごいスピードでプログラミングをマスターしていくのを見ていると、正直しんどいです。

でも、本当は自分もプログラミングできるようになりたいのに、なんとなくごまかしごまかしで時を過ごすくらいなら、ノロノロスピードでかっこ悪いサイトでもいいから、とにかくはじめてみませんか。

今は指示書にしたがってコードを書いているだけなので、自分で作った感はまだありません。でも、最初は深い理解がなくてもなんとなく形になるのがうれしくて、それだけでも勉強のやる気が出ますよ。

書いたコードが画面に表示される喜びを体感してみませんか。

初学者が一からガチでサイトを作ろうとすると中々目に見える成果が出にくいと、勉強をやめたくなってしまうこともあるので、少しづつでも達成感があるカリキュラムはありがたいなと思います。

学習の助けがあって適切なレベル上げのサポートがあると、毎日少しづつ勉強しようという気持ちになれます。また、何をどのくらいどんな順番で学習したらいいのかさえ、よくわからないのが初心者です。

積み上げていく系の学習なので、土台がしっかりしていないと先に進むことが出来ないスキルの場合、学習方法を間違えてしまうと無駄に時間を過ごす事にもなりかねないので、いきなり技術書を買ってくるよりも、オンラインの学習サイトを活用してスキルを磨くのがいいと思います。

 

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

 

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