2013-01-01から1ヶ月間の記事一覧
Webデザインの方法 43日目内容 formオブジェクト windowオブジェクト imgオブジェクト formオブジェクト フォームの利用 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの利用</title> <style> table { border-collapse: collapse; } th, td { border: 1px solid #333; width: 100px; height: 50px; text-ali</meta></head></html>…
Webデザインの方法 42日目内容 確認テスト（１） 確認テスト（１） <html lang="ja"> <head> <meta charset="UTF-8"> <title>インテリアショップ</title> <link rel="stylesheet" href="css/style.css" media="print,screen"> </head> <body> <h1>確認テスト（１）</h1> <hr> <div id="wrapper"> <div id="content"> <h2><a href="index.html">インテリアショップ…</a></h2></div></div></hr></body></html>
Webデザインの方法 41日目内容 透過PNGの作成 IE6で透過PNGを表示 random関数 透過PNGの作成 画像をトレースしてレイヤーを複製 複製したレイヤーでドロップシャドウを与える場所に線を引きパスファインダーでパスを分割 グループ選択ツールで分割したパスを…
Webデザインの方法 40日目内容 Stringオブジェクトの生成 配列の基礎 配列の添字を活用する Stringオブジェクトの生成 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Stringオブジェクトの生成</title> </head> <body> <script> var str1 = new String('Stringオブジェクト'); document.write('<h1>', str1,'</h1>'); document.write('<h2>長さ：</h2></body></html>…
Webデザインの方法 39日目内容 Dateオブジェクト Dateオブジェクト Dateオブジェクトを生成 <html lang="ja"> <head> <meta charset="UTF-8"> <title>オブジェクトを生成する</title> </head> <body> <script> var now; now = new Date(); document.write('<h1>', now.toString(), '</h1>'); </script> </body> </html> 指定した日時のDateオブジェクトを生成
月例テスト３回目 （1）JavaScriptの標準化されたものを［ A ］と呼びます Ａ：ECMAscript （2）マウスを重ねると画像が置換させるには［ B ］を記述します Ａ：onMouseOver （3）ページが読み込まれたときにダイアログでメッセージを表示させるには［ C ］…
Webデザインの方法 38日目内容 カンプ作成 スライス カンプ作成 クライアントにサイトの完成系の見た目を見せるために作成する これを元に実際にWebページを作成し作ったら大枠はいじれませんよと言う為のもの 本文はＭＳＰゴシックで書きアンチエイリアスを…
Webデザインの方法 37日目内容 jQueryの基本 jQuery UI custom jQuery応用 Ｓさんからの宿題 jQueryの基本 ボタンクリックで画像を変更 参考サイト：ASCII 40分で覚える！jQuery速習講座 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタンクリックで画像を変更</title> <script src="js/jquery-1.8.3.min.js"></script> <script> $(function(){ $('button').click(</meta></head></html>…
Webデザインの方法 36日目内容 関数の定義 戻り値 変数のスコープ JavaScriptで横スクロール 関数の定義 ボタンごとに関数を用意した場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタンごとに関数を用意</title> </head> <body> <h1>税込み価格を求める</h1> <hr> <p>商品A（1000円）<button onClick="zeiA()">税込価格</button></p> <p>商品B（2000円）<button onClick="zeiB()">税込価格<…</button></p></hr></body></html>
Webデザインの方法 35日目内容 JavaScriptの記述のまとめ while文 break文 continue文 JavaScriptでクロスフェード JavaScriptの記述のまとめ 出力のポイント document.writeの場合 「('引数１' , 変数 , '引数２')」カンマ区切り document.alertの場合 「('…
九九の対応表 <html lang="ja"> <head> <meta charset="UTF-8"> <title>九九の対応表</title> <style> table { border-collapse: collapse; } td, th { border: 1px solid #000; width: 50px; text-align: center; } th { background: #CCC; } </style> </head> <body> <h1>九九の対応表</h1> <hr> <table> <tr><th> </th></tr></table></hr></body></html>
1〜入力した値までの合計をダイアログボックスに表示させる <html lang="ja"> <head> <meta charset="UTF-8"> <title>1〜入力した値までの合計をダイアログボックスに表示させる</title> </head> <body> <h1>1〜入力した値までの合計</h1> <hr> <p>以下のボタンをクリックすると、<br> 1〜入力した値までの合計した結果を表示します。</p> <p><button onClick="total()">計算する</button></p> <script> function </hr></body></html>…
Webデザインの方法 34日目内容 jQuery lightBox pluginのカスタマイズ for文 JavaScript課題for文 jQuery lightBox pluginのカスタマイズ ダウンロード先：jQuery lightBox plugin zipの部分をクリックしてダウンロードする xamppで設定したテストサーバー上…
Webデザインの方法 33日目内容 変数と演算 if文 switch文 変数と演算 平成を西暦で表す <html lang="ja"> <head> <meta charset="UTF-8"> <title>平成を西暦に変換する</title> </head> <body> <script> var heisei; var fullYear; var message; heisei = 25; fullYear = heisei + 1988; message = '平成' + heisei + '年は' + '西暦' + fullY</body></html>…
JavaScript練習課題13 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script> function saiten() { num = prompt('点数を入力して下さい。','半角で入力'); if(num >= 80) { if(num == 100) { alert('満点です。'); } else{ alert('もう少しです。'); } } else{ alert('頑張りましょう。') } } </script> </head> <h1>点数を評価</h1></html>…
JavaScript練習課題12 <html lang="ja"> <head> <meta charset="UTF-8"> <title>四則演算</title> <script> var a,b,kai; a = 28; b = 7; function tasizan() { kai = a + b; alert('答えは'+ kai +'です'); } function hikizan() { kai = a - b; alert('答えは'+ kai +'です'); } function kakezan() { kai = a * b; alert('…</meta></head></html>
JavaScript練習課題11 <html> <head> <meta charset="utf-8"> <title>promptとif</title> </head> <body> <script> var age; age = prompt('年齢を入力してください。','20'); if(age >= 20) { alert('あなたは成人ですね。'); } else { alert('あなたは未成年ですね。'); } </script> </body> </html> 実際に表示させると↓
JavaScript練習課題10 <html lang> <head> <meta charset="UTF-8"> <title>prompt</title> </head> <body> <script> var answer; answer = prompt('好きな花は？','ひまわり'); </script> </body> </html> 実際に表示させると↓
JavaScript練習課題09 <html lang="ja"> <head> <meta charset="UTF-8"> <title>１年が何秒か表示する</title> </head> <body> <script> document.write('<h1>１年は何秒か？</h1>'+'<hr>') document.write('365日×24時間×60分×60秒＋5時間48分46秒=',(365*24*60*60+((5*60)+48)*60+46)); </script> </body> </html> 実際に表示させると↓
JavaScript練習課題08 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタンクリックで答え表示２function.ver</title> <script> function ans() { var answer = '富士山です。'; alert(answer); } </script> </head> <body> <h1>日本で一番高い山は？</h1> <hr> <p>ボタンをクリックするとアラートが表示されます。<br> <button onClick='ans()'>クリックしてくだ…</button></p></hr></body></html>
JavaScript練習課題07 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ｈ１要素とｐ要素をJavaScriptで表示する</title> </head> <body> <script> document.write('<h1>初めてのJavaScript</h1>'+'\n'); document.write('<p>ゼロから始めるJavaScriptを記述できるように練習します。</p>'); </script> </body> </html> 実際に表示させると↓
JavaScript練習課題06 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタンクリックで答え表示function.ver</title> <script> function ans() { var answer = 'YouTube'; alert(answer); } </script> </head> <body> <p>問題</p> <p>インターネット動画共有サービスでもっとも有名なものは？<br> <button onClick='ans()'>答えを見る</button></p> …</body></html>
JavaScript練習課題05 <html lang="ja"> <head> <meta charset="UTF-8"> <title>クリックでアラートfunction.ver</title> <style> img { border:none; cursor:pointer; } </style> <script> function Photoinfo(){ alert('ネコの写真です。'); } </script> </head> <body> </body></html>
JavaScript練習課題04 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロードでアラート</title> <style> img { border:none; } </style> </head> <body> <img src="img/01.jpg" width="440" height="330" onload="alert('ネコの写真です。');"> </body> </html> 実際に表示させると↓
JavaScript練習課題03 <html lang="ja"> <head> <meta charset="UTF-8"> <title>マウスアウトでアラート</title> <style> img { border:none; } </style> </head> <body> <img src="img/01.jpg" width="440" height="330" onMouseOut="alert('ネコの写真です。');"> </body> </html> 実際に表示させると↓
JavaScript練習課題02 <html lang="ja"> <head> <meta charset="UTF-8"> <title>マウスオーバーでアラート</title> <style> img { border:none; } </style> </head> <body> <img src="img/01.jpg" width="440" height="330" onMouseOver="alert('ネコの写真です。');"> </body> </html> 実際に表示させると↓
JavaScript練習課題01 <html lang="ja"> <head> <meta charset="UTF-8"> <title>クリックでアラート</title> <style> img { border:none; cursor:pointer; } </style> </head> <body> <img src="img/01.jpg" width="440" height="330" onClick="alert('ネコの写真です。');"> </body> </html> 実際に表示させると↓
Webデザインの方法 32日目内容 JavaScript練習課題 カンプの作成 JavaScript練習課題 JavaScript練習課題01 JavaScript練習課題02 JavaScript練習課題03 JavaScript練習課題04 JavaScript練習課題05 JavaScript練習課題06 JavaScript練習課題07 JavaScript練…
Webデザインの方法 31日目内容 プレゼンテーション Flashで条件分岐 プレゼンテーション 情報を絞る 今検索する人が何を必要としているかを考えて作る Flashで条件分岐 変数宣言のみ数字を使い、スクリプトの中には使わないようにする functionの中にあるの…
