昨日、sugamo.css にて、HTMLテンプレートの組み方のような話をしました。内容は、先日書いたエントリ、自分的HTMLテンプレートの組み方 の内容＋αで、どーしていまこーやって書くようになったのかとか言う話や、OOCSS の紹介などです。 そのうちまたまとめてサイトでも作って書きたいのですが、ひとまず発表に使ったスライドを置いておきます。 mod組み（仮） [Power Point]

製品版Movable Typeのライセンスのページには、 あなたは、本Softwareによって生成された各サイトにおいてSix Apart の製品紹介サイトへ「Powered by Movable Type」のテキスト表示でリンクを張らなければなりません。 とあるが、MTOSの場合はどうなんだろうかと思い、英語サイトを含め探したのだけれど、どこにも書いていなかったので、Six Apart社に問い合わせてみた。 答えとしては、「MTOSの場合は特にリンクなどをしていただく必要はございません」とのことで、MTOSの場合は、「Powered by Movable Type」は入れなくていいらしい。

自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を

今回は、画像のロールオーバーを、今まで説明してきたように、クラスを使いながら作ってみます。リンクにマウスオーバー（及びフォーカス）されると、中にある画像のsrcの "_normal." を、 "_over." に変更してセットし、マウスアウト（及びブラー）されると、これと逆のことをします。 サンプルとソース サンプルその1 <ul> <li><a class="rollover" href="http://diablo.com"><img src="diablo_normal.gif" alt="Diablo" /></a></li> <li><a class="rollover" href="http://hoge.com"><img src="hoge_normal.gif" alt="HOGE" /></a></li> <li><a class="rollover" href="ht

Movable Typeを組み込むとき、いままで、Windows上にxamppを入れて開発してたんですが、色々厄介なことがあります。それは、大体のサーバーは、Linuxであるということ。windowsだと、パスが\で区切られるのに対し、Linuxは、/です。また、CGIの1行目にある、#!/usr/bin/perlも、windowsだとこのままだと動かないので、どうにかしないとなりません。このため、色々設定しても、サーバーにアップロードした後は、もう、2度とローカルでテストできなくなってしまいます。 そこで、VMwareってのを入れ、ローカルに仮想Linuxマシンを立ち上げて、そこで作業してみたところ、かなり開発が快適になりました。実際にファイルを配置するパスを、レンタルサーバーと完全に合わせて、ローカルの仮想マシン上でテストしながら開発することで、サーバーにアップした後に変更が起こっても

自分なんぞがオブジェクト指向とはなんぞと語るなんておこがましく、「オブジェクトっぽい話」でいいかなーと思っていたのですが、ブックマークするときに「オブジェクト」でタグ付けてる人がいたので、これはいかんと思い、こっそりタイトルを直しました。 2回目の今回は、複数のインスタンスをまとめて操作する方法について書きます。 まんじゅうマネージャー 前回、クラス作ってインスタンスを作ると便利だというところで終わりましたが、便利な点としてはまず、「複数のインスタンスをまとめて操作したり、作ったりできることができる」という点があります。どういうことかというと、とりあえず、以下のサンプルを見てみてください。 まんじゅうマネージャーサンプル まんじゅうを一気に作ったり、隠したりすることができます。 これで賞味期限が切れたりしても大丈夫なはずです。 この機能を作れと言われたら、前回の知識だけは結構厳しいのではな

前エントリがすごいブックマークされている… 時間を見て続きを書きますのでよろしくお願いします。 jQueryで、 $("body")==$("body") // false のような感じで、HTMLの要素をラップしたものを比較しようとすると、falseが出るのはなぜなんだろう。ループさせて保存してたやつと比較するときにアラ？これ一致しないの？だって同じでしょ？と思ってのだけれど、なんでダメなのか分かった。 Mozilla developer center - Comparison Operators によると、”Two objects are strictly equal if they refer to the same Object.”とのことで、オブジェクト同士を比較するときは、同じものを参照していないとtrueにならないとのこと。最初の $("body") と、2番目の $("b

自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ！とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ！ var hoge = hage ? huga : hoga; とか書けちゃうんだぜ！とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa

最近MovableTypeをいじっているのですが、ローカルで確認できるように、Vistaにxampp+ActivePerlをインストールしてやってました。画像の縮小に使うImageMagickもインストールして。ところが、エントリを書く画面にて画像のアップロードウィンドウを開くと、Perl Command Line Interpeterがフリーズしてしまいます。色々探し回ったのですが、はっきりしたことは分からず、結局、自分は古いバージョンのActive Perlをインストールことで解決しました。 よく見たら、ImageMagickのインストーラにて、「Install PerlMagick for ActiveState Perl v5.8.0 build 804」というチェックがついていたので、このバージョンのActivePerlを落としてきて入れたら、やっとこさうまくいきました。使ったイ

ツールチップのJavaScriptを書きました。jQuery使用です。 zudolab jqTooltip 今まで、ツールチップは jQuery tooltip plugin を使っていたんですが、もっと中身のHTMLいじりたいとか、幅計算でもうちょっとこういうのが欲しいんだよなーっていうのを機能追加している感じです。カスタマイズしやすいようにと思って作ってます。 基本的な機能は、title属性に指定したテキストをツールチップとして出すってことなんですが、幅がautoだと、ビロビロ横に広がってしまったり、でも幅固定にしたいわけじゃなかったりする場合に便利なmaxWidth指定、ツールチップが画面がいに出てしまう時、画面内に入れるよう位置調整する機能、ツールチップ内のHTMLを好きなように変更できる機能などなどが便利かも。 かなり時間かかりましたわこれ作るのに・・・

