前置き
筆者は未経験からweb開発・制作してるベンチャー企業に入社して8ヶ月の者です。一応プログラマーのいる部署に所属してますが、出来る事が少ないため振って頂ける業務は主にデザインからのマークアップ(HTML&CSS,アニメーションに用いる程度のJavascript)です。たまにwordpressの静的ページの組み込みやそれに関連してPHPを使う事はありますがまだまだ全然分からない・・・。
この業界の右も左も分からない状態から、実務を通して【学んだ事を誰もが見れる環境にアウトプットして、時には指摘等も頂きながら理解を深めたい】というのが投稿の目的になりますのでご了承ください。
・・・あわよくば同じような状況で頑張ってる方や悩んでる方に、「ここにも同士がいるよ」って伝わればいいなぁ。
メインコンテンツ
参考にしているサイト
flexboxのプロパティについて思い出せない時
flexbox チートシート
htmlの入れ子のルールが分からない時
HTML5 入れ子チートシート
css Grid Layoutの書き方が分からない時
CSSグリッドジェネレーター
ネットで調べた情報の正誤を確認する時
MDN Web Docs
欲しい情報が個人HPや企業のブログ等でヒットしたら、その後必ず確認する事で正しい知識が得られます。
ツール
ピクセルパーフェクトを目指すために
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
あとがき
筆者の拙い投稿をご覧頂きありがとうございます。「これでいいのか」と不安を感じてますので、少しでも気になるところや改善できそうなところがあれば優しくご指摘頂けると助かります。理解が深まるたびにこちらの投稿を更新する予定ですので、偶然にでもこちらの投稿に出会った貴方に温かく見守って頂けると私も嬉しいです。
↧