EIICHI TANAKA

職業訓練校での学"び"を140文字以内でアウトプット。私の、私による、私のための囁きの場。

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

共通化できるものは、共通化する‼️

👉🏻CSSが短くなり、修正も1か所でOKに♪

同じ見た目を見つけたら、“共通化”を疑う👀✨

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

保護猫カフェサイト「ねことまんま」

���件提示さへたバナー2点を制作、サイトへ実装‼️

またfaviconの作成・実装についてもシッカリ✨復習することができた🥰

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

Webページ、リデザイン📝
📷を選ぶときは、
「1枚の良さ」だけでなく…

✅前後の写真とのバランス
✅構図・人物・色の変化
✅サイト全体で見たときの流れ
✅写真とキャプションの組み合わせ

ページ全体でどう見えるか？を考えて選ぶ‼️

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

画像を特殊な形でマスクするときは…

✅ 単純な形 → 図形を変形して合わせる
✅ いびつな形 → ペンツールで先に���スクの形を作る
✅ 閉じた図形＋塗り（Fill）を忘れない☝🏻✨

形に合わせて、作り方を変える‼️

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

企業インターンに参加‼️
Codexを使ったコーディングでは…

✅「何をどう実装したいのか」を整理する
✅それをプロンプトでしっかり伝える

大切なことは、Web周りの知識や技術だけでなく、国語力も…だということ🤔✨

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

webページのリデザイン🎨

Photoshopの変形は「⌘ + T」‼️

画像やオブジェクトの大きさ・位置・角度を変えたいときは、まず⌘ + T（自由変形）。

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

webページのリデザイン🎨

とても良い復習📝になった件👇🏻✨

🧾dl / dt / dd の使い分け

✅dl → ひとかたまりの説明リスト
✅dt → 項目名
✅dd → その内容

忘れたらまた思い出して、手を動かす‼️

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

ワイヤーフレームからカンプへ、構成を考えながらデザインを具体化🎨

Figmaのマスク機能もまた少し深いところを知ることができ、理解が深まった気がする🤔♪

ただ今日の授業、元々はコーディングが主たる内容なんですけどね…🤣

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

📷Photoshop👉🏻選択範囲・マスク・レイヤーを使って画像を合成。

何を残す？何を隠す？どの順番で？を考えながら、少しずつカンプに近づける🔍✨

📍POINT🤔
👉🏻選択範囲とマスクの関係
👉🏻レイヤーの重なり順
👉🏻境界のぼかしと自然な合成

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

📍CSSの中央配置を復習📝

flexbox・grid・positionを使って、タテ・ヨコ中央に配置する方法を比較🔍

同じ見た目でも、配置の仕組みはそれぞれ違う。「なぜ中央になるのか？」が整理できた🤔✨

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

📷のアセット機能を復習＋α。やっぱりpsは奥が深い😅しかし、今の自分にもかなり便利✨に使えることを実感💕
一方…フィルター🔌は使いどころが見えない💧とりあえず必要になった時に思い出せるよう、記憶に🔖を付けておく☝🏻今はそれで十分かな？🤔

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

ふと思った🤔

新しい技術を習う度、今まで習ったことが登場する☝🏻

縦書きにはFlexboxやGrid。リデザインには"コード📝の知識。

点と点が少しずつ繋がって、1本の線が見えてきた👀✨

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

昨日に引き続き…😅

🗺カンプは「見た目」を作るだけじゃなく、実装を考える設計図。

昨日：構造を読む🔍
　↓
今日：組み立てを考える🛠✨

「自分にデザイン🎨なんて無理💦」
そう思ってたけど…

気づけば無意識にやってたわ🤣

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

🗺カンプは「見た目」を真似るのではなく、「構造」を読む🔍👀✨

📍POINT🤔
👉🏻余白は誰のもの？
👉🏻誰(何)と誰(何)が親子？
👉🏻SP→PCで何が変わった？
👉🏻画像はどう処理��れている？

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

writing-mode: vertical-rl;

✅vertical ：⬇️方向
✅rl：右➡️左へ
✅vertical-rl ：日本語らしい縦書き✨

縦書きは「文字の向きを変える」のみならず、表現の幅を増やしてくれる🥰

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

今日の学び🌻

Figmaでもマスクを使った合成画像を作ることができる😷

その考え方は…

✅見せたいところ 👉🏻 不透明
✅消したいところ →👉🏻透明
→その間にグラデーション🌈をかける

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

① clip-path
② favicon

実装方法は違えど、どちらにも便利なWeb🛠がある

CDNもそうだが、どこかの親切な人たちが、誰かのために作ってくれた便利な🛠✨

先人たちへの感謝💕を忘れずゴリゴリ使わせていただく😊

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

liは“箇条書きの文字”ではなく、1コンテンツを包む🗃️にもなる‼️

<ul>
<li>
<div class="〇〇〇〇">
<img src="..." alt="" />
</div>
<h2>テキスト…</h2>

<p>
テキスト…
</p>
</li>
</ul>

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

就職支援②

応募書類
👉🏻書くこと
✅企業が知りたいこと
📌履歴書＝減点を防ぐ
📌職務経歴書＝加点をつくる

面接
👉🏻伝えること
✅御社にどう貢献できるか？
✅長く定着できるか？

退職理由
👉🏻不満より次に何を実現したいか？

#職業訓練 #Web #キャリアビルド

[EIICHI TANAKA @everbloom_365]

💻今日の学び🌻

Lightbox→🖼✨

📍ポイント

💡 <img>タグを<a>タグで囲む‼️
💡 hrefに拡大表示する画像を指定
💡 data-lightboxでLightboxを適用

HTMLがどんな構造になっているか？も要観察🔎🤔

#職業訓練 #Web #キャリアビルド