プレビュー 作り方 【1】ボタン類などを作る 【2】再生ボタン、停止ボタンを「シンボルに変換」 【3】新規レイヤーを作りアクションを記述する 【4】サーバーにアップロードしたファイルパスを指定 コード var snd1:Sound=new Sound(); var snd2:Sound=new S…
Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New ポイント 必要なのは「bsn.Crossfader.js」のみ id 属性を任意で付けておく var 変数名 = new Crossfader( new Array('id名','id名','id名'), クロスフェード時間, 静止…
昨日はjQuery tools scrollableとjQuery lightBox pluginを組み合わせましたが、今度は「lightBox2」を試してみました。Lightbox 2 ポイント lightbox2はLightbox 2からダウンロードし、「lightbox.js」、「lightbox.css」と画像(close.png/loading.gif/next…
jQuery tools scrollableとlightBoxがなかなか同時に動作しませんでしたが試行錯誤の上やっと動いてくれました。 プレビュー ↓拡大表示にすると見やすいです（右上のボタンが拡大表示）。 ↓スマートフォンの方はこちらからプレビューできます。 scrollableと…
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery Tools scrollable コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Tools scrollable</title> <script src="jquery.tools.min.js"></script> <link rel="stylesheet" href="standalone.css"> </link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQuery UIでアコーディオンメニュー - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UIでアコーディオンメニュー</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryで作るアコーディオンパネルpart2 - js do it コード HTML <div id="container"> <dl> <dt>【ゆく河の流れ】</dt> <dd> ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え､かつ結びて、久</dd></dl></div>…
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryで作るアコーディオンパネル - js do it コード HTML <dl> <dt>テキスト1</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト2</dt> <dd> <p>テキスト...（中略）...テキスト</p> </dd> <dt>テキスト3</dt> <dd> <p>テキスト...（中略）...</p></dd></dl>…
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryでノーマルアニメーション - js do it コード HTML <button>表示</button> <div></div> JavaScript $(function(){ $('button').click(function(){ if($('div').css('display') == 'none'){ $('div').show('slow');…
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 jQueryで文字を非表示にする - js do it コード HTML <div id="sample">このdivを消す</div> JavaScript $(function(){ $('#sample').hide(); }); ポイント hide()：表示状態にあるものを非表示にする
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 DOMで作る折りたたみ式記事 - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>まずはやってみる：方丈記編</title> <link rel="stylesheet" href="sample01.css"> <script src="1_01.js"></script> </link></meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 DOMでイベントとタイミングを記述 - js do it コード HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMでイベントとタイミングを記述</title> <script src="dom_click.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </meta></head></html>
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 DOMで文字色を指定 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMで文字色を指定</title> </meta></head></html>
プレビュー Flash版 HTML5版 ↓スマートフォンの方はこちらからプレビューできます。 ActionScript 2.0で作る歩く女の子 - js do it 作り方 【1】パーツの順序などを調整 【2】「修正」＞「シンボルに変換」 ↓「グラフィック」にする 【3】シンボルの中に入る…
プレビュー Flash版 ↓犬をクリックすると音が鳴ります。イヤフォンの方は音量注意！ HTML5版 ↓スマートフォンの方はこちらからプレビューできます。 ActionScript 2.0で作る吠える犬ボタン - js do it 作り方 【1】背景画像を配置 【2】犬画像を配置 ↓80%ぐ…
プレビュー Flash版 HTML5版 ↓スマートフォンの方はこちらからプレビューできます。 ActionScript 2.0で作るアナログ時計 - js do it コード this.onEnterFrame = function(){ var obj_date = new Date(); seconds_mc._rotation = obj_date.getSeconds()/60*…
プレビュー Flash版 HTML5版 ↓スマートフォンの方はこちらからプレビューできます。 ActionScript 2.0で作るデジタル時計 - js do it コード var hour:TextField; var mini:TextField; var sec:TextField; timer_mc.onEnterFrame = function() { var objDate…
プレビュー flash版 ↓画面をクリックすると何回でも再生します HTML5版 ↓スマートフォンの方はこちらからプレビューできます。 ActionScript 2.0で作るリップル～さざなみ効果～ - js do it 作り方 【1】サイズを幅600px、高さ400pxに&ステージの色を変更 【…
課題 著作権表記を表示させなさい。引用元：address要素とfooter要素 - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 セクションやページのフッターを表す「footer要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>セクションやページの</title></meta></head></html>…
課題 連絡先を表示させなさい。引用元：address要素とfooter要素 - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 連絡先情報を表す「address要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>連絡先情報を表す「address要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>
課題 写真と写真タイトルをまとめて表示させなさい。 カフェランチブログ 人気スイーツについて 疲れた時に美味しいスイーツを食べると、疲れも吹っ飛びますね。人気のバナナ豆乳シェイクのようなドリンクをはじめ、スイーツの定番である自家製ケーキも各種…
課題 補足情報も含めて表示させなさい。 カフェランチブログ 7月1週目ランチ ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。 ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼…
課題 見出しをまとめて表示させなさい。引用元：hgroup要素とaside要素 - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 見出しをグループ化する「hgroup要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>見出しをグループ化する「hgroup</title></meta></head></html>…
課題 ブログのエントリー記事を表示させなさい。 カフェランチブログ 7月1週目ランチ ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。 ハンバーグ、目玉焼き、トマト、サニーレタスがのったロ…
課題 文章を内容でわけて表示させなさい。 クリスマスオーナメント クリスマスツリーに飾られるオーナメントをご紹介します。 ツリートップ クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されること…
課題 音声を再生させなさい。引用元：テキストの論理構造（3） - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 音声を再生できる「audio要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>音声を再生できる「audio要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>
課題 動画を表示させなさい。引用元：テキストの論理構造（3） - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 動画を再生できる「video要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>動画を再生できる「video要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>
課題 地図のPDFを表示させなさい。引用元：テキストの論理構造（3） - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 外部リソースを埋め込む「object要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>外部リソースを埋め込む「object要</title></meta></head></html>…
課題 コピーライトを表示させなさい。引用元：テキストの論理構造（3） - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 注釈を表す「small要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>注釈を表す「small要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>
課題 本来の文章の意図から離れて強調したい部分を区別して表示させなさい。引用元：テキストの論理構造（3） - Webデザインの勉強｜忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 ハイライトされるテキストを表す「mark要素」…
