Home > css

css Archive

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

「とりあえず」とか「それなりに」とか「そのうち」クオリティの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とか。

  • Comments (Close): 0
  • Trackbacks (Close): 0

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

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

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

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

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

  • Comments (Close): 0
  • Trackbacks (Close): 0

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

自前の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が原因でハゲることはあるのか

答え

あります。

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

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

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

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

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

  • Comments (Close): 0
  • Trackbacks (Close): 0

プレゼン資料を半公開

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

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

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

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

  • ブラウザのcssを消すやつ
  • table回りの解説
  • Comments (Close): 0
  • Trackbacks (Close): 0

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

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

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

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

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

その他、肩パッド情報

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

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

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

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

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

テンプレート変数の定義

以下を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でいくつものバリエーションを作ることができます。

  • Comments (Close): 0
  • Trackbacks (Close): 0

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

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

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

めっさ大事な最初の設計

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

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

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

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

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

  • Comments (Close): 0
  • Trackbacks (Close): 0

[JavaScriptとcssを簡単にするためのjQuery] 2ndDay ストライプテーブル

2日目はストライプテーブルとtrのマウスオーバーイベントを設定する章です。

Table Striping Made Easy

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

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

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

$("table.stripe tr:even").addClass("even");

偶数、奇数を設定する擬似クラスっぽいものに:odd, :evenがあります。書き方はcssを編集する感覚でオッケー!!そこにaddClass("even")などを設定することで奇数または偶数の要素にクラスを追加設定できます。

今回のストライプテーブルの設定は以下です。

  1. ストライプテーブルにするtableにclass stripeを設定します。
  2. $("table.stripe tr:even").addClass("even");
  3. 偶数行 trに以下のcssを設定します。
    / *  stripe
    -----------------------------------*/
    table.stripe tr.even td {
    background-color: #f3f3f3;
    }

これで偶数行のみ背景色を変更できます。

trのhover時に背景色を変更

trにマウスオーバーしたときにハイライト表示する設定をします

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

本来なら、jqueryのhoverメソッドを用いればいいのですが、今回のエッセンスはそうではありません。mouseoverとmouseoutの二つのメソッドを同時に指定できるところにあります(たぶん!)。

実際にはマウスオーバーイベントよりhoverの方がよさげなので、僕は以下のように設定しました。

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

メソッドの引数は

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

と、このようになります

  • Comments (Close): 0
  • Trackbacks (Close): 0

ホーム > css


Search
Feeds
Meta

Return to page top