OOMORI.lunch

以前大学の研究室などで何度かHTML講習会を開いたことがある。文章構造云々の話しをするのだけど、その時に決まって聞かれるid属性とclass属性。人によって色々だろうけど、自分なりのやり方をまとめておきます。

意味を考える

HTMLなどで文章構造を定義するときに重要なのは、キチンと意味を考えること。文章の意味を考えた上で、使うタグや属性を決める。そして、それと同じことがidとclassにも言える。id（identity）とclassには

class

（人・物の）分類，種類（ kind ）

id（identity）

身元，正体，独自性，固有性，主体性

といった意味がある。そして、それを考えてidを使うか、classを使うかを決める。

具体例

上のことを踏まえて、具体例を挙げてみる。

idの場合

idの場合は特定の範囲に固有の名前を付ける。

ウチのサイトでいくと、headerや、content、footerなどがそれにあたりる。そうすることで、「ココからココまではheader、ココからはcontent」という具合に名前をつける感じ。

classの場合

classの場合はその範囲を他と区別するために使う。誤解を恐れずに言えば、ボキャブラリを増やす感じになるかな。

例えば、HTMLでは時間を表す、<date>のようなタグはない。なのでclass=”date”としてやることで、擬似的にHTMLのボキャブラリを増やしてやる。

とまぁ、こんな感じッス。まぁ、場合によっては妥協しなければならない場面も多々あるけど、それでもなるべく最善のマークアップを心がけたいと思います。

Drinking Rockstars and Programming ≫ Creating a Style-Guide for your site

複数人で大きなサイトを作るとき、サイトのスタイルガイドを作っておくと便利だよ、という話し。

複数人で作るとき、大抵は使うタグや、id、classとそのスタイルをあらかじめ決めておいたりけど、数日間すると忘れてしまったり、変更があったときに色々と面倒くさい。そして、スタイルの追加や変更が積み重なって、似たようなスタイルが幾つも出来てしまうと、もう末期。

そういったことを防ぐためのアイディアが上の記事で言うスタイルガイド。言ってしまえば、一種のガイドラインとも言える。こういったものを単なるHTMLファイルだけでも良いから作っておけば、イメージも統一できるし、変更があったときに視覚的に捉えることができる。それに数日間CSSとHTMLに触れていなくても、直ぐに思い出せたりと、色々メリットがある。

今2つのサイトを複数人で作ってるんだけど、どちらもスタイルシートの部分で若干不安なところがあったりする。なので、早速スタイルガイドを作って、みんなで共有してみようかなぁ。

参考リンク

Kevo StyleGuide

今回はMacの圧縮ツールを紹介。

Clean Archiver

シンプルなMac用の圧縮ツール。対応形式はzip、gzip、bzip2、dmgなど。(スクリーンショット)

注目すべきは、.DS_Storeファイルを含めずに圧縮できる点。Macで圧縮すると必ずこのファイルも含んでしまって、Winユーザにファイルを渡すときなどは、ちょっと申し訳なかったりしたんだけど、その辺も無事解決だ。

ってわけで、Winユーザと一緒に仕事することの多いMacユーザにお勧めッス。

フリーで使えるパワーポイントのテンプレートを漁ってみた。

というのも、大学4年になってから、パワーポイントを使って発表する機会が増えてきた。割と身内な感じのときはHTML Slidyを使っていて、Slidyだとテンプレートは全部CSSで作れるから楽なんだけど、パワーポイントの場合はそうはいかない。しかし、デフォルトのテンプレートはみんな使ってるし、あまり使う気がしない。ってわけで、簡単に釣果を。

112 Free PowerPoint templates and backgrounds from Presentation Helper

結構センスの良さ気なテンプレートがたくさん。

PowerPoint Free Design Template –無料で使えるパワーポイントのデザインテンプレート–

Cold、Hot、Simpleの3つのカテゴリがあって、どれも良い感じ。

ざっと漁った結果だと、この2つのサイトのテンプレートが良い感じ。中身も重要だけど、見た目でハッタリもかまさないと（＾＾；