作ってみた
デザイン案-A これはお手本にあったままでの動作確認なので、 ここからオリジナルのサイトに変えていけばいいのかな。 DEMO ページのレイアウトに役立つjQueryのプラグイン [JS]ページのレイアウトに役立つjQueryのプラグインのまとめ | コリス
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>
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>
ポラロイド風写真配置 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
【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>…
円を描くムービー 1回で止める
クロスフェード 止めてみる でも、クリックで再開がわからないので、続きはまたあとで。
【J07】「h1要素」と「ｐ要素」の表示 「h1要素」と「ｐ要素」を、例のように表示するJavaScriptを記述しなさい。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>js07「h1要素」と「ｐ要素」</title> </head> <body> <script> document.write('<h1>はじめてのJavaScript<\/h1>'); document.write('<p>ゼロからJavaScriptを記述でき</script></body></html>…
ウォンツケーキ店 アップロードしたページ index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>ウォンツ ケーキ店 トップページ</title> <link href="base.css" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> <h1></h1></div></div></body></html>
小規模宿泊施設のサイト プレゼンに出したいのが民宿のホームページなので、参考サイトのワイヤーフレームの練習です。 既存サイトの研究 お手本になる既存サイトを探そうと、「沖縄 民宿」で検索しましたが、トップから3P目までいってもふさわしいサイトが…
以下の指示通りに表示するよう記述しなさい。講師日和 DTD・セレクタ名・背景色は、自由選択 ナビゲーションは、擬似クラスを設定すること 各ブロック同士の空きは、「10px」 幅「800px」を前提に、他の数値の変化は適宜おこなうこと 可変しないものとする …
レイアウトの配置は、まずcontainer内側にpaddingで余白を確保する 訂正したもの アップロードしたページ @charset "UTF-8"; * { margin: 0; padding: 0; } body { background-color: #CCC; } #container { width: 780px; margin: 0 auto; background-color:…
以下の指示通りに表示するよう記述しなさい。講師日和 DTD・セレクタ名・背景色は、自由選択 ナビゲーションは、擬似クラスを設定すること 各ブロック同士の空きは、「0」 可変しないものとする 作成したもの アップロードしたページ
写真は色の宝庫 写真を開く １列選択ツールで、写真を縦に上から下まで選択する 「イメージ」→「切り抜き」 「画像解像度」で縦横の比率のチェックをはずし、横幅の値を大きくする 一部をボタンや見出しの背景画像として使う 伊江島のお花畑 飛行機から見た…
雲の浮かんだ空の作り方 新規ファイルを作成する カラーパレットの「描画色：青」「背景色：白」にする 「フィルター」→「描画」→「雲模様１」 [Ctrl]キー+Fを押すと雲の形が変わるので、気に入った雲の形の空にする
Flashムービー PhotoshopのレイヤーをFlashのレイヤーにコンバート 各写真を「シンボルに変換」 時間を設計しながら「キーフレームの挿入」 モーションを設定 各レイヤーをクロス状態にずらしていく 必要があれば、ActionScriptを記述する 作成中 Flashは全…
ワイヤーフレームでレイアウトパターンを作成 カンプにするパターンの面に色塗り、レイヤーに分ける Photoshop形式で書き出す ワイヤーフレームの練習 最初の段階では、既存のページをもとにブロックをつくる練習をします 慣れてきたら、自分のアイデアにそ…
floatの場合 アップロードしたページ <html lang="ja"> <head> <meta charset="UTF-8"> <title>header（1）</title> <style type="text/css"> html, body, div, h1, h2 { margin: 0; padding: 0; font-size: 1.0em; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック"…</meta></head></html>
「Web画像の勉強」で解説していただきました。ありがとうございます。 写真から作るのではなく、土台から作ることがコツ 新規ファイルを作成（550px×450px）して、背景色を塗る 新規レイヤー（レイヤー1）を作成し、画像の土台部分を選択して白く塗る 土台の…
基本形（1） アップロードしたページ <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習（1）</title> <style type="text/css"> <!-- #myform label { font-size: 0.875em; margin-bottom: 3px; display: block; } --> </style> </head> <body> <form action="#" method="post" id="myform"> <p> </p></form></body></html>
tableでのレイアウト 表示の崩れがなくなる 色が付けやすくなる アップロードしたページ <html lang="ja"> <head> <meta charset="UTF-8"> <title>テーブルで組むフォーム</title> <style type="text/css"> </meta></head></html>
縦並びのナビゲーション paddingは問題なし marginは相殺される display: blockの利用はボタンとして反応させる為に「アンカー」に対して、マウスの動きに反応する「面積」を設定する ※設定していないとリンクの文字しか反応しない autoは0と同じで、中に文…
