はてなブックマーク

特定のタブが開いている状態でリンクをさせたい時は無いでしょうか？例えば3番目のタブがアクティブになっている状態に...などです。 4回に渡ってタブプラグインを改修していきましたが、今回はURLにパラメータを付けて特定のタブが開いた状態へリンクを貼れるように改修いたしました。（正確には書いてもらった...） 詳しい解説は今回は省きますが、内容はURLに付いたパラメータを解析するメソッドを用意し、パラメータに応じて開くタブを制御しています。タブ数は4つまで対応するようになっています。 使い方 オプションで用意しているプロパティは以下の通り targetID 初期値 #tab タブメニューと表示・非表示するブロックを梱包するdivのID名を指定 tabElement 初期値 .tab-list li タブメニューを指定 boxElement 初期値 .tab-box 表示・非表示するdivのクラ

jQueryを使ったカルーセルプラグインはたくさんあるのであまり困る事は無いと思いますが、試しに自分で作ってみたので2回に分けてカルーセルの作り方を記事にします。 1回目は指定した秒数ごとに画像がスライドする無限ループのカルーセルを作ります。2回目は無限ループに加え、ボタンを画像分用意し、クリックするとボタンに対応した画像が表示されると言ったものに改造して行きます。（余裕があれば3回の記事にし、プラグイン化しようと思います。） プログラムの流れは下記のような流れに従って作ります。 画像の数や幅などの初期設定を行う。 画像が左にスライドするアニメーションを作る。 このアニメーションをメソッド化する。 指定した秒数でこのメソッドを実行させる。 まずデモで完成形をご覧ください。 View Demo それではコードを解説して行きます。 HTML HTMLは下記のようなソースコードになります。 HT

