前回はajsaiのポートフォリオ/ブログサイトに使っているWordPressのプラグインの紹介をしました。

今回はHTML/CSSについて書いていこうと思います。
ザ・平均的なWeb制作って感じなので、これからWebデザイナーを目指すよ！コーディング始めるよ！って人に届けばいいなと思います。

BEM

CSSの命名規則はなんちゃってキャメルケース & MindBEMdingです。

共同作業をすることが絶対になく、共通パーツも少ない、ページ個別のスタイルシートが存在して、ページ数が少ない。
ので、CSS設計に関してはそこまで気にしなくてもよい状態です。

一部守ってないので、今後書き直していきます…

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Gulp

面倒なことを自動でやってくれるタスクランナー「Gulp」

ホームページ制作会社の多くがGulpを使っているんじゃないでしょうか？
今回のポートフォリオに使っているプラグインを抜粋するとこんな感じです。

• gulp-sass
• gulp-ejs
• gulp-imagemin
• gulp-notify
• gulp-plumber
• gulp-postcss

他にも入れてるのですが、多すぎるので書くのは諦めました…

https://gulpjs.com/

SCSS

scssで書いて、cssに変換する形にしています。
とってもスタンダードな方法ですね。

フォルダ分けは「base, layout, mixin, module」ぐらいで、残りはルートにページごとのscssファイルを置いています。
必要最低限ですし、ファイル名を見れば中身に何がかいてあるかな？という点はわかるようにしてあるのでreadme的なファイルも必要ないかなって感じです（そもそも自分しか触らない）

お仕事をするなら、しっかりと引き継げるようにしましょう。

https://sass-lang.com/

Sublime Text

エディターはSublime Textを使っています。

最近はVisual Studio CodeやPhpStormがとても流行っていますね。
自分がWebを勉強し始めたころ、いろんな人に「あれはイケてる」「あれはダメだ」みたいなことを言われて散々悩みました。

結局好きなエディタを使えばいいかなって個人的には思います。

https://www.sublimetext.com/

2020年8月からVScode使ってます

最後に

めちゃめちゃ普通でしたね！

目標であった「ちゃんと作る」って部分をしっかりとできたので良いかなと思っています。

エディターは最近VSCodeに乗り換えようか悩んでいますが、まだ先かなって気はしています。
画面分割の仕様がめんどくさいなって思っているので….