HTML
CSS
フロントエンド

フロントエンドのいろは


CSSの設計


Webサイト構築の大まかなワークフロー


  1. 企画・立案

  2. 案件定義

  3. Webサイト設計

  4. 画面デザイン

  5. マークアップ・CSS設計

  6. JavaScript開発

  7. ページ量産

  8. システム開発

  9. 公開


マークアップ前に考慮すべきこと


  • ページレイアウトのパターンはいくつそんざいするのか

  • コンテンツ内にどのような要素が配置されるのか

  • ウェブデザインの手法はレスポンシブWebデザインなのか、アダプティブWebデザインなのか

  • そのWebサイトの性質は、ECサイトなのか、コーポレートサイトなのか、ポータルサイトなのか、それ以外なのか

  • Webサイトを公開した後は誰が運用をしていくのか

  • CMSやシステムが入るのか

  • 推奨環境・端末は何になるのか

  • 外部サービスとの連携はあるのか

  • ユーザ層のターゲットはどのあたりか


保守性

モジュールの疎結合を考慮し、特定のページや場所、構造に依存せず制作の効率化や保守性を保つことが出来る仕組みを整える。


拡張性

基本的な内部構造に影響を与えずに、モジュールの機能を変更したり拡張できるようにすること。

モジュールを実装する上で、既存のモジュールを元にサイズ、色などが違った、別の派生モジュールを簡単に増やせるような設計を心がけると良い。


再利用性

再利用可能な部品としてモジュールを設計することができれば、同じようなHTML,CSSのコードを書く必要がなくなり、制作や運用の効率化に繋がる。また、デザインに一貫性を保つことができ、ユーザビリティの向上にも繋がる。


CSSの破綻理由を考える

CSSには柔軟性がある一方で、スコープのコントロールやカプセル化といった概念を実装できるプログラム的な機能がない。

曖昧性や理解に苦しむ表現が多用されると、コードに一貫性がなくなり、破綻を生む。

言語に足りない機能に関しては、コーディング規約やガイドラインを定めドキュメントにするのがよい。

また、ph1のような要素への直接のスタイル定義はできるだけ、避けてクラスを定義した上で、クラスセレクタにスタイルを定義するように心がける。

Webデザインのスタイルガイドの作り方 | UX MILK


スコープ

ある変数や関数などが特定の名前で参照される有効範囲のこと。変数や関数が使える範囲、影響する範囲をコントロールすることにより、保守性の高いプログラムを書くことが出来る。


カプセル化

オブジェクト指向プログラミングが持つ特徴の一つ。何かしらのデータや結果を返す処理の内部構造を外部から遮断し、機能を独立させるという考え方。


基本形

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
</head>
<body>
</body>
</html>


スタイルシートの読み込み

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スタイルシート読み込みバージョン</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>


コンテンツ・サイドバーを追加

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スタイルシート読み込みバージョン</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
</header>
<div class="wrapper">
<main class="main">
</main>
<div class="sidemenu">
</div>
</div>
<footer class="footer">
</footer>
</body>
</html>


豆知識


接頭辞


  • ヘッダーやフッター、メインコンテンツやサイドバーなどには、レイアウトカテゴリを用いる事がある。
    上記のように比較的大枠のスタイルにID属性を付与する慣習があり、明示的にl-という接頭辞を付与する。

  • レイアウトではなく、モジュールの場合は、m-mod-を付けても良い。

  • 常態を表すスタイルはisをつける。例: is-hidden is-active


    • JavaScriptで変化するスタイルに定義するため、複雑化するルールセットを上書くと同時に、同時に2つの常態が競合することは考えられないので、!importantを使用しても良い。



参考:

はじめてのCSS設計

HTML5/CSS3モダンコーディング