jQueryを使ったタブメニューの第4回目です。（しつこい） 前回はjQuery Cookie プラグインを使ってタブの表示状態を保持するように改修しました。 今回は最初に表示されるタブを選択出来るように改修します。 今回のコードの完成形です。 jQuery Code (function($) { $.fn.tabs = function(options) { var o = $.extend({ targetID: '#tab', tabElement: '.tab-list li', boxElement: '.tab-box', defaultOpenTab: 0 }, options); $(o.tabElement, o.targetID).each(function() { var selectedTab = $.cookie(o.targetID + 'selectedTab

以前エントリーした記事、IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示から早くも3年近く経っている事にびっくりしました。ブラウザに関する事情は大きく変わってIEの最新版は9で現役のIEは6〜9（IE6を排除するサイトもだいぶ増えましたが）加えてChromeのシェア上昇、Safariは5に、Firefoxに至っては12！でブラウザが乱立する状態になっています。 これだけブラウザの進化が早いと出来る限りハックは使わず...と言うのが安全策だと思います。 どうしても使う場合は極力シンプルに！と言う事で以前はセレクタハックを使っていたのですが、プロパティに記述するハックに切り替えてます。 ※基本bodyに指定するフォント関連でのみ使用し、他の場所では極力ハックは使わないようにしています。決してハックを推奨する記事ではありません。 CSS C

January 9, 2012 前回はjQueryを使ってタブメニューのインターフェイスを作成しましたが、汎用的に利用するにはプラグイン化すると便利です。プラグイン化するとプラグインを呼び出す際のオプションを設定出来るので、liやdivのクラス名を変更した際にも対応出来ます。 今回は前回のコードを参考にプラグイン化して行きます。 前回のjQueryコードは次のようなコードになります。 jQuery Code $(function(){ var box = $('.tab-box'); var tabList = $('.tab-list').find('li'); box.not(':first').hide(); tabList.eq(0).addClass('selected'); tabList.click(function(){ var tabIndex = tabList.ind

September 24, 2011 n個のバナー画像の中から任意の2個のバナーを表示させるjQueryプラグインを考えてみました。 仕様としては、HTML上には全てのバナーを非表示で記述し、任意の2個を表示、バナーを追加しても対応出来る（3個でも4個でも10個でも任意の2個のバナーを表示）と言う仕様です。 キーとなるのは２つの重複しない乱数を求める所です。まず最初に考えたのは2つの乱数を発生させ、それらが重複しなくなるまでループする方法です。 まず変数elemにul#rndBnrの子要素であるliの数を代入します。 var elem = $(this).children().length; 次に変数rnd1とrnd2に子要素の数からランダムにそれぞれ1つの数字を取得して代入します。 var elem = $(this).children().length; var rnd1 = Math

March 22, 2011 Dreamweaverテンプレートで個人的に良く使うテンプレートコードをスニペットにしてみました。 Dreamweaverテンプレートはソースコードがコメントだらけになるので嫌う人が多いかもしれませんが、小規模サイトでCMSを入れるほどでも無いサイトを制作する場合にかなり有効だと思いますので、是非利用してみてください。 編集可能領域 編集可能領域を追加。[挿入]→[テンプレートオブジェクト]→[編集可能領域]と同じ。 <!-- TemplateBeginEditable name="EditRegion1" -->編集可能領域<!-- TemplateEndEditable --> bodyのClass名、ID名の入力 [修正]→[テンプレートプロパティ]からbodyに付加するclassとIDを入力出来るようにする。 head内 <!-- TemplatePa

February 13, 2011 TwitterやFacebookを初めとして各種ソーシャルサービス（SNS）が公式でコンテンツをシェアする手段を公開しています。自分のブログにこれらのシェアボタンを利用している人は多いと思いますが、TwitterやFacebookなどは公式のソースを利用するとボタン画像が公式のものになってしまいます。今回はオリジナルシェアボタン画像を使いたい場合に利用出来るスクリプトをjQueryのプラグインとして用意しました。 対応SNS/SBS：Twitter, Facebook, はてなブックマーク, Yahoo!ブックマーク, Googleブックマーク, Livedoorブックマーク, Del.icio.us, Evernote また、ブログの場合は大体がURLやtitleはそれぞれテンプレートタグが用意されていると思います。（例：MTならばmt:EntryPe

December 30, 2010 Dreamweaverはコードビューでコードを記述していると、最初の数文字で入力されるプロパティを予測してツールチップに表示してくれる便利な機能があります。 プロパティに対して値を入力する際に、そのプロパティに対して設定出来る値も一覧表示してくれるので、コーディング時にはこの機能は重宝します。 このコードヒントの機能ですが、configuration/CodeHints/CodeHints.xmlをカスタマイズすることで通常表示されない値を追加することが出来ます。 ※カスタマイズは自己責任でお願いします。 私の場合、ベースになるfont-sizeを13px相当に設定して13px基準に各フォントサイズをパーセント表記する事が多いので、13pxに対して10~26px相当で表示させる値を追加しています。 まずは13px相当に表示させるためにbase.cssのフ

December 15, 2010 商品リストなんかを掲載する場合、ボックスを3カラム/4カラムにレイアウトするケースが多々あると思います。今は3商品しか掲載しないけれど、そのうち4、5、6...と増えていってもレイアウトを維持するためには少々工夫する必要があると思います。 当然のごとくボックス間にはマージンが存在していて、カラムの最後のボックスのマージンが邪魔...とは言えマージンを0にしたクラスを付加するのもメンテナンス性が落ちるため出来れば避けたい。 ul/li要素でマークアップしてpositionを利用する方法やネガティブマージンを利用する方法があると思います。今回はul/li要素を利用せずにシンプルにdivのみを利用した方法を紹介します。マークアップは次の通り。 <div class="item-box pkg"> <h2>Items Box</h2> <div> <div cl

November 22, 2010 11月20日、MONSTERAさん主催のiPhone/Android Webサイト制作セミナーに参加しました。講師はCSS niteやUSTREAM等でご存知のH20 Spaceのたにぐちまことさん。 内容はと言いますとiPhone、Androidのスマートフォンサイト制作を行う基礎知識からアプリ制作時の注意点までのほぼ全般を網羅。どちらかと言うと制作者向けと言うよりも、制作を企画するにあたってどのような事を考えていかなければならないかを知ると行ったニュアンスが強い内容でした。まだiPhone/Androidのスマートフォンサイト制作を行った事のないディレクターさんなんかにはもってこいの内容だったと思います。 今回参加して重要だなと思ったことを羅列していきます。 Section1 iPhone、Androidサイト制作の基礎知識 現在のスマートフォンのシ

August 23, 2010 (X)HTMLのコードの可読性を高めるために、divの閉じタグ手前にいつもコメントを入れています。けれどもこれが結構面倒な作業で、自動にならないかなと思っていたら面白法人カヤックさんのKAYAC DESIGNER'S BLOGでDreamweaver用拡張機能として公開されていました。 コメントを生成して挿入するDreamweaver用拡張機能を作成しました ただこの閉じタグのコメント、コーダーによっては様々な書き方があると思います。初期では<!-- / ClassName -->になっているのですが、HTMLファイルに記述されたJavaScriptコードをちょこっと変更することでカスタマイズ出来ます。 ※カスタマイズは自己責任でお願いします。 カスタマイズするHTMLファイルの場所(Dreamweaver CS3の場合) MacOS Macintosh H

July 21, 2010 Google Analyticsの自分で良く使うコードをメモしておきます。（非同期トラッキングコード） 通常のトラッキングコード var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s

April 27, 2010 過去に2回ほどCSSでdlのdt ddを横並びにする記事をこのブログにポストしました。 定義リストdt ddを横並びで表示させる 再び定義リストdt ddを横並びで表示させる 過去の記事は2つともfloatを利用しましたが、ネガティブマージンを使った方がCSSコードもシンプルになるのでおススメです。 まずdl要素のline-heightプロパティで行の高さを指定します。dd要素のmargin-topプロパティにdl要素で指定したline-heightプロパティと同じ値のネガティブマージンを与えればOKです。 dl { line-height: 1.5; } dd { margin: 0 0 1.5em 0; padding-left: 9em; } dt + dd { margin-top: -1.5em; } dtに対してddが一つならば一番下のdt+dd

April 11, 2010 以前に書いた記事、Dreamweaverでショートカットキーを設定して作業効率を上げるで『ショートカットキーのエクスポートの仕方がどうしてもわからない』と書きましたが、設定ファイルが分かりました。 Dreamweaver CS3の場合ですが、CS4でも同じような場所にあると思いますので参考に探してみてください。 Windowsの場合 C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver 9\Configuration\Menus\Custom Sets\セット名.xml Macintoshの場合 ホームフォルダ/ライブラリ/Application Support/Adobe/Dreamweaver 9/Configuration/Menus/Custom Sets/セット名.xml

January 11, 2010 普段コーディングをするときはDreamweaverを利用しています。 主にコードビューで作業をすることが多いのですが、デザインビューや分割ビューに素早く切り替えられるようにショートカットを設定しています。また、作業効率を上げるために良く入力するタグはショートカットキーを設定しています。(Dreamweaver初期で設定されているショートカットキーも含まれていますが） その一例を紹介します。 表示の切り替え Option + Shift + 1 = デザインビュー Option + Shift + 2 = コードビュー Option + Shift + 3 = 分割ビュー タグ Option + Command + l = dl Option + Command + t = dt Option + Command + d = dd Option + Comm

January 9, 2010 ThickBoxはLightBox系のjQueryプラグインとしては最も良く使われる部類に入るのではないでしょうか？ ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リテラシーの低い人は一瞬どこをクリックして閉じるのか分からない事もあるかもしれません。そこでHTML側にウィンドウを閉じるボタンを付けてみることにします。 通常ThickBoxはtb_remove()と言うメソッドを呼び出してウィンドウを閉じます。ただ読み込まれたHTMLファイルの閉じるボタンのclickイベントにtb_remove()を設定したとしてもイベントは実行されません。これは読み込む側と読み込まれる側に親子の関係があるからです。 そこで

December 26, 2009 Firefox3.6のベータ版でCSS3のグラデーションが使えるようになりました。グラデーションには線形と円形がありますが、今回は線形のみを試して見ることにしました。 書式ですが、長くなりますがプロパティを一つ一つ追加して説明していくことにします。 線形グラデーションはlinearで指定します。Safari/Google Chrome用（以下webkit）は-webkit、Firefox3.6用（以下mozilla）は-mozとお決まりの書式になります。 background: -moz-linear-gradient(); background: -webkit-gradient(linear); グラデーションの開始位置と終了位置を追加します。上から下へのグラデーションの場合は次のような記述になります。webkitは2点を指定しますが、mozilla

October 21, 2009 当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。 なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。 Windows IE6 Windows IE7 Windows IE8 Windows Firefox2 Windows Firefox3 Windows Firefox3.5 Windows Google Chrome3 Windows Opera9.6 Windows Safari4 Macintosh Safari4 Macintosh Firefox2 Macintosh Firefox3 Macintosh Firefox3.5 結果

October 1, 2009 これもいつも忘れるのでメモ $('#hoge').css({'display' : 'block', 'margin-bottom' : '0.5em'}); プロパティと値は:(コロン)で区切り、プロパティとプロパティは,(カンマ)で区切る。プロパティ同士は{}(ブレス)で囲む。

E > F 子セレクタ(CSS2) 直接の子要素にのみ適用。孫要素は非適用。 E + F 隣接セレクタ(CSS2) 親要素内で同列に存在する要素（兄弟関係の要素）で直後(隣接)に出現する弟要素に適用。 E ~ F 間接セレクタ(CSS3) 隣接セレクタでは直後に出現する弟要素のみに適用されるのに対し、間接セレクタは全ての弟要素に適用。 E[attr] 属性セレクタ(CSS2) 要素内で指定した属性を持つ要素に対して適用。 ex. div[id] { ... } id属性を持つdiv要素に適用される。 E[attr=val] 属性セレクタ(CSS2) 要素内で指定した属性と値が一致した要素に対して適用。 ex. div[id="foo"] { ... } id属性の値がfooのdiv要素に適用される。 E[attr~=val] 属性セレクタ(CSS2) 要素内で指定した属性に指定した値が含ま