44WebCreate - よっしー@Web系フリーランス

現役エンジニア2年目。
Web制作とデザインも同時並行で学習中✏
HTML+CSS | Javascript | Typescript | Nest.js | Nuxt.js

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

クライアントとのMTGで初ヒアリング実施。
仕事でやってきたスキルを活かして結構自分手動で話を聞いていけるようになって成長を感じている。。。！！
責任感持って丁寧に仕事していきたいな。

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

契約書を土日に作成したけど、初めてしっかりしたものを作ったから、想定の見積もりよりもだいぶ時間がかかってしまった。。

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

SCSS

更に勉強になったのが、
変数としてRadiusやSpacing Size(要素間のギャップ)を設定していた。
例えば、base-radius: 4pxとかbase-spacing: 20px
他にはFocusの指定とかJSのAnimationとかもやるんだと思った。

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

SCSS

CSSコーディングバイブルの模写やっての学び
水平線をdividersとして変数設定してた。

あと、// gridの意味合いがわからなかったけど、おそらくメディアクエリのためのブレイクポイントの変数
$portrait, $landscape, $desktop ってかいてある

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

HTML

画像をラップするのにdivを使用していたけど、セクショニング・コンテンツを意識するためには極力div無しでやったほうが良いことに気づいた。
調べてみると、figureタグがマッチしそう。
キャプションをつけられることも初めて知った。

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

HTML

ボタンにaタグとbuttonタグを併用するのは良くない。
インタラクティブ（ユーザーが利用する要素）な要素の中にインタラクティブな要素を複合させると、不具合のリスクがあるし、アクセシビリティも低下する。

aタグにrole="button"を付与するのは新発見！

参考サイト
https://t.co/3iLvSGd7FV

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

やっぱり初心のこれ凄い！とか楽しい！が1番コーディングやってて良かったなって思うな

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

エンジニア初めて1年少し経った。
久しぶりにデザインの勉強戻ってきたけど、
CSSのdisplay: gridでauto-fitでレスポンシブ対応できるのめちゃくちゃ技術を感じて心躍る

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

でもこれが分かるようになって、個人開発でも活かせるようになったら絶対にプログラム楽しいと思うから、今はただひたむきに頑張るしかない😶

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

Laravelわからん。Nuxt.jsわからん。
実案件にアサインされて、最初からゴリゴリに改修課題貰ったけど、ソースコード読み込むだけで日々終わる🥲
初心者すぎて左遷されないか不安だ

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

多分近々時間ある時に、ZennかQiitaで職業訓練校から未経験入社を決めた経緯ややってきたことなどまとめて記事にします🙏
夜勤やりながらエンジニアを志望してた自分が、遂に夢を叶えられた！
同じ夢を持つ同志たちへ。夢を諦めないで前向きに生きて欲しい。今は辛いと思うけど、信じれば報われる。

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

2024.06~ ITエンジニアの職業訓練校に入校
2024.09~ 未経験から受託開発会社に内定

独学でWeb制作を学んでいたが挫折。
運良く職業訓練校への案内メールが届く。
覚悟を決めて入校し、約3ヶ月で未経験から受託開発会社へ入社確定しました！

#職業訓練校 #エンジニア #駆け出しエンジニアと繋がりたい

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

XDの文字間隔をCSSに変換してコーディングする

[XD]
AVの値を使う
[CSS]
letter-spacing: {(XDの値) / 1000}em;

[例]
XDのAVが200の場合は
(200 / 1000) = 0.2em; になる
→ letter-spacing: 0.2em;

#備忘録 #44WCの備忘録 #CSS #XD

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

CSSのみでアルファベットを全て大文字に変更する

[CSS]
text-transform: uppercase;

[例]
Game → GAME

#備忘録 #44WCの備忘録 #CSS

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

カードのリンク画像をホバーした時に画像が少しアップしてリンクだとわかる記述

.card:hover img {
transform: scale(1.1)
}
/*scale(n) nの数値はどれだけアップさせるかの指定*/

#備忘録 #CSS

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

flexbox の orderプロパティの順番は
order を指定している要素 -(マイナス)負の値
order を指定していない要素 0
order を指定している要素 +(プラス)正の値

#備忘録 #CSS

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

Sass

@ forwardは何度ファイルが跨っても使用することが出来る

#sass #備忘録

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

Sass

@ importが廃止されて@ useと @ forwardが導入されたのは、グローバル変数の衝突を抑えるため

【重要】変数の参照元を毎回記述する

[style.scss]
@ use "pack" as *;

p ｛
margin: $px;
｝

[pack.scss]
@ forward "var";

[var.scss]
$px : 30px;

#sass #備忘録

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

Sass

@ useは他のファイルにあるメンバー(変数や関数,mixinなど)を読み込んで参照できる
@ forwardは@ useで読み込んだファイルを転送する機能を持つ

@ forwardで読み込んだファイルのメンバーを、読み込み元のファイルで参照することは出来ない

#sass #備忘録

[44WebCreate - よっしー@Web系フリーランス @44webcreate]

ちょうどSassのインプットを終えて、実践しながら身につけていこうと思っていた矢先
バニラCSSでネストやミックスインができるようになったよ〜っていう世

技術の進歩は凄まじいな…(遠い目)