THE HAM MEDIA BLOG

CSSを簡素化するためのトップダウンアプローチ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
見出し
HTML
マークアップ
Top-Down
トップダウン
CSS

woork: Top-Down approach to simplify your CSS code
Top-Down approach

英語のブログだけど、ここは毎日読んでいる。
今回の内容は、CSSをトップダウンアプローチでの
作成手順が書いてあったので、簡潔にまとめて、
自分なりの考えを書こうと思う。



トップダウンって?

僕にとっても聞きなれないのが出てきたので調べた。

トップダウンとボトムアップ

つまり、作業を細分化していく作り方をトップダウンと言うようだ。
CSSにおいてはこの方式で作成していくのがいいようです。
とは言うものの、CSSでボトムアップ方式ってのがイメージわかない。
多分、僕がトップダウン方式でしか
いままで作ってこなかったからだろう。
無意識になのか、僕はCSS作成時はトップダウン方式だったようだ。

トップダウンアプローチによる作成の流れ

  1. 1、全体を大きく分類(header,main,side,footerなど)
  2. 2、それぞれの部分でマークアップ。
  3. 3、マークアップしたもののスタイルシート設定。

サイトの全体から部分にわけ、さらに細かく中身にわけていく。
基本的なこととして、簡素化させることが必須なので、
ここの筆者は、主にidを指定するのは大きな部分だけで、
中身は基本的なHTML要素で作成していくと書いている(P,H1,UL....)

見た目にもシンプルでわかりやすい構造をしていることがわかる。
今回のはブログを例に書かれていたが、
CSSを簡素化して作成していくためには、とても重要なことでしょう。

ここの作者の面白いところ

彼のエントリーを読めばわかる事だが、
見出しのつけ方が特徴的かなって思う。
特にH1タグのつけるだけど、サイトのロゴ部分ではなく、
ブログの各エントリー部分につけている。
ブログ名よりも、エントリータイトルの方に重きをおいているのだ。

ちなみに、タイトルロゴ自体は、URLも何もはることなく、
なんとバックグラウンドとして表示している。
グローバルナビゲーションのところでHOMEがあるから
特に必要がないということだ。

ブログにおいてのっH1のつけどころ

僕がサイト制作において勉強した時学んだことは、
「H1タグは1ページにつき1つ」という事だった。
SEO的に考えても、ページの一番重要な見出しは1つにしたほうが、
そのページの何を最優先させる情報なのかがわかると思う。
本で言う大見出しで、タイトルの次に来るもの。

ブログやサイトにおいては、タイトルと同じものがきて良いのではないか?
本で言う本のタイトル部分。
ブログやサイトにおいてのタイトル、
つまりtitleが同じものに相当すると思われるが、
title自体はブラウザの枠部分にて表示されるのだから、
通常見せる部分としては、
やはりロゴ部分がH1として有るべきなんじゃないだろうか。

もっとも、その人によって、ページの重きとする部分が違うので、
何がH1に来るかは違うと思う。
ただ僕は、H1はタイトルと同等に有るべきかなって思っている。
もしブログのH1がエントリーのタイトルなのだとしたら、
ブログの中にたくさんの本が入っているようなもので、
ブログの全体は、図書館か本屋みたいなものなのだろう。

自分の場合は、ブログ全体が一冊の本であるので、
H1となるのは本の名前の部分、つまりロゴとかサイト名部分であって
何度も出てくるようなエントリータイトルは、
そのブログの中身ってことで考えているので、
H2の見出しにするのが、やはり妥当なのかなって思う。

っと、話がそれてしまったのでもとに戻そう。

トップダウンアプローチのメリット

結局のところ、トップダウンアプローチでサイトを作っていく方が、
HTMLのマークアップにしろ、CSSにしろ、
よけいな指定を増やさなくすんで、
且つ、ぱっと見でわかりやすく作れるのがメリットだろう。
沢山idやclassをつけるよりも、部分部分でみて行く方が、
効率もよく、簡素化したコードで作成できる。

ソース量が増えてしまうような人は
今一度制作アプローチから見直してみるのがいいだろう。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。