2013-03-30から1日間の記事一覧
それぞれについて処理する - each ソースコード【 HTML 】 <html lang="ja"><head> <meta charset="UTF-8"> <title>それぞれについて処理する - each</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } .animal { width: 300px; height: 100px; background-color: #9F…</meta></head></html>
値や内容をセットする/取得する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>値や内容をセットする/取得する</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #div1 { width: 300px; height: 200px; background-color: #9FC; } </meta></head></html>
【 参考サイト 】 colis-コリス CSSで画像置換 リンクタグのホーバー時に別の画像を差し替えて動きを見せる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSで画像置換</title> <style> nav { width: 800px; margin: 50px 0 0 5px; } ul { list-style-type: none; overflow: hidden; } li {</meta></head></html>…
☆★データーでの確認★☆CSS Spriteでの設定 １つの画像として書き出す。レスポンスの解消にもなる。 CSSスプライトの潜在的な問題点 CSSスプライトの潜在的な問題の解決方法 【 参考サイト 】 colis-コリス ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSで画像置換</title> <style> /* rese</meta></head></html>…
☆★データーでの確認★☆単純なJavaScript マウスが乗ったとき(Over)、マウスが離れたとき(Out)を使う > onMouseOver="this.src='images/◎◎.jpg'" onMouseOut="this.src='images/◎◎.jpg'" ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>単純なJavaScript</title> <style> * { margin: 0; padding</meta></head></html>…
☆★データーでの確認★☆サムネールで画像置換 サムネイル画像とメイン画像は別々のサイズで準備をする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ソファーのあるインテリア</title> <style type="text/css"> </meta></head></html>
☆★データーでの確認★☆ロールオーバー - jQuery基本形 画像の名前に[ _on ] と [ _off ]をつけ自動置換させる 画像置換範囲を[ class="rollover" ]で個別に指定 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロールオーバー-基本形</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> </body></html>
☆★データーでの確認★☆ロールオーバー-発展形 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロールオーバー-発展形</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> * { margin:0; padding:0; } .content { width: 700px; margin: 20px auto 0; background-color: #000;…</meta></head></html>
