frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

モジュール・コンポーネントを意識したhtml、css設計(前半)

スポンサードリンク


スポンサードリンク


kojikaさんのブログでcss設計についての記事を読みました。その中では命名規則やセレクタではなく宣言(プロパティと値)について書かれてました。とても詳細に丁寧に書かれていますが、ご本人がおっしゃるように他にも運用性・保守性のある宣言の書き方はあるのでそれも含めて普段自分が意識しているモジュール・コンポーネントを意識したhtml、css設計を書いてみます。

宣言ブロックのCSS設計|Web Design KOJIKA17

運用・保守性を上げるモジュール・コンポーネントとは?

運用・保守性を上げるモジュール・コンポーネントとは以下の3つが達成できていることです。

  • 文言量が増えたり、逆に要素をなくしても崩れない

運用していると色々なパターンが起こりうります。ブラウザに表示している時は、崩れていなくても文言の増減であったり要素の追加・削除などで崩れるソースで組まないことが重要となります。

  • 使いまわせる

使いまわせるモジュール・コンポーネントを意識することが重要です。webページはヘッダー、サイド、フッターの構造部分と見出しなど繰り返して使うパーツに分けられます。このパーツを汎用性のあるモジュール・コンポーネントにすることが重要です。例えば、モジュールを組み合わせた時に意図しない空きが出来るなどは防がなければいけません。

  • ルール付け

命名規則や格納ルールなど、ルールがあいまいだと一気にサイトは崩壊します。また、長く運用していると更新者が変わり受け継がれなくなることもあります。設計時にしかっりしたルール付けと引継ぎの為のwikiやコーディングスタイルガイドを作成する必要があります。

上マージンか下マージンか 上マージンを勧める理由

モジュールの前にマージンの話をします。
上マージンか下マージンかを実装を始める前に決めることは重要です。
途中でルールがぶれないように慎重に選定しましょう。

上マージンとは?

統一して要素に対してmargin-topを当てます。
例外以外はmargin-bottomを当てないようにします。

See the Pen GvxOjK by funclur (@funclur) on CodePen.


マージンの打ち消し

空きを上マージンとした場合最初の要素も不必要に上に空きが出来てしまいますね。
その為コンテンツ内の最初の要素はマージンを打ち消します。

.heading:first-child {
  margin-top: 0;
}
#contents > *:first-child {
  margin-top: 0;
}

下マージンとは?

統一して要素に対してmargin-bottomを当てます。
例外以外はmargin-topを当てないようにします。

See the Pen JyLOEm by funclur (@funclur) on CodePen.


マージンの打ち消し

空きを上マージンとした場合コンテンツ内最後の要素も不必要に上に空きが出来てしまいますね。
その為コンテンツ内の最後の要素はマージンを打ち消します。

#contents > *:last-child {
  margin-bottom: 0;
}

ところがボックス内のマージンも最後の要素の下に余分な空きが出来ています。こちらも消す必要があります。

.box > * {
  margin-bottom: 0;
}
.box2 > * {
  margin-bottom: 0;
}

このように下マージンの方が打消しが多くなります。
上記で考えればまだ3つ済んでいますが、ボックスのモジュールが増えれば増えるほど打ち消しは増えます。
そうすると抜け漏れが増える原因にもなりますね。

line-heightを考慮したマージンに設定するか

マージンを設定する時、ボックス同士であればそのままのマージン値が反映されますが、テキストとボックス、テキストとテキストであればline-height(行間)が加算されます。
下記がその例です。

See the Pen eErzpR by funclur (@funclur) on CodePen.

1.がボックスとボックスのマージン、2.がボックスとテキストのマージン、3ががボックスとテキストの調整したマージンです。
1と2はmargin-topを20pxにしていますが、3は以下の計算から割り出した値13pxを当てています。
興味がある方が参考にしてください。

www.frontendmemo.xyz

line-heightは考慮すべき?

