2013-08-01から1ヶ月間の記事一覧
・ IE6の問題カラム落ち(floatなどをぴったしに設定するとIE6だと下に落ちてしまう) 透過PNGが不適合(後ろが透明にならない) ↓対策 カラム落ち対策→floatかけているところに[display:inline;]をかける ・ 透過PNG作ったロゴなどの周りに長方形ツールで少し大…
1. クライアントとヒアリング(どのようなサイトを作るのか) ※想定ターゲット(見てほしい人)はなるべく絞る 2. 用件定義(コンセプトやニーズ)、ターゲット設定 3. サイトの構造設計 4. 制作仕様書(htmlの種類やコーディングのルールなど決める)
・明るさやコントラストは強めに設定 ・小さくすると細かい部分が見えなくなるので上から自分でデフォルメで大きめに書いてしまうのもあり基本は16×16だがほかにも使うかもしれないので48×48に設定し保存 ↓のサイトで変換 http://ao-system.net/favicon/inde…
基本は16×16だがほかにも使うかもしれないので48×48に設定し保存 ↓のサイトで変換 http://ao-system.net/favicon/index.php 下のでhtmlに設定 <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon"></link></link>
演習課題のアコーディオンメニューになりますHTML↓ <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンメニュー</title> </meta></head></html>
![はてなブックマーク - アコーディオンメニュー[JQ]](https://b.hatena.ne.jp/entry/image/https://yuiazu1116.hatenadiary.org/entry/20130828/1377733973)
◎Q04 時間による画像変化 ※わかりやすいように上部に時間を表示してます。 html↓ <script> //時間表示 var now,date; now = new Date(); date = now.getFullYear() + '年' +(now.getMonth() + 1) + '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMi…
◎Q01 for文 html↓ <script> for(var i = 1 ; i <=3 ; i++){ alert(i); } </script> </body> 結果↓ ◎Q02 値の振り分け 条件:三項演算子 html↓ <script> <script> var point; point = prompt('点数を入力してください') alert (point >= 70 ? '合格' : '不合格'); </script> </script> 結果↓ ◎Q03 おみくじ ※占う…
少し遅くなりましたが、課題用サイト出来ました(形だけ)。 動きがないサイトになってしまったので、これからまたアレンジ加えていこうと思います。http://webstudy.yu-nagi.com/
◎1つのものにアクションをあてる場合 onClipEvent (load) { //初めは静止しているので速度は０に設定 speed = 0; //加速度を１に設定 accel = 1; } onClipEvent (enterFrame) { //速度に加速度を足す speed += accel; //Ｘ座標に速度を足す this._x += speed…
※田中先生のサイトにある1つ目の課題になります HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>エコロジー</title> <link href="h01.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> <h1>ECOLOGY【エコロジー】</h1> <p>Computer Technology Groupsでは、<br> グループをあげてエコロジー／環境問…</p></div></div></body></html>
slideUp()メソッド ・縦にスライドしながら要素をたたむ ・パラメータが空の場合、400ミリ秒を指定するのと同じ HTML <style> #list{ background:#cef3ab; width:500px; } </style> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>jQuery</li> <li>PHP</li> </ul> <script> $(function(){ $('#list').slideUp(5000); }); </script> </body> ↓ slideDown()…
○hide()メソッド ・要素を隠す HTML <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>jQuery</li> <li>PHP</li> </ul> <script> $(function(){ $('#list').hide( ); }); </script> </body> ↓ ※hideの時間指定 ・「slow」か「fast」のいずれかで指定する ・ミリ秒で指定する（slow：600ミリ秒、fast：200ミリ秒） HTML <style> #list{ background:#00</style>…
attr()メソッド ・属性を操作する HTML <body> <h1><a href="#">趣味のアンケート</a></h1> <p>あなたの趣味を教えてください。</p> <form action="#" method="get"> <label>音楽：<input type="radio" id="music" value="music" name="hobby"></label> <label>映画：<input type="radio" id="movie" value="movie" name="hobby"></label> <label>読書：</label></form></body>
○複数のプロパティの記述$( 'セレクタ' ).メソッド( { 'プロパティ'：'値', 'プロパティ'：'値' } );・コロン（:）で値をつなぐ ・ふたつ目以降は、カンマ（,）で区切る ・全体は、「{ }」で囲む HTML <body> <ul> <li>HTML</li> <li>CSS</li> <li id="third">jQuery</li> <li">PHP</li> </ul> <script> $(function(){ $('#third').cs…
・要素に命令を出す [$( 'セレクタ' ).メソッド( パラメータ );] ・ドット（.）でつなぐ ・メソッド名には必ず（）をつける ・必要な場合は、パラメータを記述する○CSS()メソッド ・要素のCSSを操作するためのメソッド HTML <body> <ul> <li>HTML</li> <li>CSS</li> <li id="third">jQuery</li> <li>PHP</li> </ul> <script> $(funct</script></body>…
○子セレクタ・「子」にあたる要素を指定するセレクタ ・[＞]で区切ることで指定できる HTML <body> <ul> <li>HTML</li> <li><em>CSS</em></li> <li><em>jQuery</em></li> <li>PHP</li> </ul> <script> $(function(){ $('li > em').css('background','pink'); }); </script> </body> ↓ ○隣接セレクタ・指定した２つの要素が隣り合っているときにだけ指定した…
JQのセレクタはHTMLの一部分だけ抜き出しスタイルを適用できる。 HTMLの要素を取ってくると考えるといい。 その一部分や要素を的確に指定するときにセレクタを用いる。 ○IDセレクタ・ピンポイントでページ内の要素が欲しいときに最適なセレクタ ・HTMLでidで…
演習課題H13 HTML <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="H13.css"> <title>camellia</title> </head> <body> <div id="container"> <div id="header"> <img src="img/logo.gif" width="267" height="129" alt="ロゴ"> </div> <div id="wrapper"> </div></div></body></html>