前エントリ、コーダーが気にしちゃうことバトンですが、色んな方に答えていただいており、とても嬉しいです。書いて下さった皆様ありがとうございます。 自分(Takazudo) ヨモツネット（バトン作る前に答えていただきました） TRANS[hatena] blog::konk303 Hato-Style Kangaroonote アヨハタブログ mersy's lab Archiva labs.yusukenakanishi.com blog.wonder-boys.net [double-team.org] in Hatena.Inc 最近、いろんな人と会って、みんな、かなり違う環境で仕事してるなぁというのをよく思います。規模だったり、仕事の流れなんかも違ったり、各人がコーディングやってるだけではなかったりなどなど。なんかまぁ、当たり前なんですけど、みんなそれぞれ思うことがあっていろんな書き方

前回のエントリをバトンにしない？と言われたので、答えられそうな話題にしぼってバトンってことにしてみました。 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？ CSSやJavaScriptの圧縮をしていますか？ コーディングにかける時間はどのくらいでしょうか？ あなたのコーディングのこだわりはコレ！みたいなものがあれば。 「コーディン

inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を

classでとってくるより、idでとってきた方が速いに決まってるけどどのくらい？と思ったのでちょっとテスト。100kbぐらいあるHTMLファイルの中から、要素を取得するスピードを計ってみる。jQueryのselector使って。 以下はjQuery1.2.6で、各要素を100回とってきたときの、Firefox3でのスピード。 ベンチマークに使ったHTMLファイル $("#ID")

PHP/CSS書いてて、最近思ったことと、自分CSSデザインパターン解説。class名のつけ方の続き的内容。 オブジェクト指向を勉強してるとこ 最近、XSLTでCMS作る！って思っていろいろPHP書いてます。それで、すっごいclassが増えまくってしまって、継承とかいうものがある！ということで使ってみたら、すっきり。ほほーこれは便利だ！と思いきや、またしてもごちゃごちゃ。どこをどうしたらいいのやら。どーしたもんかと思ってネットをうろうろ見てたら、どうやら、デザインパターンってのを覚えた方がよさそうだということに気づき、この本を買いました。 これがすごい良かったです。継承とかinterfaceとか、こういうためにあったんだ！というのを学びました。すべてをまだ理解できてないけど、大きいものには大きいものの作り方があるんだ！と。結果総作りなおしｗｗｗ CSSのデザインパターン？ そんでCSSの話

最近JavaScriptを書いていて、jQueryのslideToggleよく使います。slideToggleってのは、こーいうやつです。 クリックでslideToggle発動 ⊂二二二（ ＾ω＾）二⊃ ﾌﾞｰﾝ JavasScriptが重すぎる 一瞬でパッパッと切り替わるところで、slideToggleを使うと、見た目がすごいいんですよね。ユーザーにもどこがかわったのか分かりやすいし。animateも同じです。しかし、ページ内の要素がふえたり、どんどん複雑になってくると、これが、IE6/7でカクカクになってしまうのです。これだと逆に見た目が悪いので、ブラウザ分岐して、slideToggleのところはIE6/7だけ、一瞬で切り替わるようにしてしまいます。してしまいますというか、否応なくなんですが、これがまた悔しい感じになっております。MOSeっていうやつですね。animate, fade

以下のような指定をすると、 body{ font-size:80%; line-height:1.4; } ページの中の要素が全て少し小さめの、font-size:80%で表示される。しかし、DOCTYPEの指定が互換モードだったり、どうやっても標準モードになってしまうIE5, IE5.5では、下のように、table内の文字は、ブラウザのデフォルト値の通り、でかいままになる。 これを防ぐためには、font-size:inheritを指定すれば、親のfont-sizeが継承されそうだが、IE6ではinheritは（たぶん）未対応なため、inheritを指定しても文字はでかいまま。しかし、以下のような指定をすれば、回避できる。 table{ font-size:1em; } tableにfont-size:1emを指定することで、親のfont-sizeと同じ大きさになる。これでtableの中も

このブログのアクセス解析を見ると、キーワード「firefox 印刷」で検索してこのエントリに飛んでくる人がかなりいます。やっぱりみんな困っているんだなぁと。Firefoxの印刷はかなりやっかいで、完全FIXは無理かもしれないという結論に自分の中でも解決していたのですが、最近この方法をやっていて、普通に印刷できてます。 display:tableで印刷対応 まずは、普通にfloat:left left leftで左に詰めたレイアウト。 floatによる3カラムレイアウトのサンプル（印刷対応無） <div id="all"> <div id="header">header</div> <div id="body"> <div id="localNav">localNav</div> <div id="main">main</div> <div id="relatedNav">relatedNa

新人研修コーディングについての資料作らねばーーー… HTMLコーダーとは何をする人？ (X)HTML, CSS, Javascriptを中心とした、 Webサイトの表側の技術を担う人です。 サイト設計　→　デザイン　→　コーディング　→　システム開発 具体的には… コードを書いて、ページを作っていったり…((X)HTML+CSS) 仕掛けをのっけて、分かりやすいインターフェイスを作ります。(Javascript) (X)HTMLって何？ (X)HTMLとは、ページの文書構造を表す言語です。 ページの内容を把握し、適切なマークアップ※を行います。 ※(X)HTMLタグを書いてページを作っていくこと CSSって何？ CSSとは、(X)HTMLのタグに、見栄えの要素を加える言語です。 具体的には、この要素の下に線を引く、後ろに画像を敷く、 文字サイズを指定する、右側に配置するなどとい