MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
効率がいいマークアップの方法

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

公開日:2021年08月03日
最終更新日:2021年08月03日
s.masuda
デザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > 効率がいいマークアップの方法
このエントリーをはてなブックマークに追加
効率がいいマークアップの方法
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

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

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

主な使用言語

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

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年目で、未熟ですがより早く、より正確にを心がけています。
僕の知識で誰かの役に立てたら嬉しいです!
ここまで読んでいただきありがとうございました!

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
デザイナー
デザイン
公開日: 2016年12月19日
最終更新日: 2022年01月17日
デザイナーとしてのプロ意識(デザイナーがキャリアアップするための道のり-其の1)
オンスタ運営
グリットデザインを使いこなそう!
デザイン
Webデザイン
公開日: 2018年08月10日
最終更新日: 2022年01月17日
グリットデザインを使いこなそう!
オンスタ運営
制作現場で使えるバナー制作のワークフロー
デザイン
公開日: 2017年02月16日
最終更新日: 2022年01月17日
制作現場で使えるバナー制作のワークフロー
オンスタ運営
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
Shopify
デザイン
公開日: 2020年05月29日
最終更新日: 2020年05月29日
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
オンスタ運営
色の機能と与える印象を知って、上手に配色しよう!
デザイン
デザイン
公開日: 2017年06月21日
最終更新日: 2017年06月21日
色の機能と与える印象を知って、上手に配色しよう!
オンスタ運営
修正サクサク!校正記号を正しく覚えよう!
デザイン
公開日: 2018年05月29日
最終更新日: 2018年05月29日
修正サクサク!校正記号を正しく覚えよう!
オンスタ運営
Webデザイナーになるための必要になる技術スキル7選について学ぶ方法!【基礎知識】
デザイナー
デザイン
公開日: 2020年06月15日
最終更新日: 2020年06月15日
Webデザイナーになるための必要になる技術スキル7選について学ぶ方法!【基礎知識】
オンスタ運営
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
デザイン
Webデザイン
公開日: 2016年12月08日
最終更新日: 2022年01月17日
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
オンスタ運営
なんか物足りない…デザインにひと工夫!簡単テクニック10選
デザイン
Webデザイン
公開日: 2018年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
デザイン
Webデザイン
公開日: 2019年03月26日
最終更新日: 2022年01月17日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。