ホーム / HTML /

フロントエンド技術を学ぼう 2-9.HTMLとCSSについて学ぶ

2020年7月24日金曜日

CSS Front-end Developer Handbook HTML

t f B! P L

Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載。

HTMLとCSSについて学ぶの説明です。


HTMLとCSSについて学ぶ

HTML

一般にHTMLと呼ばれるハイパーテキストマークアップランゲージは、Webページを作成するために使用される標準マークアップ言語です。

WebブラウザはHTMLファイルを読み込み、Webページにレンダリングできます。HTMLはWebサイトの構造を記述する、プログラミング言語というよりはマークアップ言語です。

参照元：英語版Wikipedia

HTMLでは以下の様に、ドキュメントの内容に対して意味づけを行うことができます。

<!--「見出し1」という文字列は「h1(1番重要なヘッダ)」ですよ-->
<h1>見出し1</h1>

基本的なHTMLの例

See the Pen html example by mojage (@mojage) on CodePen.


CSS

カスケーディングスタイルシート(CSS)は、マークアップ言語で記述されたドキュメントの外観とフォーマットを定義するために使用されるスタイルシート言語です。
HTMLやXHTMLで書かれたWebページやユーザインタフェースのスタイルを変更するためによく使用されますが、XML、SVG、XULなど、あらゆる種類のXMLドキュメントに適用できます。

HTMLとJavaScriptに加えて、CSSは、視覚的に魅力的なWebページ、Webアプリケーション用のユーザーインターフェイス、および多くのモバイルアプリケーション用のユーザーインターフェイスを作成するために、ほとんどのWebサイトで使用される基礎技術です。

参照元：英語版Wikipedia


CSSでは以下の様に、ドキュメントの内容に対して装飾を行うことができます。

/*「h1」というタグに対して以下の装飾を施します。*/
h1{
font-size: 20px;              /*<-フォントサイズは20ピクセル */
color: #eee;                  /*<-文字色を#eee */
background-color: #800000;    /*<-背景色を#800000 */
padding: 5px;                 /*<-内側の余白を5ピクセルとる */
margin: 0px;                  /*<-外側に余白は必要ない */
border-left: 10px solid #eee; /*<-左側に10ピクセル分の縁取りをして、#eeeの色を指定 */
}

基本的なCSSの例

See the Pen css example by mojage (@mojage) on CodePen.

家を建てることに例えれば、HTMLが骨組み、CSSは外装と見なすことも出来ます。


一般的な学習リソース


有料のコース


書籍

HTML and CSS: Design and Build Websites
(HTMLとCSS：デザインとWebサイト作成)


HTML Mastery: Semantics, Standards, and Styling
(HTMLマスター：概要、標準仕様、スタイリング)


HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方


マスタリングCSS

さらにCSSを使いこなす為に、セレクタとFlexboxを中心に学びましょう。


よく使うCSSセレクタの例

CSSのセレクタとは、どの要素に対してスタイルを定義するかを指定する方法です。


div{background-color: red;} /*divがセレクタ*/

#topix1 h2{background-color: red;} /*#topix1 h2がセレクタ*/

セレクタシンタックス例
タグ名Adiv{background-color: red;}
id名#id#topix1{background-color: red;}
A要素配下の全てのB要素A Bp strong{background-color: red;}
id名配下の全てのA要素#id A#topix1 h2{background-color: red;}
class名.class.hotwords{background-color: red;}
A要素配下の指定した全てのclass名A.classul.important{background-color: red;}
A要素とB要素A, Bp, .important{background-color: red;}
全ての要素**{background-color: red;}
A要素配下の全ての要素A*p*{background-color: red;}
A要素の次にあるB要素A + Bp + .greeting{background-color: red;}
A要素に続く全てのB要素A ~ Bh2 ~ p{background-color: red;}
A要素直下のB要素A > Bh2 > p{background-color: red;}

Flexboxサンプル

Flexboxとは、レイアウトをフレキシブルに行える手法です。


#container1 {
display: -webkit-flex; /*flexboxを適用する(safari用)*/
display: flex;　            /*flexboxを適用する*/
flex-direction:row;      /*flexbox内での配置順序を左から右にする*/
}

See the Pen flexbox sample by mojage (@mojage) on CodePen.


参照元


書籍

CSSシークレット ―47のテクニックでCSSを自在に操る


CSSの設計

