以前作った枝豆隊長のサイトをレスポンシブ対応させる ナビゲーションボタンがスマホサイズだと2行2列になるhttp://tototo.webcrow.jp/BlogUp/0401/ [html] <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
ナビゲーションボタンのレスポンシブ スマホサイズの時に横に並んでいたナビゲーションが2行2列に変化http://tototo.webcrow.jp/BlogUp/0330/RWD/ [html] <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>メディアクエリnav</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
レスポンシブ基本 [html] <html> <head> <meta charset="utf-8"> <title>メディアクエリ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header></header> <nav></nav> <div id="wrapper"> <div id="content"></div> <div id="sidebar"></div> </div> <footer></footer> </div></body></html>
メディアクエリでレスポンシブ対応画面が小さくなるにつれてカラム落ちさせる javascriptでTOPに戻るようにする →→ http://tototo.webcrow.jp/BlogUp/okazu/index.html [html] <html land="ja"> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>
jQueryプラグイン-bxslider- http://tototo.webcrow.jp/BlogUp/bxslider/index.html [html] <html lang="ja"> <head> <meta charset="utf-8"> <title>bxslider</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </link></link></meta></head></html>
CSS3 transform transition http://tototo.webcrow.jp/BlogUp/transform.html ホバーするとBOXが動きます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>transform</title> <style> div { width: 200px; height: 200px; margin: 10px; } .trans01 { background: #099; transition: 2s } .trans01:hover { t…</meta></head></html>
タブパネルhttp://tototo.webcrow.jp/0322/tab.html <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <link rel="stylesheet" href="style.css"> <script src="../js/jquery-2.2.1.min.js"></script> <script> $(function(){ var panelBox = $('ul.tab li a.selected').attr('href'); //u…</link></meta></head></html>
他のサイトからどんな構成（ワイヤーフレーム）でサイトを作っているのか研究 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>
CSS3でグラデーション CSSでグラデーションとつけるのと photoshopでグラデーションをつけるのと なにが違うのかCSSはベクトルで計算している為ページを画像を拡大しても画質が荒れないきれいなままを保っていられる photoshopはビットマップでできている為…
text-shadow <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS3の練習 - テキストの装飾</title> </head> <body> <ul class="shadow"> <li class="ts01">Drop Shadow</li> <li class="ts02">Grow</li> <li class="ts03">Bevel</li> <li class="ts04">Embos</li> <li class="ts05">Stroke</li> </ul></body></html>
・会社ロゴ位置の修正とニュースリリースのリンク部分とfooterのnavの開き メイン画像とHPの色合いの関係を修正 ・html5の新要素へ書き換え html-------------------------------------------------------------------------------------- <html lang="ja"><head><meta charset="utf-8"><title>豊永希_0120 クラ</title></meta></head></html>…
問い合わせフォームを作る html5ではインライン要素（<a>タグ等）はブロックレベル要素を囲むことができる formの作成 ソース------------------------------------------------------------------------ <html lang="ja"><head><meta charset="utf-8"><title>フォームの練習</title><style>table { border: 1px solid #AAA; border</meta></head></html></a>…
HTML５はツリー構造をどうやって作るかが一番大事 ソースコードを HTML 5 Outliner に貼り付ければoutline(ツリー構造)が確認できる html---------------------------------------------------------------------------- <html lang="ja"><head><meta charset="UTF-8"><title>HTML5の基本構造</title></head> <body><div class="container"><header></header></div></body></html>
