DEMO <html lang="ja"> <head> <title>Little Boxes Menu with jQuery</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print"> <style> *{ margin:0; padding:0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ",…</link></meta></head></html>
アコーディオン まずすべてを閉じる どれかひとつのセクションがクリックされたら クリックされたセクションを開く 開いていたセクションを閉じる DEMO <html lang="ja"> <head> <meta charset="utf-8"> <title>アコーディオンパネル：方丈記</title> <style type="text/css"> </meta></head></html>
可変グリッドレイアウト「no3design」 最小３列、最大５列に並ぶ可変グリッド + Lightbox jQuery Easing Plugin (version 1.3) Lightbox2 DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>no3design</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.lightbox-0.5.css"> </link></link></meta></head></html>
DEMO <html lang="ja"> <head> <title>Beautiful Background Image Navigation</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>横スライド mousewheel</title> <link rel="stylesheet" href="style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.mousewheel.min.js"></script> </head> <body> </body></html>
DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>jquery easySlider</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> </meta></head></html>
bizYou media ビルボードが六角形の可変グリッドレイアウト http://media.bizyou.jp/ bizYou Webサポート みんビズ作成のためのサポートサイト http://support.bizyou.jp/
DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンメニュー</title> <link rel="stylesheet" href="style.css"> <script src="jquery-1.6.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $("ul.menu").slideU…</link></meta></head></html>
jQueryを使用したcssナビゲーションメニューのまとめ jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
ポラロイド風写真配置 DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>ポラロイド風ギャラリー</title> <link href="css/style.css" rel="stylesheet"> <script src="http://www.google.com/jsapi"></script> <script src="js/script.js"></script> </head> <body> <div class="polaroid"> </div></body></html>
DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>画像スライドメニュー</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print"> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/imageMenu.js"></script>…</link></meta></head></html>
STEP1 メニューの骨格部分となるHTMLを作る リストタグ（ul/li要素）を用いてメインになるメニューを記述し、ul要素のclass属性には分かりやすく「menu」と名付けておく STEP2 メインメニューに属するサブメニューを、同じくリストタグ（ul/li要素）を用いて…
ORGANIC LIFE STORE DEMO
私がWebサイトの配色を決める時の流れ ヒアリング 調査 キーカラー選択 配色の技法を検討 配色の確認 サイトで使う配色の決定 私がWebサイトの配色を決める時の流れ │ Design Spice
WordPressをローカル環境（XAMPP）にインストールする方法 このブログを参考にさせていただいて、インストールします。WordPressをローカル環境（XAMPP）にインストールする方法 - ウェブ学のすすめ
Doodle について Doodle（ドゥードゥルと読みます）は、祝日や記念日、有名な画家や先駆者、科学者の生誕などを祝うため、斬新で楽しく、また時には自由な手法で Google のロゴ マークをアレンジしたものです。 Google Doodle（ホリデーロゴ）は、大好きです…
Facebookで再会した古い友人のサイト Facebookで古い友人と再会しました。 その友人のサイトの画像や音声ファイルがきれいさっぱり表示されていないので、ソースを見たら多分な原因がわかりました。 で、そこを確認してもらったら、無事に表示することが出来…
Webサイトのユーザビリティについてのまとめ 訴求ポイントをFAQ形式で表現 ユーザはFAQに対し、以下のようなイメージを持っていると考えられます。 一問一答で端的に表現されていてわかりやすい 会話形式の文体のため、読みやすく、頭に入りやすい 多くの人…
テキスト主体のWebサイトが増えてきている理由 アクセシビリティ・ユーザビリティ・SEO Webパフォーマンス マルチデバイス対応 運用の効率化、コンテンツへの注力 テキスト主体のWebサイトが増えてきている理由をあらためて考えてみた
色々なサイトでhtmlとcssの骨組みを毎日みてどんな形になっているのかを調べ、自分で理解するまで打ち他のサイトのリメイクが出来るようになる。 discrptionの表示が変わった。以前はpタグからのひっぱりだが今はdiscriptionからしっかりきているとのこと。 …
HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む HTML5によって実現するアプリケーショ…
サイト制作の際に、CSSの記述順序がごちゃごちゃになったので、整理します。 ボックス幅 コンテント領域幅＋パディング＋ボーダーの太さ＋マージン＝ボックス幅 ※コンテント：widthとheightプロパティで規定される長方形 パディング：padding ボーダー辺に対…
スタイルの優先順位 スタイルの特殊性（specificity） スタイルの読み込み順序のルール（あとから読み込んだものを優先する）は、あくまで特殊性が同じスタイルに適用される 風姿花伝より CSSのルールを忘れていた 課題サイト作成時に、何故CSSが適用されな…
Zen-Codingのカスタマイズ Zen-Codingのカスタマイズ - Webデザインの勉強−実践編｜風姿花伝 Zen-Coding、0.7のすすめ : Web Design KOJIKA17 Zen-Codingを入れる前に、 私はもっときちんとした、HTML+CSSの知識と理解が必要なようです。
サーバーにアップロードする 「Jimdo」のサイトに、作成したFlashをアップロードします パスを取得する アップロードした「Jimdo」のソースを表示して、 下記のようなパスを探します http:\/\/u.jimdo.com\/www35\/o\/s65b1ba74a91e34b1\/flash\/mb8c5f4fd28…
放送大学 テレビ教材テスト配信 放送大学＞映像ライブラリ＞授業科目紹介
Google CDNサービスのscript要素を簡単に取得できる jQuery google api and other google hosted javascript libraries. - ScriptSrc.net BrowseEmAll クロスブラウザチェックができるソフトウェアの試用版 Free trial cross browser testing | BrowseEmAll …
【J14】 ドルから円に換算を表示するJavaScriptを記述しなさい。入力された数値を換算して、以下のように表示します。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>【J14】ドルから円に換算表示</title> </head> <body> <script> var dollar; var yen; var rate = 100; dollar = prompt('金額をドルで入力してください',10); yen </body></html>…
アルバムジャケットが動いたら・・・ 昨日は円がぐるぐる回っているだけのトホホなFlashをアップしてお目汚しをしたので、今日は他力本願で動きものを紹介したいと思います。 Animated Albumsからの転載です。 まずは基本の動きで Pizzicato Five . Playboy …
円を描くムービー 1回で止める
