Katapad Design » html

us-katapadという名のhtml・cssフレームワーク？を公開した愛されゆる巻き系の俺

katapad — Thu, 05 Jun 2008 16:02:17 +0000

「とりあえず」とか「それなりに」とか「そのうち」クオリティのus-katapadフレームワークを公開しました

ながらくタンスのこやしにしてたので、とりあえずsvnに突っ込みました。

http://us-katapad.googlecode.com/svn/trunk/

どうやったらtag打ったりリリースしたりするのかわからんかったので、とりあえずtrunkを公開しておきます。tortoiseSVNかそこらでダウンロードしてみてください。TortoiseSVNのインストールと設定

中身

html
dwt
cssセット
- リセットはまだ現役で使えるかな？全称セレクタ使ってるけど。safariとIEでline-heightより小さいimgを使うときは個別対処ですが、それ以外はピッタリしてくれるはず。
js

ドキュメント類はそのうち…

同梱してある_guideline/index.htmlあたりにちらっと書いてありますが、まだ準備してません。

以前、pukiwiki形式で20ページくらいしたためておいたのですが、googleのwikiの使い方がよくわからんのでしばらく放置状態になります。

ドキュメントがあったらかなりおもしろいと思うんやけどねー。とりあえずdwtはそれなりにいじっているので、それなりに使えると思います。bodyclassとかpagetitleとか。

Google Codeでプロジェクトを作った（だけで、リポジトリには何もいれてない）

katapad — Tue, 18 Mar 2008 14:26:39 +0000

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

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

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

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

HTMLとCSSにMITとかBSDとかつけられる？著作権なしでオープンソース？

katapad — Mon, 17 Mar 2008 15:17:07 +0000

自前の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などは著作権が認められにくいのではないか、という結論っぽいです。

じゃあMITとかBSDとか意味がない

ということは、丸パクリのソースでも構わないのでしょうかね。となるとオープンソースでMITやBSDは意味のないものになります。オープンソースHTMLから著作権表示を書いたとしても、そもそも著作権が認められないのです（たぶん）。

と思ったけど、blueprintっていうオープンソースcssフレームワークには著作権あるやん！

思いっきり著作権が書いてあった。
http://code.google.com/p/blueprintcss/

結局のところどうなんでしょうね。

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

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

cssとIEが原因でハゲることはあるのか

katapad — Wed, 22 Aug 2007 14:32:19 +0000

答え

あります。

この業界に入って1年とちょっとですか、名もなきコーダーの書いた変なコードに悩まされ、ブラウザ間の挙動に悩まされ、 IEに悩まされ、そしてハゲました。この1年ちょっとの間、ずっと考えてることがあります。世界のWebに関わる人全てでマイクロソフトを訴えたらいいのではないか。そう思っています。cssもJavaScriptもなんもかんも、不要なストレスと不要な作業をずいぶんと負っています。こないだのコーディングコンテストでもたった2ページのコーディングで10時間。うち7割がIEの対処ですからね。訴えられると思いますがどうでしょうか。

まあ、僕は訴えるとかよりも、育毛剤にしか関心がありませんので今回の件はパスしましょう。

前置きが長くなりましたが、前書いたkansaiWSでの資料の追加です。今回は表組みについてです。

tableのわりとよろしい使い方

あとはブラウザリセットですね。遅筆ですみません。

プレゼン資料を半公開

katapad — Sun, 29 Jul 2007 15:11:09 +0000

さてさて、ながらくお待たせしました。
先週2007年07月21日にアップルストア心斎橋で行われた、kansaiWSの発表資料を公開します（しかし、まだ全部はできてません、すみません）。
http://katapad.com/logs/presentation/kansaiWS_followSite/070721/

まだ全部できてなくて申し訳ないのですが、すみません、39度の熱が続いていました。今朝、やっと引きました。これは間違いなく天罰が下りましたね。僕も本当に変死するかもしれませんね。そのときは奇跡体験アンビリバボーをよろしくお願いします。

またボチボチと進めますんで、なにか質問等ございましたらこのコメントもしくはkatapadアットgmailまでお願いします。

まだドキュメントができていないのが以下です。

ブラウザのcssを消すやつ
table回りの解説

7/21(土)アップルストア心斎橋で○○○します！

katapad — Sat, 14 Jul 2007 15:47:06 +0000

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

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

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

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

その他、肩パッド情報

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

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

dreamweaverテンプレートでTOPと下層ページのh1タグを受けわたせる変数

katapad — Thu, 17 May 2007 15:19:47 +0000

Topページと下層ページでサイトID（ロゴ）のマークアップを変えたいのだけれど、dreamweaverテンプレートを使うとタグの変更ができません。かといってここを編集可能領域にすると、更新するときに検索→置換をせねばならず、やっかいになります。

そこでテンプレート変数を使います。テンプレート変数とは簡単にいうと編集可能領域の外にあるものを変更できるものです。今回は変数のtype="text"、つまり文字列の操作をします。

テンプレート変数の定義

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

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

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

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

<@@(tagName)@@ id="siteID">サイトID

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

サイトid

となります。

h1にしたいとき

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

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

すぃ～えすえすクォ～ディングカンテスツでの作り方ー設計篇

katapad — Wed, 16 May 2007 14:42:43 +0000

Hello World。そしてありがとうございました！みなさまおつかれさまでした。いやーblog書くのめっさ久しぶりです。懐かしいですね～。まあ、ドリで書いてるんですけどね！

さておき、スーパー肩パッドが何回かに分けてhtml・css・JavaScriptコーディングのワークフローをエントリしちゃいます。まずは設計篇。

めっさ大事な最初の設計

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

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

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

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

これもめちゃめちゃ大事です。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内の見出しを絶対配置！なんもこわくないです。思い出したら使ってみてください。

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

こんなに偉そうに言ってる僕ですが、print対応をほぼしていなかったり細かいミスはいっぱいあったりと、なんやかんやあります。これが俗に言う恥じらいですね。

さて、長くなったので次回に持ち越しましょう。またね！