ウェブのレイアウト調整(CSS)(2)

サマリー

CSS（Cascading Style Sheets）は、HTMLやXMLなどの文書の見た目やレイアウトを設定するための言語であり、CSSを使用することで、ウェブサイトやアプリケーションのスタイルやレイアウトを一元的に管理することができるようになる。また、CSS開発の効率を改善するために、Bootstrap、Foundation、Materialize、Bulma等のCSSフレームワークや、Sass、Less、Stylus等のプリプロセッサなどのツールが提供されている。

ウェブのレイアウト調整(CSS)(2)

前述に続き、CSSの参考図書の紹介を行う。

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

具体的なサイトのイメージをベースに学べることができるので、バックエンドしか行っていなかったエンジニアがフロントエンドのCSS技術に触れる初歩の初歩的な書物として最適なものになっている。内容としては以下の様になる。

PART0　イントロダクション

A　本書で作成するサイト
Part1 スタンダードレイアウト
例
Part2 グリッドレイアウト
ブラウザの横幅が変わるとブロックが自動で移動する
例
Part3 シングルページレイアウト
例
対応ブラウザ
B　コーディングの進め方
ダウンロード
コーディングの前知識と注意点
C　デベロッパーツールの使い方
デベロッパツールの起動
要素の検証
洗濯した要素の確認
D　本書の読み方
謝辞

PART1　スタンダードレイアウト

01　このPARTで作るサイト
スタンダードレイアウト
このレイアウトの特徴
ヘッダー、フッター、サイドメニュー、メイン画面を持つ
サイトを構成する要素

02　ベースのコーディング
ファイル構成
要素とサイズの確認
HTMLコーディング
CSSコーディング

03　ヘッダーのコーディング
要素とサイズの確認
サイトロゴ
グローバルナビゲーション

04　メイン領域のコーディング
要素とサイズの確認
HOT TOPIC(特集コンテンツ)
NEWS(更新履歴リスト)
ARTICLES(記事ブロック)

05　サイドメニューのコーディング
要素とサイズの確認
ランキング
ドキュメントリスト
検索フォーム

06　フッターのコーディング
要素とサイズの確認
フッターメニュー
コピーライト
★セルフコーディングにチャレンジ
ランキングの見せ方

PART2　グリッドレイアウト

07　このPARTで作るサイト
グリッドレイアウト
このレイアウトの特徴
サイトを構成する特徴

08　ベースのコーディング
ファイル構成
要素とサイズの確認
HTMLコーディング
CSSコーディング

09　ボックスのコーディング
要素とサイズの確認
HTMLのコーディング
CSSノコーディング
Masonryの導入
カテゴリによって色を変える

10　中ボックスと大ボックスのコーディング
要素とサイズの確認
HTMLのコーディング
CSSのコーディング
画像が読み込まれるまでの時間を考慮する

11　ナビゲーションのコーディング
要素とサイズの確認
HTMLのコーディング
CSSのコーディング
サイトのコーディング
ナビゲーションリンクのコーディング
★★セルフコーディングに挑戦
ホバーした時の「MORE」表示

PART3　シングルページレイアウト

12　このPARTで作るサイト
シングルページレイアウト
このレイアウトの特徴
サイトを構成する要素

13　ベースのコーディング
ファイル構成
要素とサイズの確認
HTMLコーディング
CSSコーディング
Webフォントを使用する

14　ヘッダーのコーディング
要素とサイズの確認
サイトタイトル
ディススプリクション
ボタン

15 セクション1（ABOUT ME）のコーディング
要素とサイズの確認
見出しのコーディング
自己紹介分のコーディング

16　セクション2（WORKS）のコーディング
要素とサイズの確認
作品紹介部分のコーディング

17 セクション3（MY SKILLS）のコーディング
要素とサイズの確認
スキル紹介部分のコーディング
アイコンフォントを使用する
アイコン部分のコーディング

18　セクション4（CONTACT）とフッターのコーディング
要素とサイズの確認
問い合わせフォームのコーディング
フッターのコーディング

19　スマートフォン対応の下準備
現時点での表示の確認
メディアクエリを使用してレスポンシブWebデザインを実現する

20　スマートフォン対応のコーディング
現時点での表示の確認
へさっだーのコーディング
セクション1(ABOUT ME)のコーディング
セクション2(WORKS)のコーディング
セクション3(MY SKILLS)ノコーディング
セクション4(CONTACT)ノコーディング
★★★セルフコーディングにチャレンジ
見出しのデザインバリエーション
WORKSのインタラクション

APPENDIX セルフコーディングにチャレンジ コーディング例

PART1 セルフコーディングにチャレンジコーディング例
ランキングの見せ方
PART2 セルフコーディングにチャレンジコーディング例
ホバーした時の「MORE」表示
PART3 セルフコーディングにチャレンジコーディング例
見出しのデザインバリエーション
WORKSのインタラクション

並行して読むと良いものが、インプレス社の「今見直すCSS(ネット時代のこれから始めるプログラミング)。目次としては、第1章CSSの役割を考える、第2章CSSの基本、第3章基本の「次」のために、となっている。簡単な練習問題もついており、CSS言語の基本的な事がシンプルに記述された読みやすい書物となっている。

もう少し進んだものとしては「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」がある。

目次としては、第1章 CSSにおける設計とは(1-1 CSS設計の重要性,1-2 破綻しやすいCSS)、第2章 CSSの基本を振り返る(2-1 CSSセレクタと詳細度,2-2 セレクタのリファクタリング)、第3章 コンポーネント設計のアイデア(3-1 CSSにおけるコンポーネント設計,3-2 OOCSS,3-3 SMACSS,3-4 BEM,3-5 MCSS,3-6 FLOCSS)、第4章 コンポーネント設計の実践(4-1 コンポーネントをどのように作るか,4-2 よくあるコンポーネントの設計・実装パターン)、第5章 CSSプリプロセッサを用いた設計と管理(5-1 コンポーネントを個別に管理する)、第6章 コンポーネントの運用に必要なツール(6-1 コンポーネントの運用,6-2 スタイルガイドの作成方法)、第7章 Web Componentsの可能性(7-1 HTML/CSSのコンポーネント化,7-2 独自のコンポーネントを作る)となっており、大規模なフロントエンドを構築するためのノウハウが記述されている。

CSSプリプロセッサ(メタ言語)としては、Sass (Syntactically Awesome Style Sheets)やLess (The Dynamic Stylesheet Language)がある。簡易な検証用UIを書く分には、最初の図書ににも紹介されているウェブブラウザのdevツールで、CSSをベタ書きしていけば良いが、コードが長く複雑になると全体を最適な構造にするためにもプリプロセッサを利用する必要が出てくる。

参考のサイトとしては、CSSプリプロセッサ（CSSメタ言語）のお勉強、SassとLESSの違い ー CSSプリプロセッサ入門 ーがあり、図書としては「Less Web Development Essentials」や

「Sass and Compass for Designers」、

「Sass and Compass in Action」等がある。

次回はウェブ技術の概要について述べてみたい。