IT業界に未経験から入って早1年程。。。
未だにマークアップくらいしかまともに出来ないぺーぺーぱーぱーが、おすすめするツールやサイトをまとめました。
使ってみると喉にささった魚の小骨が取れるくらい、スッキリしながら作業進められますよ！(??)
参考にしているサイト
- エラーの英文読めない！ 公式ドキュメントオール英語読めない時はコピペ翻訳です笑 google翻訳より好き
deepl - flexboxのプロパティについて思い出せない時
flexbox チートシート - htmlの入れ子のルールが分からない時
HTML5 入れ子チートシート - css Grid Layoutの書き方が分からない時
CSSグリッドジェネレーター - 欲しい情報が個人HPや企業のブログ等でヒットしたら、理解を深めるためにドキュメントで確認する！
MDN Web Docs - おまけ 最近やっとJSONに触れる機会が多くなってきたので、、、JSONデータを読みやすくしてくれます！
jsonformatter
ツール
- ピクセルパーフェクトを目指すために
XDやAiデータを元におおよその値でマークアップした後、ブラウザ拡張ツール「PerfectPixel」を使うようにしたところマークアップする速度も上がりました！ - 素早くスタイルを記述するために
Sassを使ってCSSを書くのがメチャクチャ効率的に感じます。純粋なCSSしか知らなかった自分的にはSCSS記法のがすんなり馴染めました。※具体的な導入方法や使い方はググってみてください;; - 頑張らなくてもいい事は頑張らない
エディタの入力補完機能(Emmet)を使う、プラグインを使う。参考までに私が使っているエディタ「VS Code」のプラグインを紹介します、他にも色々あるのでぜひ調べてみてください。
英語読めない：Japanese Language Pack for Visual Studio Code
文字やコードが見づらい:Bracket Pair Colorizer2 や Indent Rainbow
どのファイルが何のファイルかわかりづらい:Material Icon Theme
あとがき
筆者の拙い投稿をご覧頂きありがとうございます。この情報でアウトプット力ついていくのか不安を感じてますので、少しでも気になるところや改善できそうなところがあれば優しくご指摘頂けると助かります。理解が深まるたびにこちらの投稿を更新する予定です。