有名なCSS設計手法はいくつかありますが、共通することはウェブサイトをパーツの集合体として考え、そのパーツごとに分けてCSSを考えることです。
す。(ヘッダー、フッダー、大見出し、小見出し、リスト、表、ボタンなど)


Atomic Design

Atomic Designはコンポーネントの単位を5つに分けています。


コンポーネント内容例
Atoms（原子）UIを構成する基礎的な要素。対象の要素が機能的にそれ以上分割できないもの。カラーパレット、フォント、アニメーションなど。
Molecules（分子）Atomsを組み合わせて作る要素。Moleculesになることで意味を持つ。フォームはラベル・入力フォーム・登録ボタンというAtomsからなる。
Organisms（有機体）AtomsやMolecules、他のOrganismsを組み合わせて作る要素。ヘッダーやフッターはこのOrganismsに含まれ、「タイトル」というAtomsと、2つのMolecules「ナビゲーション」「SNSのボタン群」が組み合わさり、ヘッダーというOrganismsになる。
Templates（テンプレート）MoleculesやOrganismsを組み合わせて作る。Templatesはページ構造を説明するもので、ワイヤーフレームと同義。
Pages（ページ）Template内へ実際の文章や画像などが入ったもの。実際のページ。

BEM

BEMは3つの概念によってCSSを構成します。


概念クラス命名規則説明
Block.[Block名] { ... }Webページを構成するパーツのこと。ヘッダー、ナビゲーション、商品説明、フッターなど。
Element.[Block名]__[Element名] { ... }Blockを構成する要素のこと。検索フォームを構成するinputやbottonなど。
Modifier{[Block名]or[Element名]}_[key]_[value] { ... }既存のBlockやElementを流用し、見た目や動きが違うものを作る場合。現在いるタブのみ色が変わる場合など。

ITCSS

Inverted Triangle CSS(逆三角形CSS)の略称で、全体に渡る[Settings]から詳細な[Trumps]まで、7つのレイヤーにわけてCSSを構成します。


レイヤー説明
Settingsプリプロセッサで利用するグローバル変数、フォント、色など。
Toolsプリプロセッサで利用するmixinやfunctionなど。最初の2つのレイヤーにはCSSを出力しないことが重要。
Genericnormalize.css、resetなど、スタイルのリセットや正規化、ボックスサイズの定義など。これは実際のCSSを生成する最初のレイヤー。
ElementsH1タグやaタグなど巣のHTML要素のスタイリング。
Objects装飾されていないデザインパターンを定義するクラスベースのセレクタ、例えばOOCSSのメディアオブジェクト。
Components固有のUIコンポーネント。UIコンポーネントはオブジェクトとコンポーネントで構成される。
Trumpsユーティリティとヘルパークラス。ヘルパークラスを隠すなど!importantを利用して良い。

OOCSS

Object-Oriented CSSの略で、Webページをレゴの集まりの様に捉え、ひとつひとつのパーツをそのパーツで完結するようにCSSを書きます。


<h2 class="topix">Title</h2>
<h2 class="topix2">Contact</h2>
<h2 class="topix3"><span>Menu1</span></h2>
<h2 class="topix3"><span>Menu2</span></h2>

/* topix module */

.topix {
prop: val;
}

/* topix2 module */

.topix2 {
prop: val;
}

/* topix3 module */

.topixg3 {
prop: val;
}
.topix3 > span {
prop: val;
}

SMACSS

Scalable and Modular Architecture for CSSの略です。CSSのためのスケーラブルでモジュラーなアーキテクチャという意味になります。
SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。


カテゴリ説明セレクタの規則
Baseサイト全体に影響するもの。classやIDセレクタを使わない。
Layoutヘッダやフッタなど、ページレイアウトを定義する。l-をつけるなどレイアウトだとわかるクラス名にする。
Moduleレイアウトの中に配置する再利用可能なパーツを定義する。接頭辞なし
StateJavaScriptで操作されるレイアウトやモジュールの状態に対するスタイルを定義する。接頭辞is-
Themeテーマ機能がある場合にのみ、テーマごとのスタイルを定義する。theme-接頭辞などをつける。

SUIT CSS

SUIT CSSはコンポーネントベースのCSS設計手法。ReactやEmber、AngularといったコンポーネントベースのUI設計と相性がよい


rscss

rscssはフレームワークではありません。メンテナンス可能なCSSを構築する為のアイデアです。


参照元


コーディングガイド


参考文献/ドキュメント


用語集


規格/仕様


QooQ