2012-07-01から1ヶ月間の記事一覧
プレビュー ↓スマートフォンの方はこちらからプレビューできます。 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要素」…
課題 話している部分を区別して表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 他とは区別される語句を表す「i要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>他とは区別される語句</title></meta></head></html>…
課題 日付を表示させなさい。引用元:テキストの論理構造(3) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 日付や時刻を表す「time要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>日付や時刻を表す「time要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>
課題 引用を表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 引用を表す「cite要素」「q要素」「blockquote要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>引用を表す「cite要素」「q</title></meta></head></html>…
課題 面積の単位を表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 上付き文字を表示する「sup要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>上付き文字を表示する「sup要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>
課題 二酸化炭素の化学式を表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 下付き文字を表示する「sub要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>下付き文字を表示する「sub要素</title></meta></head></html>…
課題 ルビをふって表示させなさい。引用元:テキストの論理構造(2) - Webデザインの勉強|忘筌 解答 プレビュー ↓スマートフォンの方はこちらからプレビューできます。 ルビを振る「ruby要素」 コード <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルビを振る「ruby要素」</title> <link rel="stylesheet" href="#"> <script src="#"></script> </link></meta></head></html>