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

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

www.mojage.club

第19回はPart II: Learning Front-End Devから、
9項のLearn HTML & CSSを紹介します。

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

Sponsored Link

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がセレクタ*/
セレクタ シンタックス
タグ名 A div{background-color: red;}
id名 #id #topix1{background-color: red;}
A要素配下の全てのB要素 A B p strong{background-color: red;}
id名配下の全てのA要素 #id A #topix1 h2{background-color: red;}
class名 .class .hotwords{background-color: red;}
A要素配下の指定した全てのclass名 A.class ul.important{background-color: red;}
A要素とB要素 A, B p, .important{background-color: red;}
全ての要素 * *{background-color: red;}
A要素配下の全ての要素 A* p*{background-color: red;}
A要素の次にあるB要素 A + B p + .greeting{background-color: red;}
A要素に続く全てのB要素 A ~ B h2 ~ p{background-color: red;}
A要素直下のB要素 A > B h2 > 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を出力しないことが重要。
Generic normalize.css、resetなど、スタイルのリセットや正規化、ボックスサイズの定義など。これは実際のCSSを生成する最初のレイヤー。
Elements H1タグや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 レイアウトの中に配置する再利用可能なパーツを定義する。 接頭辞なし
State JavaScriptで操作されるレイアウトやモジュールの状態に対するスタイルを定義する。 接頭辞is-
Theme テーマ機能がある場合にのみ、テーマごとのスタイルを定義する。 theme-接頭辞などをつける。
SUIT CSS

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

rscss

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


参照元

コーディングガイド

参考文献/ドキュメント

用語集

規格/仕様

HTML/CSS ニュースレター