CSSによるウェブデザイン

CSSによるウェブデザインについて

CSSはCascading Style Sheetsの略で、HTMLでマークアップされた文書の見た目を制御するための言語となる。HTMLもCSSも非営利団体であるWorld Wide Web Consortium(略称W3C)によって仕様が策定されている。

W3Cは世界中の多くの企業や団体がメンバーとして参加していて、最終的に勧告される仕様に至るまでの何段階かのステップが公開される。このような非営利の標準化団体による使用は、特定企業による使用に比べて、グローバルに長期にわたって利用していける利点があるが、その反面仕様が確定するまでに時間がかかるという欠点もあり、最新技術を先取りするために、ブラウザの使用も作成者の利用も途中段階の使用に基づいて行われることもある。

CSSはHTMLとともに利用される。HTMLドキュメントでは文書の構造を明確にすることが重視される。ここでの「文書の構造」とは、見出し、本文、引用部、箇条書き、表組などの、コンテンツ各部の役割となる。このように文書の構造がHTMLの各要素により適切に定義されることによって、プログラムから構造を識別し扱える様になる。

Webの黎明期は、文書構造だけでなく、見た目の制御もHTMLで行っていた例えば、文字の表示スタイルは次の様にfont要素で指定していた。

<h1><font size="+2" color="#F00">大見出し</font></h1>
<h2><font size="+1" color="#C00">小見出し</font></h1>
<p>本文・・・・・・・・・・・</p>
<h2><font size="+1" color="#C00">小見出し</font></h1>
<p>本文・・・・・・・・・・・</p>

これは以下の様な表示となる。

しかし、小見出しごとに同じ設定のfontタグを記述するのは非効率的であり、HTMLファイルのデータ容量が増大する要因となるほか、小見出しの見た目を変更する場合にも、小見出しに含まれるfontタグを全て修正する必要がある。

この問題に対して、HTMLは構造の定義に特化して、見た目の制御をCSSで行うことで非効率さを解消できる。CSSを使うと上記のコードは以下の様になる。

<h1>大見出し</h1>
<h2>小見出し</h1>
<p>本文・・・・・・・・・・・</p>
<h2>小見出し</h1>
<p>本文・・・・・・・・・・・</p>

h1 {
  font-size: 1.5em;
  color: #F00;
}
h2 {
  font-size: 1.2em;
  color: #c00;
}

これらを動作させた結果は前述のものと同じとなる。

CSSはこのように見た目を管理する機能を担うものとなる。上記の例の様な基本的な文字修飾程度であればCSSの設定も比較的容易だが、複雑なレイアウトを定義するためには多様な知識と経験が必要になってくる。

そのような課題に対応する為の仕組みとしてCSSフレームワークがある。CSSフレームワークは、ウェブ開発者がCSSコードを簡素化し、より迅速かつ効率的にレスポンシブなデザインを作成するために使用されるものとなる。フレームワークは、グリッドシステム、ボタン、フォーム、アイコン、タイポグラフィなど、よく使用されるデザインパターンやコンポーネントを提供する。

以下に、よく使用されるCSSフレームワークを挙げる。

• Bootstrap: 最も人気のあるCSSフレームワークで、多数のコンポーネントやJavaScriptプラグインを提供している。Bootstrapには、レスポンシブなグリッドシステムやフォーム、ナビゲーション、ボタンなどが含まれている。
• Foundation: Bootstrapに並ぶもう1つの人気のあるCSSフレームワークとなる。Foundationは、グリッドシステムやフォーム、タイポグラフィなどのコンポーネントを提供している。また、リアルタイムのデータインタラクションに対応するJavaScriptプラグインも提供している。
• Materialize: Googleのマテリアルデザインの概念に基づくCSSフレームワークで、マテリアルデザインのアイコンやフォント、グリッドシステム、フォーム、ナビゲーションなどのコンポーネントを提供している。
• Bulma: 軽量で柔軟性の高いCSSフレームワークで、グリッドシステム、フォーム、ナビゲーション、ボタンなどのコンポーネントを提供している。また、カスタマイズが容易であることも特徴となる。

