タグ

cssとjavascriptに関するjunhirabayashiのブックマーク (13)

  • 5分で実装可能なページの文字サイズ変更+クッキーに保存サンプル:phpspot開発日誌

    A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更+クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg

    junhirabayashi
    junhirabayashi 2009/04/07
    5分で実装可能なページの文字サイズ変更+クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。
  • http://www.designwalker.com/2009/03/form-design-2.html

    http://www.designwalker.com/2009/03/form-design-2.html
    junhirabayashi
    junhirabayashi 2009/03/26
    お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。 今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。 JavaScriptやCSSを使えば結構いろいろなことができそ
  • [JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス

    Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。

    junhirabayashi
    junhirabayashi 2008/07/09
    Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
  • ユーザーが2~3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳

    ユーザーが2~3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳
    junhirabayashi
    junhirabayashi 2008/03/28
    変更できる内容として # 右、左のサイドメニューの有り無し # 横幅800px、1000px、100% # フォントサイズ 等が変更できます。
  • IE6以下をWeb標準に準拠させるライブラリ『IE7.js』

    IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c

    IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
    junhirabayashi
    junhirabayashi 2008/01/09
    多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。
  • footerをウィンドウ下部に固定する『footerFixed.js』

    footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です

    footerをウィンドウ下部に固定する『footerFixed.js』
    junhirabayashi
    junhirabayashi 2007/11/21
    footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示さすためのjsラブラリになります。
  • [JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider 1.1

    Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Coda-Slider 1.1 Coda-Slider 1.1 デモ Coda-SliderはjQueryのプラグインで、1.1の主な改良点は下記のようになっています。 jQuery 1.2への対応 IE6, 7でタブを早くクリックした場合のバグ スクリプトオフへの対応(<noscript>) YouTubeなどの動画のバグ preloaderの採用 タブと矢印以外にもスライドするリンクを設置可能 参考: スムーズに切り替わるタブ型コンテンツ -Coda-Slider

    junhirabayashi
    junhirabayashi 2007/10/31
    Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。
  • クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌

    Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi

    junhirabayashi
    junhirabayashi 2007/10/23
    クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。
  • https://10coin.com/memo/2007/09/04/102154

    junhirabayashi
    junhirabayashi 2007/10/12
    以前書いたフォントサイズを切り替えるJSの仕様を変更しつつ改良してみた。 * フォントサイズが変わる範囲をidにて指定 * フォントサイズの切り替えはonload時に行う * Yahoo! UI Fonts.
  • HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳

    » Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。

    HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
    junhirabayashi
    junhirabayashi 2007/10/12
    あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。
  • JavaScript でタブ切り替え UI を実装する | WWW WATCH

    先日、タブ切り換えタイプの UI を、JavaScriptCSS で簡単に実装する仕組みを探していて (他力願)、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScriptCSS で簡単に実装する仕組みを探していて (他力願)、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな~なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 : Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと

    JavaScript でタブ切り替え UI を実装する | WWW WATCH
    junhirabayashi
    junhirabayashi 2007/09/19
    先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて (他力本願)、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただき
  • ブロックレベル要素の高さを揃えるheightLine.js[to-R]

    ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

    ブロックレベル要素の高さを揃えるheightLine.js[to-R]
    junhirabayashi
    junhirabayashi 2007/07/26
    ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。このheightLine.jsは、複数のブロックレベル要
  • CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳

    CSSとJavaScriptで飾りつけする吹き出し風デザイン*ホームページを作る人のネタ帳
    junhirabayashi
    junhirabayashi 2007/07/22
    あくまでも静的デザインの噴出し。 浮き上がってくるアレではありません。 タイトルやコメント等、ちょっとした飾りに使ってみはいかがでしょうか?
  • 1