りんじ|兼業コーダー

育児と仕事の合間に、Web制作会社での業務委託を目指してWordPressを学習中。

HTML/CSS・JavaScript・WordPressを学びながら、コーディング力を磨いています。

朝活の学習記録と制作の気づきを発信。

迅速・丁寧なコミュニケーションを心がけています

[りんじ|兼業コーダー @sneakerdgbn]

Webコーダー｜フロント実装担当

Figma → コーディング対応
レスポンシブ・UI動作実装可能
LP・サイト制作の実装部分を担当します
制作会社様・デザイナー様からのご相談歓迎

迅速・丁寧に対応します

[りんじ|兼業コーダー @sneakerdgbn]

9月は家族の体調不良が続き、なかなか勉強時間が取れず…。AIエージェントでの実装・修正も途中でストップ中。まずは家族みんなの回復を待って、落ち着いたらまた卒制を進めていきます！

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

@8760stories やることは単純なんですが、ビビリの僕は、えいやーで導入する事ができず、いろいろ調べてから進めるので時間かかりました(笑)

[りんじ|兼業コーダー @sneakerdgbn]

VS CodeとFigma Remote MCPの連携に着手。

Figma for VS CodeとRemote MCPの2種類がありややこしい。連携方法を整理し、ようやく卒制を進める準備が整った。少しでも効率的になるといいなぁ💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

コンテンツのレスポンシブ化。

ブレークポイントは最初に仮で決め、崩れた箇所を個別修正。同じ修正が増えたら共通化する。正解を探しすぎず、実装→修正→整理を繰り返す感覚が大事と実感💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

レスポンシブのベース作成、Hammerspoonでトラックボールを調整。

ブレークポイントは複雑にせず、カンプがないTabは考えずPC/SPでシンプルにコーディングしていく。どうにもならない時にtabで調整する。

余談ですが、マウスだけで縦横スクロールできて快適💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

フッターナビ調整、セクション境目のあしらい画像を挿入。

backgroundはショートハンドにせず、image・repeat・position・sizeを分けて書く方が今は理解しやすい💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

@8760stories 動画でマシンの使い方分かっても、自分にあったやり方なのか、正しい部位に効いてるのかって、人に確認してもらう方が正確なので、最初はお金払って詳しい人に見てもらうのはオススメですよ！

[りんじ|兼業コーダー @sneakerdgbn]

フッターナビ作成、Google Mapの調整。

iframeは親要素でサイズを決め、iframeを100%にすると調整しやすい。ナビの2列化も思ったより簡単。display:flexだいぶ得意（笑）💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

フッターのレイアウト調整、Google Mapを差し込む。

固定値ならすぐ組めるけど、レスポンシブとの兼ね合いで悩む。まず組み立て、崩れたら調整する感覚を掴みたい💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

フッターコンテンツの作成。

数日悩んだボタンの文字のデザインがデザインデータと一致しない原因を調べ続け、最終的に大文字・小文字の違いと判明。人間は文字を意味で捉えるので、デザインからの文字入力はコピペが大事だと実感💡

この数日間の時間返せ、、、

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

フッターの作成。

見た目がボタンでも、別ページへのリンクならaタグ、JSで処理を実行するならbuttonと、見た目ではなく役割でHTMLタグを決めることがようやく落とし込めた💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

下層ページの制作を進め、パンくずリストも作成。

設計を考えすぎず、まず書くことで、共通化できる構造や改善点が具体的に見えてきた。先に頭で考えすぎず、まず書いて後から整える。この訓練だなと実感💡

#デイトラ #デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

下層ページの中身とパンくずリストを作成。

共通化できそうな部分が多く、その判断に迷って手が止まる日だった。未来の問題を今解決せず、まずは取り組んでるページを完成させる。綺麗な設計は完成後に見直せばいいと学んだ💡

#デイトラ
#デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

仮想実装でヘッダーPCを完了し、
下層トップページの制作へ。

Gulpでstyle.cssを出力している場合、SCSSに記述するbackground-imageの相対パスは、style.cssから画像までのパスを通す必要がある。地味にこんがらがる（笑）💡

#デイトラ
#デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

ヘッダー制作の続き。

今日中に終わるかと思ったが、アイコン位置の微調整で時間切れ。大まかなレイアウトは迷わず進められる一方、細かい配置を詰めるところはまだ弱いなぁと実感💡

#デイトラ
#デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

ヘッダー制作の続き。

CSSを当ててレイアウトを組む作業は迷いなく進められ、自分が理解できている部分を実感。分からないところで立ち止まりすぎず、サクサク進められるところはサクサク進めていきます💡

#デイトラ
#デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

ヘッダーの制作。

デザインカンプだけでは意図を読み取れず、divで要素を配置するだけになりがち。完成サイトを見ることで、ロゴのリンクや、見た目以外のHTMLの役割に気づけた。デザインの意図を読み取る力がまだ足りないと実感💡

#デイトラ
#デイトラコミュニティ

[りんじ|兼業コーダー @sneakerdgbn]

@kyo202407 コメントありがとうございます！
毎日、育児と仕事で忙し過ぎて体力ギリギリですし、子供がウィルス系の体調不良を起こせば確実に感染して、勉強どころじゃない日も多いですが、なんとか心折れずに頑張ってやってきます！

[りんじ|兼業コーダー @sneakerdgbn]

幼児2人の送迎、
朝夜ご飯の用意、
風呂入れ、その他家事。
仕事は30分時短。
子どもが体調を崩したら率先して有給。
ここまでで結構いっぱいいっぱいなのに、
毎朝早起きしてWeb制作の勉強までしてる。

俺、結構すごくない？（笑）
たまには自分で自分を褒めておく

#デイトラ
#デイトラコミュニティ