また、もう一つのCSSの効率的な開発ツールとしてCSSプリプロセッサがある。CSSプリプロセッサは、通常のCSS文法を拡張し、CSSコードをより簡単に記述できるようにするツールで、変数、関数、ミックスイン、条件文などの機能を提供し、CSSコードの再利用性、保守性、効率性を向上させることができるものとなる。主要なCSSプリプロセッサとして以下のようなものがある。

• Sass(Syntactically Awesome Style Sheets): 最も人気のあるCSSプリプロセッサで、変数、ネスト、ミックスイン、条件分岐、ループなどの機能を提供する。Sassは、レスポンシブなデザインの作成に役立つツールとして広く使用されている。
• Less(Leaner Style Sheets): Sassと同様に、変数、ネスト、ミックスイン、条件文などの機能を提供するCSSプリプロセッサとなる。Sassに比べて文法がよりシンプルであるため、初心者にとってはより簡単に扱える場合がある。
• Stylus: SassやLessに比べてより柔軟な文法を持つCSSプリプロセッサで、ネスト、ミックスイン、条件文、変数などの機能を提供する。また、StylusはJavaScriptの文法に似ているため、JavaScript開発者にとっては学習しやすい場合がある。

本ブログでは、このようなCSS技術、特にBootstrapを中心に様々な応用について述べている。

技術トピック

• CSSとBootstrapの概要と実装例

CSS（Cascading Style Sheets）は、HTMLやXMLなどのマークアップ言語で作られたドキュメントのスタイルやレイアウトを指定するためのスタイルシート言語であり、Webページの見た目を装飾するために使用され、フォントの色やサイズ、背景色や画像、余白、レイアウトなどを指定することができるものとなる。Bootstrapは、HTML、CSS、JavaScriptを使用してレスポンシブなウェブサイトやWebアプリケーションを構築するためのフレームワークとなる。

ここでは、主にbootstrapの様々な実装について述べている。

• ウェブのレイアウト調整(1) 2カラム左サイドバー構成

CSSの具体的な実装として、検索ページ等に利用される2カラム左サイドバー構成について述べる。

• ウェブのレイアウト調整(2) 参考図書紹介

CSSの参考図書について述べる。

• Bootstrap5 フロントエンド開発の教科書 – イントロダクションとBootstrapの導入まで

Bootrapは、HTML、CSS、Javascriptで構成されるフロントエンドのWebアプリケーションフレームワークとなる。現在のweb制作において、マルチデバイス対応の手法の主流となっているのが、レスポンシブwebデザイン(Responsive Web Design)となる。このレスポンシブwebデザインは、フルードグリッド、フルードイメージ、メディアクエリなどの技術で構成されている。

BootstrapでWebサイトを構築する場合には、ダウンロードしたCSSファイルやJavascriptファイルをHTMLから読み込む必要がある下図の様に作業フォルダーを作り、その中にcssフォルダー、jsフォルダーを作る。

• Bootstrap5 フロントエンド開発の教科書 – (2) Bootstrapでのレイアウト操作(1)

Bootstrapのレイアウト方法には、ページの幅を12列に分割したグリッドシステムが採用されている。この機能はページを2段組みや3段組みにしたり、コンポーネントを横に並べて配置したりする場合などに活用できる。以下にBootstrapのグリッドシステムを構成する要素について述べる。まずカラム(column:列)とガター(gutter:溝)について、次にコンテナ(container:箱)、rowクラス、columnクラスについて。さらにそれらを持ちた自動でのカラムの調整について述べる。

• Bootstrap5 フロントエンド開発の教科書 – (3) Bootstrapでのレイアウト操作(2)

次にデバイスごとにカラムを切り替えるレスポンシブなクラスについて述べる。Bootstrapにはレイアウトを切り替えるためのブレイクポイントが6つ用意されており、カラムにcol-md-*のようなクラスを追加することでレイアウトを6段階に制御できる。ここでは、これらの複数のクラスを組み合わせて、さらに複雑なグリッドレイアウトを構築する。

レスポンシブwebデザインでは、ある画面サイズを境目として適用させるスタイルを切り替えるが、この境目をブレイクポイントと呼ぶ。