新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
ウェブ制作・プログラマー・デザイナーのためのチートシート集 | コリス
Scott Klarrのエントリー「Cheat Sheet Index」から、ウェブ制作・プログラマー・デザイナーのためのチートシート集です。
[JS]jQueryのプラグイン33+1選 -2008年1月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jqzoom 画像の一部をズーム。 Shadowbox 複数のJavaScriptライブラリに対応したLightbox。 Faceb
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
ページをマトリックス風に表示するJavascript | S i M P L E * S i M P L E
これは新しい。 なんとあらゆるページをマトリックス風に表示してくれるのだ。（実際の動作はこちら） 実装するには以下の1行をコードに加えるだけ。 <script src="http://bodytag.org/bt_melter/bt_melter.js" type="text/javascript"></script> するとbodyタグの中身全部に適用される。 なお、javascript自体はbodytag.orgからダウンロードできる。 日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。
初心者のためのホームページ作り-Web for beginner ホームページ作成支援
Lecture for beginner ■ HTML基礎講座 HTML4.01の概略 / HTML制作の準備 WEBとHTML / Webの作法 / HTMLの作成 論理構造 / 要素の親子関係 / ヘッダ情報 見出し / 段落 / リンク / フォント ボックスの概念 / 色の作法 / 画像の扱い リストの作成 / テーブルの作成 / 配置 フレーム / フォーム / 動画コンテンツ イメージマップ / スタイルシートの概念 Webページのタブー ■ HTML応用編 HTML4.01 / ヘッダ情報 / CSS応用 テキスト / アンカー / 文字実体参照 色の基礎知識 / FTPファイル転送 枠線表示の応用 / アクセシビリティ Lecture for senior ■ 初めてのXHTML講座 XHTML基礎講座 / XHTML概要 / XHTML基本 XHTML DTD / HTM
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」:phpspot開発日誌
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」 2007年08月07日- Scrollovers - A New Way of Linking Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expectin g. リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」。 例えば、次のアンカーにカーソルを合わせて みてください。 [YOUR TEXT HERE] Scrollovers を使えば、こんなリンクの貼り方が出来ます。 普通のリンクより 分かりやすいだけでなく、訪問者に驚きを与えることが出来ますね
CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル
A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト：パターンとライブラリで作るAjaxおいしいレシピ（4）（1/4 ページ） script.aculo.usの一歩進んだテクニック 今回紹介するscript.aculo.usは、以下のような機能を提供するAjax（JavaScript）フレームワークです。 ビジュアルエフェクト ドラッグ＆ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。 ■ Ajaxの弱点を補う「エフェクト」の必要性 Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更し
Latest > Flakes of Ideas > JavaScriptでDOMを使う――オブジェクト指向入門の入門 - outsider reflex
2003/9/3 2003/9/4 2003/9/5 2003/9/6 はじめに オブジェクトとプロパティ 連想配列 オブジェクトと連想配列 「クラス」というテンプレート オブジェクトとメソッド 特定の型専用の関数 「メソッド」というプロパティ クラスとメソッド 「オブジェクト指向」の簡単なまとめ DOMとオブジェクト指向 「DOM」とは何か？ インターフェースとクラス DOM操作の実例 簡単な処理の例 もっと複雑な処理の例 おわりに Cが分かる人には疑りぶかいあなたのためのオブジェクト指向再入門というページがお勧めです。僕の稚拙な説明よりずっと分かりやすいです。 Home Back to Flakes Prev. Next はじめに JavaScriptでDOMを使う。DOMはHTMLやXMLをスクリプトやプログラムで操作するのにとても便利な技術ですが、簡単なスクリプトくらい書けるからD
テーブルをソートできるようにするjsライブラリ-table sorting
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
JavaScriptでHTMLをダイナミックに書き換える 前編
もともとは存在しなかったタグ要素を新たに追加したり、変更、削除するテクニックを学ぶ。こうした処理ができるのはDOMならではの魅力だ。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。 DOMスクリプティングでは、HTMLをJavaScriptから自由自在に書き換えられる点が大きな魅力です。これまで、HTMLに存在する要素の参照方法や属性の扱い方を学んできましたが、
JavaScriptでの画像プレビュー自由自在「PopBox」:phpspot開発日誌
PopBox! - Javascript Image Magnification PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page.JavaScriptでの画像プレビュー自由自在「PopBox」。 ページ内の画像をクリックするとページ内でそのまま、アニメーションしながら拡大。 PopBoxを使えば、そんな効果を実装することが可能です。 拡大だけではなく、比率の変更や、画像の移動、画像の縮小を行うことも出来ます。 凄く軽くて使いやすいです。もう、別ページで画像を拡大させるのは古い、と言われてしまうのかもしれませんね。
指定したHTMLエレメントをローディング中にする際に便利な「busy.js」:phpspot開発日誌
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryサンプル集 | DesignWalker
CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS） - youmos
『10のJavaScript、Axaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
JavaScript++かも日記/Ajax,Google Maps,etc...
Welcome to Tablecloth テーブルのマウスオーバーを色変更