得意なサイト制作
お見積り依頼
GG KNOWLEDGE
GrowGroupスタッフからお役立ち情報を発信!

効率がいいマークアップの方法

デザイン まっすー 公開: 2021.08.03 更新: 2021.08.02

こんにちは、まっすーです!
今回は、僕の秘伝のマークアップ方法をお教えして行こうと思います!

やり方は人それぞれだと思いますので、一つの参考になれば嬉しいです!

主な使用言語

普段使用している言語を一つずつ解説していきます。
コンパイルが必要な言語もありますが、ここでは省いて説明します。

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;
}
このように1行で3行分のコードを書くことができます!

実装の考え方

実装に当たってどのようにマークアップしてるか説明します。

デザインデータをじっくりと確認する

いきあたりばったりのコーディングをせずに、1度セクション毎に頭の中でHTML構造を整理します。また、スマホでの見え方もこの時点で考え、HTMLの構造をしっかりと見定める時間を作ります。

ex. アブソリュートの位置、横並びにする位置等

HTMLを一気に書く

デザインデータを確認し、HTML構造をイメージしたので、そのイメージしたものを一気にアウトプットします。ブラウザでのチェックもこの時点ではしません。

scssで必要なクラス、タグを一気に書く

次にscssファイルで必要なクラスを書き、浮かせるものや横並びの形が変わるものを先に記述し、細かいフォント周りは後にかきます。

レスポンシブに強くするために固定値は決めずパーセントやビューポートを使い、ある程度の可変に強くします。

微調整をする

大まかなスタイルの記述をしたら、あとは細かい調整です。

 

まとめ

マークアップエンジニア2年目で、未熟ですがより早く、より正確にを心がけています。
僕の知識で誰かの役に立てたら嬉しいです!
ここまで読んでいただきありがとうございました!

この記事が気に入ったら
「いいね!」

この記事を書いた人


関連コンテンツ

GrowGroupなら、
解決できます。

より多くの企業様のお力になりたい。
まずはお気軽にお問い合わせください。

052-753-6413 受付 / 平日10:00〜19:00 お見積り依頼 資料請求