So you’ve got a web page. You’ve marked it up with structural XHTML. You’ve also been a good little web developer and used style sheets to control what your document looks like. You’ve even gone the extra mile and created several alternative style sheets to show how hardcore you are. Great. But now you need a cross-browser way to dynamically switch between the style sheets. Styling your site#secti
アクセシビリティを考慮したWEBページを作成するときに役立つのがA List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsが紹介しているstyleswitcher.js。 アクセシビリティガイドラインにも「ガイドライン2. 色だけに依存しない」という項目があり、 2.1 色によって表現されている全ての情報は、その色を再現できない環境でも得られるようにしておく（たとえば、前後関係やタグ付けなどによって）。 [優先度1] (チェックポイント2.1) 2.2 前景色と背景色の組み合わせは、色の識別が困難な人やモノクロ画面を使用している人などに対しても十分なコントラストを与えるようなものにする。 [対画像：優先度2 、対テキスト：優先度3] (チェックポイント2.2)（引用：ウェブコンテンツ・アクセシ
【Adobe Spry TIPS 】タブパネル タブパネルはタブでコンテンツを切り替えるためのUIになります。 1月1日にリニューアルされるYahoo!JapanやLivedoorでも利用されている比較的メジャーなUIですね。 head要素内での設定 タブパネルの生成にはSpryTabbedPanels.jsを利用します。 <script type="text/javascript" src="./includes/SpryDOMUtils.js"></script> <script type="text/javascript" src="./widgets/tabbedpanels/SpryTabbedPanels.js"></script> widgetsディレクトリ内のabbedpanels内のSpryTabbedPanels.cssを読み込みます。 <link rel="style
HOME>WEBプログラム覚書>jQueryによる表示、非表示切り替え jQueryによる表示、非表示切り替え 今さらながらjQueryをお勉強。日本語のリファレンスも充分すぎるくらい充実してますんで、勉強しやすいですねよく使いそうなDivの表示、非表示切り替えをjQueryでやると・・・ jQueryによる表示、非表示サンプル
jQueryを使ってタブで切り替えるコンテンツを作りました。 1つのソースに全パターンを入れる形です。class名だけは変えちゃダメです。 タブを増やしたければ、liとTabAreaContentsをコピペして増やすのみです。 タブ切り替えjavascript <!-- TabAreaSet --> <div class="TabAreaSet"> <!-- TabMenu --> <ul class="TabAreaChgMenu"> <li class="On"><a href="#">TabNo1</a></li> <li><a href="#">TabNo2</a></li> <li><a href="#">TabNo3</a></li> </ul> <!-- end TabMenu --> <!-- TabContents --> <div class="TabAreaChg
たつをさんのCSS と JavaScript でタブ切り替えをprototype.jsを使って書き直しました。 極力、再利用が簡単になるようにしてみました。 ライセンスは本家の「無償・無保証・著作権放棄」に準じます。 ご自由にお使いください。 サンプルはこちらからダウンロードできます。 基本コードは以下のようになっています。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="tabMaker.js"></script> <link href="tabMaker.css" rel="stylesheet" type="text/css" /> <div id="tabContent"> <ul id="tabIndex"> <li class="tab
Control.Tabs : Projects : LivePipe Control.Tabs is a javascript library for creating accessible, flexible & unobtrusive tabbed interfaces in your applications or pages. クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」。 次のようなCSSベースのクールなタブＵＩを簡単に実現できます。 prototype.jsベースのライブラリとなっており、次のようなソースで動きます。 タブ部分のHTMLはulタグとdivタグを使っており、シンプルで分かりやすいですね。 <script> Event.observe(window,'load',function(){ $$('.tabs').each(fun
スタイルシートの切替 文字サイズ可変がユーザー側で自由にできるように、文字サイズは制作者が固定すべきではない。 ブラウザの設定で文字サイズを自由に可変できるのは大変有効的だと思うのだが、実際その機能に気づいているユーザーばかりではない。 最近サイトの中に「文字を大きくする」「文字を小さくする」等のボタンを配置し、Javascriptを利用してcssを切替て文字サイズの可変を可能にしているサイトも多いように感じる。 cssを差し替えるということだが、テキスト関連のcss指定だけ別ファイルにしておくのも１つの手だし、テキスト部分だけ文字サイズを変えて単一のcssファイルで管理する方法でも構わない。管理のしやすさを考えれば前者がおすめめである。 もちろんスタイルシートを切り替えるJavascriptなので、デザインごとごっそり変更する事も可能。使い方はお好みで。 問題のcssを切り替えるJava
会社のWebサイトに、CSSの切り替えをワンクリックで出来るようにするJavascriptを付けようと思いました。 調べてみるとstyleswitcher.jsというのが有名らしく、早速導入。 "styleswitcher.js"をダウンロードして自分のサーバーにアップロードし、ゴニョゴニョとやるだけで完了するとてもシンプルで簡単なものです。 解説はこちらのblogが良いです。 順調に進み、「さあ、動作確認だ」というときになって、アウト。 文字サイズを変更するCSSを用意していたのですが、ボタンをクリックしても文字サイズが変わりません。 おかしい･･･。 念のためにIE6とOpera 8.5で確認したところ、正常に動作するではないですか。Firefoxだけ動きません。 私のFirefoxの設定が悪いのかと思いましたが、上記の解説blogのやつを始め、他にも同じJavascriptを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
