見出し画像

【WEBデザイン学習日記-89】 TOPページのコーディング完成!

12/2(土)&12/3(日)の週末の学習日記です。年内のポートフォリオ完成を目指して毎晩少しずつコーディングを進めています。パーツコーディングが終わり、TOPページのコーディングに入りましたが、センタリングや左右寄せなど毎回同じところでつまづいています。

☆★☆ ☆★☆ ☆★☆

2023年12月2日(土) TOPページのコーディング:2時間

翌日に納期が迫った市場調査の案件を進めながら、隙間時間にポートフォリオのTOPページのコーディング。試行錯誤しながらなんとか形になってきたのですが、文字やアイテムのセンタリングや右寄せなどに苦戦しています。
background-colorで色を付けて変な余白が入ってないかなどをチェックしたり、検証ツールを使いながら(まだ全く使いこなせていない)どうしてうまくCSSがかからないのか頭を悩ませながら取り組んでいます。

☆★☆ ☆★☆ ☆★☆

2023年12月3日(日)TOPページのコーディング完成: 4時間

今日も寒いですね。エアコンの生暖かい風で目が乾いて眠くなるのと節約のためにも寒い部屋でコーディングを進めています。手がかじかむのでカイロミニをお腹に貼って、ひざ掛けと頭の周りにはスカーフを巻き(中東のヒジャーブのような)完全防備。すごい怪しい格好していますが、暖かくて作業が進みます(笑)。

今日もポートフォリオのTOPページのコーディング。
もっと見る>>のリンク(>>は疑似要素のAfter)を右寄せするのにすごく時間を要しました💦
全く動かなかったり、右に寄ったものの疑似要素が改行されてしまったり、半分お手上げだったのですが、justify-contentのendをかけたら普通にきれいに右に寄りました。

未だにdisplay, justify-content, align-items類が苦手ということを痛感。座学では納得できて理解したような気になるのですが、いざ使うとなるとあれ?っとなってしまいます。おそらく完全にはそれぞれの役割を理解できてなくて理解できてる気になっているだけかも。再度復習しよう。

あとはdivで囲った箱が多くなりすぎて訳がわからなくなってきて、よく見てみると不要な閉じタグが残ってたり、スペルミスがあったり、それを修正して画面を更新するとちゃんとCSSが反映されるようになり、あの感動は何とも言えません。

寄せたら疑似要素の>>が改行されてしまったり・・・
左側から意地でも動こうとしなかったり・・・

試行錯誤、微調整を繰り返しながらTOPページのコーディングを2日間で完成できました。パーツコーディングであらかじめ各パーツを作っておいたので時短ができています。

夜は比較的簡単なデザインのスキルの下層ページのコーディングに突入。
シンプルなデザインでコーディングも難しくないはずなのに、またもここでセンタリングに手こずっております😢

中央に寄ってくれ~

いくら頭をひねって試しても中央に寄らないので、続きは明日することにします。話は変わり、転職活動に向けて来年1月28日にTOEICを数十年ぶりに受験するため申し込みを終えたので、これから試験までの2ヶ月間隙間時間を利用して英語の復習も進めていきます。寝る前に単語の復習を30分ほどしたいと思います。

☆★☆ ☆★☆ ☆★☆

<12/1(金)~12/7(木)の学習目標> 
・パーツコーディングを完成させる →完成!
・TOPページのコーディング完成させる →2日で完成!
・下層ページのコーディングをする →スキルのページのコーディング開始

<今後の目標>
★ 2023年12月末までにポートフォリオを完成させ、WEBデザインでの副業案件を1つ取る!
★ 2024年3月までに今までの経験を活かし、今後にもつなげられる仕事に転職する
★ WEBデザインの学習と制作活動は地道に続けながら、少しずつ実績を積む


#転職
#海外
#オンライン
#Webデザイン
#主婦
#制作
#Photoshop
#未経験
#学習日記
#クリエーターズファクトリー
#デザイン
#Figma
#初心者
#コーディング

この記事が気に入ったらサポートをしてみませんか?