2013-07-01から1ヶ月間の記事一覧
40分で覚える！jQuery速習講座 //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js最新バージョンが良いとは限らないので、現段階ではver.1.9.1を使う。 $(document).ready.(function(){ })正確に書くと上記だけど、下記のように略してもいい。 $(…
<html lang="ja"> <head> <meta charset="utf-8"> <title>switch文の特徴</title> <body> <script> var color = '赤'; switch(color){ case '青': case '緑': console.log('進む'); break; case '黄': console.log('急いで進む'); break; case '赤': console.log('止まる'); break; default: console.log('信号機の故障') } </body></meta></head></html>
指定した回数だけ処理を繰り返す カウンタ変数「i」の初期値（「i」は、indexの意） 処理を１回実行するたびに、変数「i」の値をどのように変更するか <html lang="ja"> <head> <meta charset="UTF-8"> <title>和暦西暦for文</title> <style> table { border-collapse:collapse; } th, td { width: 100px; border: 1px solid; p</style></meta></head></html>…
反復処理。falseになるまで反復する。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題和暦（平成）と西暦を並べて表示</title> <style> table { border-collapse:collapse; } th, td { width: 100px; border: 1px solid; padding: 5px; text-align: center; } </style> </head> <body> <table> <tr><th>和暦（平成）</th><th>西暦</th></tr></table></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>H13-C13</title> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1><span>Patisserie camellia</span></h1> </div> <div id="nav"> <ul> <li><a href="#"></a></li></ul></div></div></body></html>
imgタグに直接書き込む方法 <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptでの画像置換</title> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div id="nav"> <ul> <li><a href="#"></a></li></ul></div></body></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css" media="all"> <title>C13</title> </head> <body> <div id="container"> <div id="header"> <h1>サンプルスタイルシートカンパニー</h1> </div> <div id="nav"> <ul> <li id="top"><a href="#"><span>トップページ</span></a></li></ul></div></div></body></html>
//関数の定義 function関数名(引数){命令} //関数の呼び出し 関数名(引数); <html lang="ja"> <head> <meta charset="utf-8"> <title>標準体重</title> <body> <script> function sWeight(man, height){ var weight; //計算を行う if(man){ weight = (height-80)*0.7; }else{ weight = (height-70)*0.6; } return weight; //値を返して</body></meta></head></html>…
<head> <meta charset="UTF-8"> <title>テスト１</title> <style> p img { cursor: pointer; } </style> </head> <body> <h2>【J02】</h2> <p> <img src="img/01.jpg" alt="タワーブリッジの写真" onClick="alert('タワーブリッジの写真です');"> </p> <h2>【J03】</h2> <p> </p></body>
<script> var height; var wieght; var man; man = confirm('あなたは男性ですか？'); height = prompt('身長を入力してください','半角英数'); height = parseInt( height ); if( man ) { weight = ( height - 80 ) * 0.7; } else { weight = ( height - 70 ) * 0.6…
<head> <meta charset="UTF-8"> <title>Javascriptの勉強1</title> <script src="sample.js"></script> </head> <body> <script> a='あいうえお'; num=parseInt(a); console.log(num);//NaNになるよう矛盾したもの </script> <script> a = typeof ('123'); console.log(a); //123は文字列だよという指示 </script> <script> var a = 1…</body>
<body> <div id="container"> <div id="header"> <h1 lang="en">Café de la plante</h1> <p class="subTitle">サブタイトルサブタイトルサブタイトル</p> </div> <div id="wrapper"> <div id="nav"> <ul> <li><a href="#">トップページ</a></li> <li><a href="#">カフェについて</a></li> <li><a href="#">本日のおすすめ</a></li> <li></li></ul></div></div></div></body>
<body> <div id="container"> <div id="header"> <h1>Typograpy.<span>71</span></h1> </div> <div id="nav"> <ul> <li class="current"><a href="#">HOME</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">PHTOGRAPH</a></li> <li><a href="#">GUESTBOOK</a></li> <li><a href="#">CONTACT</a></li></ul></div></div></body>
<body> <div id="container"> <div id="header"> <h1>Computer Technology Groups</h1> </div> <div id="nav"> <ul> <li><a href="#">エコロジー</a></li> <li><a href="#">コンピューター</a></li> <li><a href="#">モバイル</a></li> <li><a href="#">ショッピング</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div></div></body>
<body> <div id="container"> <div id="header"> <h1><span>今月の本棚</span><br> 推理小説</h1> <div id="headerInner"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </div> </div> <div id="content"> <div id="contentInner"> <h2>『鋼鉄都市』</h2> <ul> <li>（1953・米）</li> <li>アイザック・…</li></ul></div></div></div></body>
Illustratorから書き出しでpsd保存 レイヤーフォルダーが分かれてた場合、統合 アニメーションパットの右上から、レイヤーからフレームを作成 web用に保存からgifで保存
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" media="all"> <title>C06</title> </head> <body> <div id="container"> <div id="header"> <h1>建築散歩</h1> </div> <div id="content"> <h2>フンデルトヴァッサー・ハウス</h2> <h3>ウィーンの市営住宅はこんなに元気だ！</h3> </div></div></body></html>
問い合わせフォーム <form action="#" method="post" name="form1"> <p>名前：<input type="text" name="name" size="20" mexlemgs="10"></p> <p>内容：<textarea name="subumit" rows="5" cols="30">問い合わせ内容</textarea></p> <p><input type="submit" value="送信"></p> </form> ※「内容：」とフォームの囲みはベースラインでそろう。（インライン要素だから） Googleドライブからもフォームが作…
relative（相対的） abusolute（絶対的）relativeで基準点を作り、それに対してabusoluteと値で位置指定する。 #wrapper{ width: 800px; height: 500px; position: relative; } #content{ width: 600px; height:500px; position: abusolute; right: 0; top: …
横並びのナビボタンをマウスオーバーで切り替える方法。 #nav ul{ width:800px; overflow: hidden; } #nav li{ float: left; } #nav li a{ width: 160px; height:60px; display: block; background: url(../img/btn.jpg) no-repeat 0 0; } #nav li#home a:li…
li { float:left; } ul { overfloe:lhidden; } この二つはセット。 ulはliのwrapperみたいなものと考えればいいのかな？ borderを付ける際の注意 liにboederを付けるとborderの線幅分太るので、その分ulも太らせないといけない。 li aにborderを付ければ、li…
<body> <div id="container"> <div id="header"> <h1>Homepage Title</h1> <h2>サブタイトルサブタイトルサブタイトル </h2> </div> <div id="wrapper"> <div id="content"> <h3>コンテンツのタイトル</h3> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテン</p></div></div></div></body>…
ul { margin: 20px 0 0 20px; width: 200px; height: auto; } li { font-size: 18px; font-weight: bold; margin-bottom: 10px; width: auto; height: auto; } li a { color: dodgerblue; padding: 5px 0 4px 10px; display: block; border: 3px solid dodge…
ul { margin: 20px 0 0 20px; width: 200px; height: auto; } li { font-size: 18px; font-weight: bold; margin-bottom: 10px; width: auto; height: auto; background: url(../img/arrow.gif) no-repeat 0 16px; } li a { color: dodgerblue; padding: 5px…
《例A》 ul { margin: 20px 0 0 20px; width: 150px; height: auto; } li { font-size: 20px; font-weight: bold; width: 130px; height: auto; text-align: center; } li a { padding: 25px 0; display: block; } li#new a:link, li#new a:visited { backgr…
<body> <p id="sectionA">複数行の文章が一つのかたまりとして表示されている場合、行と行の間隔を「行間」と見なします。行間が狭いとたくさんの情報量を詰め込むことができますが、読みづらくなる場合があります。逆に行間を広くすると余白が確保されてゆったりとしたレイアウトに</p></body>…
<body> <p id="textA">アクセシビリティに配慮した文字指定をしたい[100%]</p> <p id="textB">アクセシビリティに配慮した文字指定をしたい[1em]</p> <p id="textC">アクセシビリティに配慮した文字指定をしたい[16px]</p> <p id="textD">アクセシビリティに配慮した文字指定をしたい[medium]</p> <hr> <p id="textE">アクセシビリティに配慮した文字指定をした</p></hr></body>…
<body> <p id="nomal">テキストを囲みのように表現したい［標準］</p> <p id="lineWeight">テキストを囲みのように表現したい［線の太さ］</p> <p id="lineColor">テキストを囲みのように表現したい［線のカラー］</p> <p id="lineStyle">テキストを囲みのように表現したい［線のスタイル］</p> <p id="lineMulti1">テキストを囲みのように表現したい［複数の指定］</p> <p id="lineMulti2">テキスト</p></body>…
ul { width: 200px; list-style: none; } li a { color: #FFFFFF; padding: 5px; margin-bottom: 2px; display: block; text-decoration: none; } li a:link, a:visited{ background-color: skyblue; } li a:hover,a:active { background-color: coral; }
a:link, a:visited{ color: royalblue; } a:hover,a:active { color: orange; }
