こんにちは、まっすーです！
今回は、僕の秘伝のマークアップ方法をお教えして行こうと思います！
やり方は人それぞれだと思いますので、一つの参考になれば嬉しいです！
目次
主な使用言語
普段使用している言語を一つずつ解説していきます。
コンパイルが必要な言語もありますが、ここでは省いて説明します。
Pug
PugとはHTMLをより効率よく書くためのテンプレテートエンジンです。
使うにはコンパイルが必要です。
Pugの主な書き方は..
main#main
section.section
h1.heading タイトル
このように、HTMLのようなタグを書かずに省略できIDやclassもcssのように書くことが可能です。
HTMLにはないmixinや変数も書くことが効率よくHTMLを生成が可能です。
scss
Scssとはcssをより効率よく書くための言語です。
scssのメリットは、よく使うスタイルや数値を変数に格納して一気に変更や修正が可能にすることができます。
またネストを＆（アンパサンド）で繋げることができ、css設計手法のBEMやFLOCSSの考え方に相性が良く、この組み合わせを使用している人が多いと思います。
$main-heading: 30px;
h1{
font-size: $main-heading;
}
.l-header{
&__heading{
font-size: $main-heading;
}
}
// コンパイル後
h1{
font-size: 30px;
}
.l-heading__heading{
font-size: 30px;
}
scssもmixinを使うことができます。
@mixin flex($justify-content: normal, $align-items: normal){
display: flex;
justify-content: $justify-content;
align-items: $align-items;
}
div{
@include flex(center, center);
}
div{
display: flex;
justify-content: center;
align-items: center;
}
このように１行で３行分のコードを書くことができます！
実装の考え方
実装に当たってどのようにマークアップしてるか説明します。
デザインデータをじっくりと確認する
いきあたりばったりのコーディングをせずに、１度セクション毎に頭の中でHTML構造を整理します。また、スマホでの見え方もこの時点で考え、HTMLの構造をしっかりと見定める時間を作ります。
ex. アブソリュートの位置、横並びにする位置等
HTMLを一気に書く
デザインデータを確認し、HTML構造をイメージしたので、そのイメージしたものを一気にアウトプットします。ブラウザでのチェックもこの時点ではしません。
scssで必要なクラス、タグを一気に書く
次にscssファイルで必要なクラスを書き、浮かせるものや横並びの形が変わるものを先に記述し、細かいフォント周りは後にかきます。
レスポンシブに強くするために固定値は決めずパーセントやビューポートを使い、ある程度の可変に強くします。
微調整をする
大まかなスタイルの記述をしたら、あとは細かい調整です。
まとめ
マークアップエンジニア２年目で、未熟ですがより早く、より正確にを心がけています。
僕の知識で誰かの役に立てたら嬉しいです！
ここまで読んでいただきありがとうございました！
