UIデザイナーのための、開発用語カンペ📝（コーディング系：前編）

2024年4月16日 18:43

IT業界はツールや用語の種類が多く、情報更新も頻繁なので大変ですね…。今回は、仕事する上でよく聞く用語を『開発チームで働くUIデザイナーのための、開発用語カンペ』としてざっくりとまとめました✍️
今回はコーディングに関する用語と、コードの走り書きメモを記載します。

📝HTML系

HTML Living Standard

html の最新のスタンダード。HTMLの最新の仕様を表しています。HTML5との大きな違いはありません。
細かいタグの違いは（HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！）が分かりやすかったです。

概要の参考
HTML Living Standardの魅力を探る！初心者から上級者まで必見

ちなみに…
W3C（World Wide Web Consortium）、WHATWG（Web Hypertext Application Technology Work Group） … HTMLやCSSの規格を策定している２つの組織。HTML Living StandardはWHATWGの方、HTML5はW3C。

セマンティック

HTMLセマンティック、セマンティック構文、セマンティック・ウェブなどの用語では「意味や目的を持たせる、タグを正しく使い分ける」という意味で、HTMLタグが持つ意味と役割を正しく使ってマークアップすることを指します。（プログラミングでは「コードの断片」を意味します。）
　
コードの可読性を上げ、検索順位にも影響があるとされています。
セマンティックタグはたくさん種類がありますが、有名なもので<main> <article> <aside> <section> <header> <footer> <figure>などがあります。

参考：mdn wed docs セマンティック

📝CSS・コーディング系

BEM

「Block（塊）」「Element（要素）」「Modifier（装飾）」の略。実務で使用するので少し細かめに記載。

Block （要素をまとめる大きな塊）
・例：Header、Nav、Menu、Search、logo など
・英単語が2つ以上の場合、ハイフンケースで記載。（例：content-left）
・Blockはネストできる。（例：Headerブロック > logoブロック）

Element （構成要素）
・ElementはBlockに属しているので、クラス名には必ずBlock名を含める。
・Elementは独立できない。（Blockに含めないといけない）
・BlockとElementはアンダースコア2つ(__)で区切る。
・ElementのElementを作るのは禁止。（例：Search-form__button__text）

Modifier （各要素の装飾）
・ElementとModifierはハイフン2つ(--)で区切る。
・Modifierは独立できない。（Block__Elementに含めないといけない）
・Blockに対してと、Elementに対して使える。
・見た目(small,caution)、状態(disable,active)、振る舞い (bottom-right)
・複数使える。

デザイナーも知っとこ
参考：ゼロからわかるBEM超入門

SASS

Sass（Syntactically Awesome StyleSheet）
ネスト（入れ子構造）でcssの記述ができ、変数（$hogehoge）が使える。よく使うcssをパーツ化して使いまわせる。

デザイナーも知っとこ
sassmeister.com ：css、html、ブラウザでの表示を一気に確認できる。

パーシャル（sass）

作業ファイルを分割できる。（例：_header.scss、_btn.scss）
@importで、1つのCSSファイルにまとめる。
アンダースコア_と.scssは省略することが可能。

SCSS

こちらは、従来のcssを踏襲した書き方が可能。（よく使うのはこちら）
サーバーでscssをコンパイルして、ブラウザではcssを読み込んでいる。
以下、scssで使う便利機能を記載します。

mixin （scss）

よく使うcssをパーツ化して使いまわせる機能。（@includeで読み込む）
初期値を設定しておく使い方も可能。

@mixin btn{
background-color: #a00;　　 //背景が赤
color: #fff;　　 //文字が白 }
}
.btn1{
@include btn;
}
　
//引数を使う場合
@mixin btn($bgcolor){
background-color: $bgcolor;　　 //背景が引数
color: #fff;　　 //文字が白 }
}
.btn1{
@include btn(#a00);›
}
　
//初期値を設定
@mixin btn($bgcolor:#a00){
background-color: $bgcolor;　　 //背景が引数＆初期値設定
color: #fff;　　
}
.btn1{
@include btn; //背景が赤
.btn2{
@include btn(#000); //背景が黒
}

ちょっと応用：mixinのプロパティも含めたblockごと、引数を渡したい時（@content）メディアクエリの記載に便利。

@mixin desktop{
 @media (min-width: 600px){　//メディアクエリのサイズ
   @content;{　 //@include で呼び出したい要素
   }
 }
}
.h1{
 font-size: 2rem;
 @include desktop {
  font-size: 5rem; //メディアクエリのサイズ以上の時、@content内が呼び出し
 }
}

extend （scss）

他のセレクターで定義した内容を引き継ぎたい時に使う。

.btn{
background-color: #a00;　
color: #fff;　
}
 
.btn1{
@extend .btn;　 　//ボタンの基本の装飾を読み込む
background-color: #000;　　 //背景を黒に上書き
font-weight:bold；  //スタイルを追加
}

@import （scss）

外部のscssを読み込む時に使う。
colorの変数や、reset cssなどを読み込むと便利。

@import{"../variable.scss"} //相対パス

四則演算（+,-,*,/,%）（scss）

CSS3のcalc関数のような四則演算が利用できる。

width:(100px - 20px) * 2;
width:calc(100% - 100px); //ここはscssではないが

OOCSS

Object Oriented CSS(オブジェクト指向CSS)の略。構造と見た目の分離。

SMACCSS

Scalable and Modular Architecture for CSS の略。

📝フレームワーク系

tailwind css

cssフレームワーク。OpenAI、Spotifyなどで利用されている。
下の例のように、独自のutility classを複数合わせて使用し、btnなど使用を限定するclassがない。
※ @applay機能でTailwindのclassをまとめることも可能。

公式ドキュメント

Bootstrap

オープンソースで無料のcssフレームワーク（javascript含む）。
レスポンシブに対応したサイトが作成でき、モーダル、フォームなどのパーツも揃っている。グリッドシステム（画面を12分割したレイアウト）が採用され、５段階のブレークポイントが用意されている。
公式ドキュメント（現在は5が最新）からzipをダウンロードし、bootstrap.min.css、bootstrap.min.js、fontファイルをサイトに読み込む、またはCDNで使用する。