ここで | 40代未経験からWEB制作挑戦中

WEBデザイナー/エンジニアで転職を目指し学習中（Figma/Illustrator/Photoshop/HTML / CSS / JS）。単なる「勉強日記」ではなく【課題→解決→意図の言語化】を意識した思考ログを発信中
前職で培った丁寧なコミュニケーション／業務改善意識などを軸に、実務に強い制作を目指します。

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

とにかく一通り学ぶまで諦めない
余計なことを考えない

#駆け出しエンジニアと繋がりたい

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【40代未経験の感情ログ#02】
コードを書いていたら「今はもうAIに聞けば全部出してくれるんじゃないの？」って。でも、それじゃ意味がないんだ。なに書いてあるかを読めないと。一瞬でAIが出せるコードをこっちは何時間もかけて書いて覚えて必死なんだ。AIにやらせとけばって発想の人が増えてつらい

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

@LTechJP emの扱いは気を付けないといけないんですね！あり��とうございます。

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ #10】 [HTML/CSS] pxとemとremの違いに直面！pxは固定、emは親要素のフォントサイズに連動、remはルート（html）のフォントサイズを基準に変わる特性と判明。レスポンシブ対応のときに気をつけて使用する #WEBデザイン学習中 #40代からの挑戦

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【#10-2】通常、ブラウザ（ChromeやSafariなど）のデフォルトでは、このルートのフォントサイズは ⁠16px⁠ に設定。⁠rem⁠ という単位は、「ルート<html>⁠の文字サイズを『1』とする」という相対単��。ルートが ⁠16px⁠ の環境であれば、⁠1rem = 16px⁠、⁠2rem = 32px⁠ というように計算される

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【#10-1】Web制作（CSS）における「ルート（root）」とは、HTML文書の一番大もとである ⁠<html>⁠ タグ のことを指す。
したがって、「ルートのフォントサイズ」とは、その ⁠<html>⁠ に対して設定された文字サイズの基準値のこと

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

@LTechJP ありがとうございます。最初は混乱しました！実際に試しながら、それぞれの特性への理解をすることが必要だと痛感しました。

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ #07】
[HTML/CSS] 中央寄せで「text-align;center」と「margin;0 auto」の違いに直面。テキストなどのインライン要素か、ブロック要素かによって使い分ける必要があると判明！それぞれの特性を理解し、レイアウトの目的に応じて適切にコードを組む重要性��実感
#WEBデザイン学習中

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

@cimaciwc ほんとにつまづきました…ありがとうございます。��ても小さなログですが、アウトプットは自分への学びにもなりますね！

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ#09】 [HTML/CSS] インライン要素の基本を学習！<span>や<a>のように、文章の流れに沿って横並びになり、自動で改行されないパーツのこと。幅や高さ、上下の余白（margin）が指定できないため、テキストの一部を飾る役割がある #WEBデザイン学習中

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ#08】 [HTML/CSS] ブロック要素の基本を学習！「<div>」や「<p>」のように、自動で改行され親要素の幅いっぱいに広がる大きな「かたまり」のこと。幅や高さ、上下の余白（margin）も自由に指定できるため、レイアウトの土台として欠かせない重要な特性 #WEBデザイン学習中

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ #02】
コードが動く感動を知り「もっと早く出会いたかった」と焦る日々。頭の老��に焦ることもあるけど、「楽しい」という純粋な気持ちを原動力に、頭と体をフル回転させて一歩ずつ形にして追い付きたい
#WEBエンジニア学習中 #40代からの挑戦

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

@LTechJP コメントと有益な情報ありがとうございます！その習慣すぐ身につけます📝

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ #05】
display: flexを指定したのに子要素が横並びにならない原因を検証。親要素ではなく子要素に指定していた階層ミスと判明！ 検証ツールでスタイル適用とHTML構造を確認する重要性を実感。
#WEBデザイン学習中 #40代からの挑戦 #思考ログ

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ #06】
[Illustrator] アピアランス機能を学習！テキストを変えても枠や装飾が勝手に付いてきて、後から修正しやすくて感動✨
#WEBデザイン学習中 #40代からの挑戦

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【40代未経験の感情ログ#01】
こんな基礎的なことで悩んで恥ずかしい…と思う瞬間もある。でも、未経験からの挑戦なんだから躓いて当たり前。どんな自分もそのまま受け入れて、一つずつクリアしていくしかない。今日悩んだことは明日の財産💪
#WEBデザイン学習中 #40代からの挑戦 #学び直し

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

1440pxでデザインを作るけれど、1920px以上の���大型モニターで見られたときにレイアウトが端まで伸びきって不格好にならないよう、コンテナ（親要素）に ⁠max-width: 1440px⁠ をかけて中央寄せにする」という実装上の対策が必要

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ #04】 PCデザインの基準幅を1920pxにするか1440pxにするかで悩み中。ノートPCでの閲覧時の間延び感や視線移動の負荷を考慮し、今回は「1440px」をベースに設計することに決定！#WEBデザイン学習中 #40代からの挑戦

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

一方、1440px周辺はデザインツール（Figmaなど）でも扱いやすく、一般的なノートPCやデスクトップの環境でバランス良く見える「黄金サイズ」の一つ

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

1.25倍ベースだと

16 → 20 → 25 → 31 → 39 → 49 → 61 → 76

端数は4の倍数に調整。
足りない部分は臨機応変に追加

[ここで | 40代未経験からWEB制作挑戦中 @codeThypw]

【Web制作学習ログ #03】
PC基準の文字サイズを検証。本文16px・倍率1.25倍をベースに大見出しまでの階層を計算し、崩れを防ぐため端数は4の倍数へ調整。感覚ではなくルールと計算式でレイアウトを組むと、デザインの根拠が明確になりコーディングの精度も上がる
#WEBデザイン学習中 #40代からの挑戦