デザイナーが別の人であればその行間を考慮したマージンなのかを協議する必要があります。
そうでないとこんなに空く想定じゃないと思われてしまいます。先に説明しておく方がよいです。
上記記事でも書きましたが文字サイズが変わると行間(行間は単位を書かない)も変わるため完璧にするのは非常に困難ですし、そこまでする必要は個人的にないと思っています。大事なのは知った上で、対応できるできないを判断することです。

見出し

ここからモジュール・コンポーネントです。

この見出し、何が問題かわかりますか。
codepen右上のロゴをクリックして別ウィンドウで確認してみてください。

See the Pen NvzPWd by funclur (@funclur) on CodePen.

折り返しても崩れないようにする

見出しでよくある失敗が折り返した場合が考えられてないことです。

昨今私自身はレスポンシブデザインで作るサイトがほとんどです。レスポンシブデザインでなくてもですが見出しが折り返すことは運用していって十分考えられることです。

上記例はborder-leftがpxで指定されている為、2行になったとき伸びません。
その為%で指定する必要があります。

See the Pen LjrqKj by funclur (@funclur) on CodePen.


line-height

また、bodyにline-heightを指定しても見出しはpx数が大きくなるので行間が意図したものと違う場合があります。
そこも確認して必要に応じて見出しにline-heightを指定しましょう。

装飾は出来る限りcssで対応

見出しは昨今装飾が入ることが多いですがほとんどがcssで対応できるものです。
出来るだけcssで対応しましょう。

見出しを作成する時の注意点まとめ
  • 折り返しても崩れない
  • line-hightを指定する
  • 装飾は出来る限りcssで対応

リスト

デフォルトのビュレット(・)を消して、色のついたビュレットを実現したい時のソースになります。

こちらは何が問題でしょうか。

See the Pen EvRrqN by funclur (@funclur) on CodePen.


折り返した時ビュレットの下にテキストが来ないようにする

見出しと同じで改行が考えられていません。

改行した場合ビュレット(・)の下に文言が来ないようにスタイルを当てる必要があります。

See the Pen LjBmLq by funclur (@funclur) on CodePen.

違いは下記です。

ビュレットの下にテキストが来る
ul > li {
    padding-left: 15px;
    margin-top: 5px;
}
li::before {
  content: "";
  background: blue;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
ビュレットの下にテキストが来ない
ul > li {
    padding-left: 15px;
    margin-top: 5px;
    position: relative;
}
li::before {
  content: "";
  background: blue;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  left: 0;
  top: 7px;
}

display: inline-block;で位置するのではなく、absoluteで絶対配置させることがポイントです。

ol、ulの違い

olとulの違いは皆さんお分かりでしょうか。

下記はol、ulどちらでしょう。

大事なことリスト

  • 1.折り返しても崩れない
  • 2.装飾は出来る限りcssで対応
  • 3.line-hightを指定する


数字がつく場合はolと思っている方もいるかもしれません。

これはulです。数字がついていますが単純に3つ上げているだけです。
olは数字がつくリストではなく、順序のあるリストを表示する際に使用します。

例えば下記はolの正しい使用例です。

カップラーメン作り方の手順

  • 1.お湯を沸かす
  • 2.蓋を開け注ぐ
  • 3.3分待つ

この場合順序を変えられないですよね。順序のリストかどうか迷う場合は順序を変えてみて意味が通るかを考えると良いです。
このように文書構造や文脈を考慮してマークアップすることをセマンティックと言います。

セマンティック:
一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。

入れ子

リストは入れ子が発生しうるモジュールです。
リストには通常のリスト、順序リスト、注釈リスト、記述リストなど様々なリストがありますが、それら全てを入れ子にして余分なマージンがあったりなさ過ぎたりをテストしてみることをオススメします。
例えば入れ子が考えられてないリストモジュールは以下のような例です。

See the Pen RZJdLq by funclur (@funclur) on CodePen.

olの左が空き過ぎています。入れ子のolにpadding-left:20px;を当てると調度良くマージンが空くはずです。

リストを作成する時の注意点まとめ
  • 改行
  • ol、ulの違いを意識
  • 入れ子でも崩れない

まとめ

以上モジュール・コンポーネントを意識したhtml、css設計前半でした。
後半は来週書く予定です。

www.frontendmemo.xyz