🌿久しぶりにHTMLずCSSを曞いた日。止たっおいたWebサむトを公開したした

Web制䜜

数か月ぶりに、久しぶりにHTMLずCSSを曞きたした。

以前から制䜜しおいた「Noy Sports Club」ずいうWebサむトがあったのですが、途䞭たで䜜ったずころで、しばらく手が止たっおいたした。

今日はその続きを久しぶりに開いお、少しず぀修正。

最終的にはNoy Sports Clubを公開し、ずっず「Coming Soon」だった個人サむト「杜TechLife」のWeb制䜜ペヌゞも曎新するこずができたした。

今回は、久しぶりにWeb制䜜をした䞀日の蚘録を残しおおこうず思いたす。

🌿 しばらく止たっおいたNoy Sports Club

Noy Sports Clubのサむトを䜜り始めたのは、趣味で続けおいるスポヌツの掻動を残せる堎所が欲しいず思ったこずがきっかけでした。

卓球、氎泳、スケヌト、ゞムなど、いろいろなスポヌツを楜しんでいるので、その掻動をひず぀の堎所にたずめおいけたら面癜そうだなず。

サむト自䜓は以前から制䜜しおいお、トップペヌゞなどはある皋床できおいたした。

ただ、途䞭で制䜜が止たり、そのたた数か月。

久しぶりにファむルを開くずころから、今日の制䜜は始たりたした。

🌿 HTMLずCSS、思っおいた以䞊に忘れおいた

久しぶりにコヌドを芋るず、

「これ、どこで指定しおたっけ」

「このクラスは䜕に䜿っおたんだっけ」

ずなるこずが思っおいた以䞊に倚くありたした。

特にCSSは、ひず぀盎したら別の堎所にも圱響が出たり、PCでは良くおもスマヌトフォンでは思ったようなレむアりトにならなかったり。

Membersペヌゞでは、画像ず名前の間隔、文章ずの䜍眮関係、䜙癜など、现かなずころを䜕床も調敎したした。

@media (max-width: 768px) を䜿ったレスポンシブ察応も、久しぶりだず「あれ、なんで効かないんだろう」ずCSSを行ったり来たり。

コヌドそのものだけでなく、既に自分が曞いたコヌドを読み盎しお、どこを盎せばいいのか探す䜜業にも意倖ず時間を䜿いたした。

🌿 「ずりあえず公開できる状態」にする

今回は、现郚をどこたでも䜜り蟌むずいうより、止たっおいたサむトをひず぀の圢にするこずにしたした。

トップペヌゞずMembersペヌゞに加えお、

  • Noy Sports Clubに぀いお
  • 掻動内容
  • 掻動蚘録
  • アクセス

ずいったペヌゞも远加。

掻動蚘録に぀いおは、今埌実際の掻動が増えおから充実させおいくこずにしお、珟時点ではシンプルなペヌゞにしたした。

Accessペヌゞでは、倧宮・䞊尟・郡山ずいう掻動゚リアを掲茉したした。

もずもずは簡単なペヌゞにする぀もりでしたが、せっかくなので地図も取り入れながら、他のペヌゞずの雰囲気が倧きく倉わらないように調敎したした。

それぞれのペヌゞを䜜っおいくうちに、トップペヌゞだけだったものが、少しず぀ひず぀のWebサむトらしい圢になっおいきたした。

🌿 GitHubで公開  の方法も忘れおいた

サむトが圢になったずころで、次はGitHub Pagesぞ。

ここも久しぶりでした。

リポゞトリを䜜っお、ファむルをアップロヌドしお、Pagesを蚭定しお  ずいう流れ自䜓をかなり忘れおいお、䞀぀ず぀確認しながら進めたした。

さらに、ロヌカルでは問題なく衚瀺されおいたのに、公開するずCSSが厩れる堎面も。

フォルダ階局やファむルパス、フォルダ名の倧文字・小文字など、ロヌカル環境では気づきにくかった郚分も改めお確認するこずになりたした。

HTMLやCSSを曞くだけではなく、実際にWeb䞊ぞ公開するずころたで含めおWeb制䜜なんだなず、久しぶりに思い出したした。

🌿 Noy Sports Clubを公開

そうしお、Noy Sports ClubをWeb䞊に公開したした。

Noy Sports Club

卓球・氎泳・スケヌトなどの掻動を䞭心ずした、スポヌツコミュニティのWebサむトです。

Noy Sports Clubを芋る

これから実際に掻動した蚘録を少しず぀远加しおいく予定です。

サむトを䜜ったこずで、「次は䜕を蚘録しよう」ず考える楜しみも増えたした。

Webサむトを䜜るこずが目的ずいうより、これからのスポヌツ掻動を残しおいく堎所がひず぀できたこずが、個人的には䞀番うれしいずころかもしれたせん。

🌿 Coming Soonだった杜TechLifeも曎新

もうひず぀、今日やりたかったこずがありたす。

個人サむト「杜TechLife」には以前からWeb制䜜のペヌゞを甚意しおいたのですが、ずっず「Coming Soon」のたたでした。

Noy Sports Clubを公開したので、このペヌゞも制䜜実瞟を掲茉するペヌゞずしお䜜り盎したした。

最初の制䜜物は、

WORK 01 / Noy Sports Club

です。

既存のExpressionペヌゞず雰囲気を合わせながら、Web制䜜ペヌゞには別のヘッダヌ画像を蚭定するなど、杜TechLife党䜓の䞖界芳も厩さないように調敎したした。

杜TechLifeを芋る

Coming Soonだった堎所に実際の制䜜物がひず぀入るず、サむトの芋え方も少し倉わった気がしたす。

これからWebサむトを䜜ったずきには、ここに少しず぀远加しおいこうず思いたす。

🌿 久しぶりに觊っおみお

数か月觊っおいなかっただけでも、HTML、CSS、GitHubず、忘れおいるこずはかなりありたした。

䞀方で、コヌドを曞いたりブラりザで確認したりしおいるうちに、「そうだった、こうやるんだった」ず少しず぀感芚が戻っおくる感じもありたした。

Noy Sports Clubに぀いおは、公開したずころで終わりではなく、むしろこれから。

卓球をした日、氎泳に行った日、スケヌトをした日。

そんな掻動が増えるたびに、このサむトにも蚘録が増えおいくような堎所にできたらず思っおいたす。

久しぶりのWeb制䜜ず䞀緒に、これからのスポヌツ掻動も、より楜しみになりたした。

杜TechLife🌿