css Archive

Google Codeの使い方が詳しく書いてあった。

[Subversion] Google Code でホスティング＋TortoiseSVN の使い方という記事を参考にして、プロジェクトを登録しました。登録しただけであとは何もしてません。

us-katapad

http://code.google.com/p/us-katapad/

よくわからんので、当面はwikiとsubversionを試すだけになるかな？

自前のHTML・CSS・JavaScriptテンプレセット＆フレームワークをオープンソース化しようと思っています。

みんなでワイワイやってたほうが楽しいと思うので、オープンソース化しようかなと思っています。それにあたり、HTML等に著作権があるのかどうか気になりました。

Flashを作っているときはコンパイルされたswfのみを納品＝著作権を譲渡しているので、ActionScriptは僕、あるいは会社の著作物となります（たぶん）。それにより、ライブラリ化されたソースは別の案件で使いまわしが利くようになります（たぶん）。fla納品のときはライブラリActionScriptまでは譲渡しません。

HTML・CSSとかはどうなのか調べてみました。

著作権はほぼ認められない？

HTMLソースやCSSソースに著作権は発生するか？

http://kuroneko-y.hp.infoseek.co.jp/paku4.HTML

HTMLやCSSなどホームページの著作権について

http://koke.jp/blog/2006/06/HTMLCSS.php

HTML・CSSなどは著作権が認められにくいのではないか、という結論っぽいです。

オープンソースするとしたらgoogle codeでやる

のがいいのかな？このサイトはxreaでsubversionもsshでしかいけない（そもそも正式にサポートされてない）ので、google codeがいいのでしょうかね？著作権もよくわからんので、ひとまず棚上げで！

当ブログをご覧の2,3人の方へ耳よりなお知らせです。

2007.7/21（土）にセレブの象徴アップルストアでゴニョゴニョとお話をすることになりましたので、告知します。
http://ws.transrain.net/

来週の土曜ですね。お時間ある方はよろしくお願いします。僕はtipsを中心にしゃべる役割です。tipsというよりlifehack的な発言かも。

一緒に情報交換できる「場」にしたいと思っています。できるだけ一方通行のコミュニケーションではなくって、インタラクティブなことを！と思っています。

その他、肩パッド情報

最近は仕事がhtml・cssコーディングからFlash・ActionScriptになりました。プログラムを書いているとドリテンプレートの分岐のさせかた、JavaScriptの書き方など、ずいぶんブラッシュアップできるようになりました。

オブジェクト指向がわかるとロールオーバーなどスクリプトがとてもわかりやすく書けるようになります。 いずれ記事も書きましょう。

テンプレート変数の定義

以下をdwtファイルの/head直前に記述します。

<!-- TemplateParam name="tagName" type="text" value="p" -->

テンプレート変数のnameがtagName、typeがtextでvalueがpという意味です。nameはhtmlタグのnameやid属性と同じ意味です。name、valueともに任意の値を取れます。

変数を編集可能領域の外に仕込む

変数の適用先は編集可能領域の外側でしか使えません。領域外のサイトIDの部分に以下のように設定します。

<@@(tagName)@@ id="siteID"><a href="../index.html">サイトID</a></@@(tagName)@@>

このdwtを使用し、新しくページを作ってみましょう。@@(tagName)@@の部分が変数の値であるpに変更されます。つまり<p>サイトid</p>となります。

h1にしたいとき

このdwtが適用されているページを開き「修正」メニュー→「テンプレート」→「テンプレートプロパティ」を開いてください。tagNameという項目があるので、ここにh1と入れてください。これでタグがpからh1に変更されます。

このようにしてうまく使えば一つのdwtでいくつものバリエーションを作ることができます。

めっさ大事な最初の設計

どういうコーディングフローを踏んだかをかいつまんで書きますね！ここすっごい大事なので設計にはすこし時間をかけましょう。

1. まずデザインを一通りみる
2. ワイヤーフレームレベルをさらっと紙に書く
3. ワイヤーフレームの背景指定も紙に書いとく
4. コンテンツエリアで共通項をだいたい考える
5. このへんでテレビを見る
6. ナビゲーションで軽く悩む
7. 見切り発車でテンプレ部分をスライス
8. テレビで「落合のモノマネ」を見て、いたく感心する。シュールとベタの融合。
9. ロゴのコーディングがヤバいことに気づく
10. テレビという現実逃避が心地よくなる
11. ロゴはなんとかなるだろうと思い、さらりとすすめてしまう。

ここで大事なのはほんのすこし頭で考えて、紙にサラサラと書くことです。あまり細かくする必要はないです。あと、テレビは消すこと！

コーディングポリシーを決める

これもめちゃめちゃ大事です。htmlに魂を込めるんです。カズはフランスに魂を置いてきてますけど、カズ以外のみなさんは魂を込めてください。僕の魂は以下です

• あっちはdlでこっちはtableとかだと、あとの人が大変です。ガイドラインはしっかり立てましょう
• 難しくても、取り立てて必要ないdiv,spanは使わない
• 文字サイズ変更は敏感に
• div.sectionの相対配置、絶対配置系は恐れず使う

あっちはdlでこっちはtableとか

これは難しい問題です。僕の極論を言ってしまうとtableは巨大なフォーム以外、あまり使いません。新着情報はレイアウト次第ではdlのデフォルトがそっくり当てはまるときもあれば、表組みが当てはまるときもあります。今回のレイアウトだったらたまたまtableだったけど、リニューアル時にはdlのレイアウトだったら…。あるいは、逆のときは…。

必要ないdiv,spanは使わない

縛りですね。IE6がなければ、div.section以外でdivはほとんど使わなくても済みます。

文字サイズ変更は敏感に

これも縛りですね。ctrl+マウスホイールでコロコロやるのを趣味にすると、いろんな発見ができます。とはいえ、IE7のズームはひとくせあるみたいで、いま調査中です。絶対配置あたりのズームがチョーヤバい。

div.sectionの相対配置、絶対配置系は恐れず使う

見出し以下の本文やらは若干paddingが付いてるレイアウトってたくさんあると思います。いちいちcssでひとつひとつpadding入れたり、classにpadと入れるのも面倒で複雑です。そのときにdiv.section内の見出しを絶対配置！なんもこわくないです。思い出したら使ってみてください。

たぶん、みなさんも似たような魂なりポリシーは持っていると思います。僕よりもっとすばらしいポリシーを持っているひともたくさんいますね。そういう人はソースからプンプン臭ってくるのですぐわかります。

Table Striping Made Easy

この表組みのように偶数列と奇数列で異なるclassを設定し、背景色を別にします。

ここで覚えることは以下です。

• $("table.stripe tr:even").addClass("even");…擬似クラスっぽい:evenを設定
• $("table.stripe tr").hover(function() { , });…擬似クラス:hoverを設定

 $("table.stripe tr").mouseover(function() {$(this).addClass("hover");})
.mouseout(function() {$(this).removeClass("hover");}); 

 $("table.generalTbl tr").hover(function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
} );

hover(hover時の設定,hoverが外れたときの設定)