僕が読みやすいSassコードを書くときに気をつけていること2つ

CSS Niteに出演しますと書いてそれっきり、、、2ヶ月ぶりのエントリーです。こんにちは、しばっちです。タイミング的に仕事がぼんぼんやって来て、嬉しい悲鳴をあげる反面、フリーランスとは断ることを覚えないと大変なんだなということを痛感しています。

さて、「CSS Nite LP, Disk 32: Sass」に出演しました。僕のセッションでは「Sassを使ってどんなものなのかを知ってもらう」ということでしたので、落とし穴や管理面については極力後ろのセッションで解説されることを期待して省きました。アンケートでは叱咤激励いただき、もっと頑張りたいと思う次第です。

ちなみに、スライドは3ヶ月後に一般公開となりますので、急ぎで僕のスライドをご覧になりたい方はフォローアップ参加でお申し込みいただければ見られます。

セッション中では一切触れませんでしたが、コードの管理はもともとプログラムからWebを触ったので僕自身結構気を遣っています。今日はその部分を簡単に紹介します。

コーディングの設計で泣きました

月曜日でも定時で帰れるのは本当に嬉しいことです。ありがとうございます。 決して笑えない話ですが、最近某サイトで同じように更新依頼が届いて上司が要件に噛み砕いて僕に指示。ここまではよかったのですが、なんとそのサイトはテーブルレイアウト!

ただのテーブルレイアウトであれば、Dreamweaverのデザインビューのレイアウトモード(だっけ)を使って、ひょいひょいとできるのですが、出てきたサイトは枠なしのテーブルレイアウト。大きなテーブルの中に小さなテーブルが入っているのではなく、小さなテーブルが密集しているようなテーブルの構造でした。大きなテーブルがないと、幅指定を指定していても、文字数がちょっと多くなると、崩れてしまうという難易度の高いレイアウト手法。

CSSのプロパティの記述順序

他人の書いたCSSのソースを見ると、わかりづらいことがあります。というのは、CSSの癖が僕にもついているし、他人にもついているってことです。

CSSのプロパティの順番は決まっていないので、一人で書くとなるとカオスになることが多いです。こういうときに、厳密に書けるとすごく楽だなぁ〜と思ってしまいます。そこで、あれこれ調べてみたら、web creatorsにそれっぽい記事が。

Mozilla.orgでプロパティの順序を提案しているようです。英語記事だったので、僕はそそくさと逃げました(笑)。そして、同じ雑誌にその順序が載っていたのでメモも兼ねて書いておきます。

  • display
  • list-style
  • position
  • float
  • clear
  • width
  • height
  • margin
  • padding
  • border
  • background
  • color
  • font
  • text-decoration
  • text-align
  • vertical-align
  • white-space
  • other text
  • content

どんな順序で並んでるかというのを見ていくと、大体表示するか、しないかというところから後になるにつれ、装飾プロパティに近づいています。やっぱり「表示する・しない」を最初に出しておいたほうが、目に付きやすいですからね。

しばらく、これを参考にやってみようと思います。

ロゴは文章で何を意味する?

あるサイトをW3C標準に近づけてる今日この頃です。最近家ではDreamweaver8を買ったのにもかかわらず、MX!!後ろに2004なんて付きませんよ(笑)。そんなDreamweaver MXで主にコーディングしています。そして、意外と見過ごしがちだったことを…というよりは、いっつもブログに書こうとして忘れてたことを書きます。

いったいロゴってHTMLでマークアップするときに、どうやってマークアップするんでしょう?そんな疑問があったので、調べてみました。

天下のW3Cのトップページを見ると、一番大きな見出しとして定義しています。反対にトップページより下の階層のページは段落として定義し、イメージとして挿入しています。

なんか決まったっぽいです。僕のコーディング仕様の一つに。

確かにトップページだけは見出しとして定義したほうが良さそうな気がします。というのは、トップページだけは本で言えば表紙で、表紙の一番大きな見出しといえば、やっぱり本のタイトルだからです。

インサイドページ(トップページ以降のページ)は段落で定義しています。なぜdiv要素にしないのかと言えば、やはり文書としての一つのものとして扱っているからでしょう。これがdiv要素であったら、一つの範囲を指定しているだけで、文章の構成要素ではないことを意味してしまうのかな?(ちょっと曖昧)

とりあえず、ロゴはインサイドページで見出しにするほどのものではないことは勉強になりましたとさ。めでたし、めでたし。

| 1/2ページ | >>