【WEBデザイン学習日記-94】 ポートフォリオのレスポンシブ対応ほぼ完成!
12/19(火)~の学習日記です。ポートフォリオのPC用のコーディングを全て終えてレスポンシブ対応に入っています。最初さっぱり何から始めていいのか分かりませんでしたが、色々調べてコードを書くうちに少しコツがつかめてきました。年内に公開できるようにしてWEBデザインの副業案件を1つ取るという目標実現の為頑張ってます。
☆★☆ ☆★☆ ☆★☆
2023年12月19日(火) レスポンシブコーディング:50分
今日も昨日の続きでポートフォリオのレスポンシブコーディング。先週レスポンシブ対応を始めたばかりの時は、何から始めたらいいのかさっぱり分からず途方に暮れていましたが、学習動画で復習したり、Googleで検索して調べたりして実際コードを書いてみると少しずつコツを掴み始めました。
細かい余白、フォントサイズなどは後から調整することにして、ひとまずどんどん下層ページをレスポンシブ対応にしていく作業をしています。
なかなか上手くできないところはNotionにメモっておいて、後から再度挑戦してみて成功したら消込をして、やはり無理そうなら先生に聞いてみようと思います。
<12/19 進捗状況>
・TOPページ →完成 (MV画像の上にのせた文字の可変調整必要)12/19
・スマホナビ
・ABOUTの下層ページ
・東南アジアとの関わり下層ページ →完成 12/19
・SKILLの下層ページ→完成 12/19
・WORKSの下層ページ →完成 12/19
・WORKSの詳細ページ3つ(WEB)
・WORKSの詳細ページ1つ(バナー)
気づいたらもう23時すぎ!明日の仕事に響かないように今日はそろそろ寝ることにします。少しNetflixを観てから寝ます♪
☆★☆ ☆★☆ ☆★☆
2023年12月20日(水) レスポンシブコーディング:1時間
いつもは夕食後に家事を済ませるとすぐにパソコンに向かうのですが、今日は面白そうな番組を見ながらキャンディクラッシュを始めたらこたつから出られなくなり、1時間ほど珍しくダラダラ。
21時すぎからポートフォリオのレスポンシブコーディングの続きをスタート。3ページある制作物の下層ページ(WEBサイトの紹介ページ)は一つレスポンシブ対応のコーディングを仕上げたら他の2ページにも応用できたので1時間以内で3ページとも完成できました。バナーの制作物紹介ページのレスポンシブ対応もほぼ完成に近いのですが、明日また調整をします。
一番難しいのはABOUTのページとスマホメニュー。今週中にレスポンシブ対応を全て完成させて、来週は今年の目標の「年内にWEBデザインの副業案件を1つでも取る」の実現に向けて色々応募してみます!
<12/20 進捗状況>
・TOPページ →完成 (MV画像の上にのせた文字の可変調整必要)12/19
・スマホナビ
・ABOUTの下層ページ
・東南アジアとの関わり下層ページ →完成 12/19
・SKILLの下層ページ→完成 12/19
・WORKSの下層ページ →完成 12/19
・WORKSの詳細ページ3つ(WEB) →完成 12/20
・WORKSの詳細ページ1つ(バナー) →完成 12/20(少し調整必要)
☆★☆ ☆★☆ ☆★☆
2023年12月21日(木) レスポンシブコーディング:45分
今日もレスポンシブコーディングの続き。WORKSの詳細ページのバナー紹介のレスポンシブ対応をしていますが、なかなかうまくいきません。SPサイズにするとデザインが崩れてしまうため、工夫が必要です。
☆★☆ ☆★☆ ☆★☆
2023年12月23日(土) レスポンシブコーディング:6時間半
今日もレスポンシブコーディングの続き。
細切れですがかなり作業が進みTOPページ、全ての下層ページのレスポンシブ対応が完成しました!
検証ツールを使って画面を収縮させ、どのサイズの時にFlex-directionのColumnをかけて横並びのものを落とすべきか、フォントサイズのバランスなどを細かく調整。先週はさっぱりレスポンシブ対応のやり方が分からなくてどんよりした気持ちでしたが、人間何事もやればできるものですね。
残すはあと1つ。SP用のハンバーガーメニューをクリックすると現れるスマホメニューの作成です。今日は結構根を詰めてやったので、続きは明日することにします。
☆★☆ ☆★☆ ☆★☆
<12/15(金)~12/23(土)の学習目標>
・レスポンシブ対応(TOPと下層ページ2つは終わらせる)→クリア!
<今後の目標>
★ 2023年12月末までにポートフォリオを完成させ、WEBデザインでの副業案件を1つ取る!
★ 2024年3月までに今までの経験を活かし、今後にもつなげられる仕事に転職する
★ WEBデザインの学習と制作活動は地道に続けながら少しずつ実績を積む
★ 1月28日のTOIEC試験で800点以上を取る
#転職
#海外
#オンライン
#Webデザイン
#主婦
#制作
#Photoshop
#未経験
#学習日記
#クリエーターズファクトリー
#デザイン
#Figma
#初心者
#コーディング
#ポートフォリオ
この記事が気に入ったらサポートをしてみませんか?