オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その1 | Takazudo Clipping*
自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ！とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ！ var hoge = hage ? huga : hoga; とか書けちゃうんだぜ！とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その3 | Takazudo Clipping*
今回は、画像のロールオーバーを、今まで説明してきたように、クラスを使いながら作ってみます。リンクにマウスオーバー（及びフォーカス）されると、中にある画像の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
inline-blockはもう使える（だいたい） | Takazudo Clipping*
inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を
100%安全なCSS Hack for IE | Takazudo Clipping*
世の中には腐るほどCSS Hackがあります。いずれも、ブラウザのバグを逆手にとったものであり、今後出るブラウザでは影響が無いだろうと言われるものが頻繁に使われますが、それらが100%安全とは言い切れません。それらに対し、これは完全にクリーンで安全なCSS Hack。IE8以上がでたらあああああ！このスタイルはIE6だけに適用されるはずなのに！！！何てことはありえない安全なCSS Hack。こんな感じです。 <body> <!--[if IE]><div id="IEroot"><![endif]--> <p>bodyの本来の中身。IEだけ赤くなる</p> <!--[if IE]></div><![endif]--> </body> #IEroot p{ background:red; } こんな感じでbody直下にdiv#IErootを、Internet Explorerの条件分岐コメン
alt属性はいかに決定されるべきか | Takazudo Clipping*
画像を閲覧できないユーザーでも内容を把握できるようにalt属性をつけましょうとは言うが、実際にはどのようにつけたらよいのかが実はかなりわからない。さらに納品前になんじゃこのalt！と突っ込まれる・・・。色々話し合ったりググったりした末にでた自分結論はこんなの。 前提 画像OFFのユーザー・音声ブラウザのユーザーが、画像の代わりにそのaltテキストが表示されても、ページ内容が分かる。但し、100%の情報を伝える必要があるわけでもない。そこに何の画像があるのかが伝わり、ページ内容を把握できる。 画像の中に文字がある場合
パイプ区切りナビゲーションバーをネガティブマージンで | Takazudo Clipping*
パイプ区切りのテキストナビゲーションバーが、単純な構造でできた。これなら2行目以降の左や右端に無駄パイプが残らなくてよさげ。 サンプルHTML <div> <ul> <li>HTML</li> <li>Blog</li> <li>XHTML</li> <li>CSS</li> <li>Seminar</li> <li>Usablity</li> </ul> </div> div{ overflow:hidden; _height:0; /* holly hack for ie6 */ min-height:0; /* fix has layout bug for ie7 */ } ul{ margin:0 0 0 -11px; _height:0; /* clear float for ie6 */ min-height:0; /* clear float for ie7 */ } ul:
tinyscrolling解析 | Takazudo Clipping*
ライブラリとかのjavascriptよーく見たら勉強になりそうだなーと思って、自分の好きな、tinyscrollingというjavascriptの中身を見てみました。 tinyscrollingというのは、するするーとスムーズにスクロールするjavascriptです。一応、このブログでも、似たようなものを使っています。ページの下方法にある、「ページの先頭へ」を押すと、するーっと上に行きます。tinyscrollingを単純に読み込んでみたサンプルはこちら。 tinyscrollingを読み込んだHTMLサンプル 中身を一個一個見ていったら、かなり勉強になったなぁ。丸一日かかったけど…。 間違ってる所あるかもしれないけども（特に言葉の使い方が）、ソース解説します。 解説用にTakazudoがコメント書き込みまくったjavascriptはこちら。 このHTMLサンプルとjavascrip
設計者とデザイナーとコーダーと高品質なサイト | Takazudo Clipping*
最近、会社の中で、サイト制作の際、デザイン・HTMLに行くまでにどういう資料を作ればいいんだろうプロジェクトみたいのをやっておりまして、はじめは、ページの構成、こー言う風に考えていますという、ページの内容を説明する資料のフォーマットを考えていたんですが、どうにもそこだけでは足りないような感じに思えてきて、どうしたもんかなーと思って色々見ていたところ、インフォメーションアーキテクチャってのが、まさにその答えでした。今まで制作の中で悶々としていたことが、かなーりすっきり理解できた。誰がいつ何をしないといけないのかが。 なんとなくうだうだ情報設計みたいな話 インフォメーションアーキテクチャについての細かい説明は、勉強中なのでこのエントリ内では詳しく書きませんが、サイト制作には、大まかに、次のようなフローがある。一応ここでは、サーバーサイド技術を含まない、コーポレートサイトみたいなものだと仮定して
(X)HTMLコーダーの仕事とは | Takazudo Clipping*
新人研修コーディングについての資料作らねばーーー… HTMLコーダーとは何をする人？ (X)HTML, CSS, Javascriptを中心とした、 Webサイトの表側の技術を担う人です。 サイト設計 → デザイン → コーディング → システム開発 具体的には… コードを書いて、ページを作っていったり…((X)HTML+CSS) 仕掛けをのっけて、分かりやすいインターフェイスを作ります。(Javascript) (X)HTMLって何？ (X)HTMLとは、ページの文書構造を表す言語です。 ページの内容を把握し、適切なマークアップ※を行います。 ※(X)HTMLタグを書いてページを作っていくこと CSSって何？ CSSとは、(X)HTMLのタグに、見栄えの要素を加える言語です。 具体的には、この要素の下に線を引く、後ろに画像を敷く、 文字サイズを指定する、右側に配置するなどとい
サイトタイプ別class名管理方法 | Takazudo Clipping*
PHP/CSS書いてて、最近思ったことと、自分CSSデザインパターン解説。class名のつけ方の続き的内容。 オブジェクト指向を勉強してるとこ 最近、XSLTでCMS作る！って思っていろいろPHP書いてます。それで、すっごいclassが増えまくってしまって、継承とかいうものがある！ということで使ってみたら、すっきり。ほほーこれは便利だ！と思いきや、またしてもごちゃごちゃ。どこをどうしたらいいのやら。どーしたもんかと思ってネットをうろうろ見てたら、どうやら、デザインパターンってのを覚えた方がよさそうだということに気づき、この本を買いました。 これがすごい良かったです。継承とかinterfaceとか、こういうためにあったんだ！というのを学びました。すべてをまだ理解できてないけど、大きいものには大きいものの作り方があるんだ！と。結果総作りなおしｗｗｗ CSSのデザインパターン？ そんでCSSの話
XSLTを勉強してみる | Takazudo Clipping*
24シーズン6の最終3巻がレンタル開始されたのに全部借りられてたのでXSLTを勉強中。結構おもしろいー。section+hの真似風。（FirefoxでどばっとCtrl+Aでテキスト選択して右クリック→選択した部分のソースを表示 でXSLT適用後のソース表示） XML XSLT CSS XSLTが書ければ、自分モジュールでXML/XSLTのセット作って、いつも場合によってXSLTとCSSだけ書き換えて、必要が出たらモジュール足すってやりかたでどんどんライブラリ化していけるのかなと思った。 webmasterworld.com - XML and SEO.. XML+XSLTってSEOにどうなのよというスレッドで、 クローラはXMLがXSLTによって変換されたHTMLを読むわけではないから、どうなんだろダメっぽくない？とあるけど、おれはSEOの会社に勤めてるけど、パーサーかけるのは全然大変じゃ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
