2016-03-01から1ヶ月間の記事一覧
他のサイトからどんな構成（ワイヤーフレーム）でサイトを作っているのか研究 Illustrator 新規 Ｗｅｂ 1024pxファイル→配置webサイトからスクリーンショットしてもってきたファイルを選択（テンプレートのみにチェックをいれる）ファイル→ドキュメント設定→…
■アコーディオンパネル http://tototo.webcrow.jp/BlogUp/1/accordion.html <html lang="ja"> <head> <meta charset="utf-8"> <title>アコーディオンパネル</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script> $(function(…</link></meta></head></html>
■jQueryの命令-HTMLの移動(wrap)- <h1><strong>テキストテキスト</strong></h1> <h1><strong>テキストテキスト</strong></h1> となる ひとつずつ囲む <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの命令-HTMLの囲み(wrap)-</title> <script src="../../js/jquery-2.2.1.min.js"></script> <script> $(function() { $('strong').…</meta></head></html>
■nth-child擬似クラス 上から３番目に出てきたliに適用 <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習-nth-child擬似クラス-</title> <script src="../../js/jquery-2.2.1.min.js"></script> <script> $(document).ready(function() { $('li:nth-child(3)').css('color','coral'); }); </script> </head> </html>
■要素セレクタ要素に対して色変更を適用 <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習-要素セレクター-</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(document).ready(function() { $('li').css('color','red'); }); </script> </head> <body> <ul> <li>HTML5+CSS3</li> <li>JavaScript…</li></ul></body></html>
課題サイト ※以下の指示に従って、プログラムを作成しなさい。 ・表示は全てブラウザ上に表示するように記述すること ・DOMまたはwrite()メソッドと指定がない場合は、どちらでも可。 ・CSSの記述は不要（必然性があれば記述可） 【問1】サムネール(5個)にマ…
入力された数値の偶数・奇数を判別 <html lang="ja"> <head> <meta charset="utf-8"> <title>演習・偶数奇数判別</title> <script> function guki() { var num; var htmlstr=''; num = prompt('半角数字を入力してください', 2 ); num = parseInt( num); if( num%2===0 ) { htmlstr = '入力された数字' + num + 'は偶数です。' d</meta></head></html>…
配列を使った掛け算 http://tototo.webcrow.jp/script/0310/array03.html <html lang="ja"> <head> <meta charset="utf-8"> <title>配列を使った掛け算</title> <style> table { border: 1px solid #666; border-collapse: collapse; } th,td { border: 1px solid #666; width: 100px; padding: 5px; text-align: center; } t…</meta></head></html>
何年何月何日何曜日 http://tototo.webcrow.jp/script/0309/youbi.html <html lang="ja"> <head> <meta charset="utf-8"> <title>何年何月何日何曜日</title> </head> <body> <script> var n= new Date(); var f= n.getFullYear(); var m= n.getMonth()+1; var d= n.getDate(); var y= n.getDay(); var w=[ '日', '月', '火', '水…</body></html>
配列http://tototo.webcrow.jp/script/0308/hairetu_array.html var num=[ 10, 100, 1000, 10000]; console.log(num[0]); var fluits=[ 'りんご','もも','みかん','めろん','ばなな']; console.log(fluits[3]); var number=[ 10, 20, 30]; number[1]= 50; co…
サムネイル 画像置換html <html lang="ja"> <head> <meta charset="utf-8"> <title>画像置換</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="imgbox"> <h1>癒される柴犬</h1> <div class="thumbnail"> </div></div></body></html>
イベント http://tototo.webcrow.jp/script/on01.html <html lang="ja"> <head> <meta charset="utf-8"> <title>イベント（１）</title> </head> <body> <p><img src="img/01.jpg" alt="" onmouseover="console.log('マウスが乗りました');" onmouseout="console.log('マウスが外れました');"></p> <p></p></body></html>
偶数・奇数判別 if文 <html lang="ja"> <head> <meta charset="utf-8"> <title>偶数・奇数判別</title> </head> <body> <script> var num; num = prompt( '半角数字を入力して下さい', 2 ); num = parseInt( num ); //偶数か奇数か //if (num%2 === 0 )｛偶数｝でもok if ( num%2 === 1 ) { console.log( '入力された' + num + 'は奇数です。'</body></html>…
スライスの続き。 ガイドで線を引き終わったら スライスツールでスライスしていきます。 この時にスライス選択ツールでスライスした部分をダブルクリックして名前も決めていきます。この名前が各ファイル名になります。webおよびデバイス用に保存で保存しま…
javascriptには３つの構成がある・初期値 ・処理 ・出力基本練習 <script> //出力の記述３種類 ctrl+スペースバーで予測変換がでる document.write( ( 150*2 + 120*2 )/2 ); alert( ( 150*2 + 120*2 )/2 ); console.log( ( 150*2 + 120*2 )/2 ); </script> <script> //処理 var tota…
web制作課題修正html <html lang="ja"> <head> <meta charset="utf-8"> <title>atella</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <h1 class="heading">パスタとワインの店｜atella</h1> <p><img src="img/mainimage.jpg" alt="atella"></p> <p class="heading">ちょっと…</p></header></div></body></html>
Background-size <html lang="ja"> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> </head> <body> <div id="container"> <header> <h1>Paris</h1> </header> <div id="content"> <div class="box size2x2">box1</div> <div class="box size1x1">box2</div> <div class="box size1x1">box3</div> …</div></div></body></html>
chawannmusi.hatenablog.com昨日作成した日本の四季の手直し <html lang="ja"> <head> <meta charset="utf-8"> <title>日本の四季</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="top"> <div class="container"> <header> <h1>日本の四季</h1> <p class="home">日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。<br>…</p></header></div></body></html>
