演習課題provence（ｈｔｍｌ）
<!DOCTYPE html> <html lang="ja"> <head> <metacharset="utf-8"> <title>provence</title> <body> <container> <header> <h1>provence</h1> </header> <wrapper> <content> プロヴァンス（la Provence）は、フランス革命以前のフランスに置かれて<br> いた州のひとつであり、フランスの南東部に位置する。フランス王国併合前<br> （15世紀末）にあった独立国（プロヴァンス伯爵領）の名前でもある。「プ<br> ロヴァンス」の名称は、古代ローマ時代の属州（プロウィンキア、<br> Provincia）であったことにちなみ、プロヴァンス語で"Provenco"<br> や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点<br> から親しまれている。<br> 地域の区分としては、ローヌ川の左岸（東岸）とヴァール川の右岸とデュラ<br> ンス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァン<br> ス＝アルプ＝コート・ダジュール地域圏の大部分に当たる。 </content> <nav> <ul> <li a="home"><a href="#"><span>HOME</span></li> <li a="about"><a href="#"><span>About</span></li> <li a="product"><a href="#"><span>product</span></li>ontact <li a="access"><a href="#"><span>access</span></li> <li a="contact"><a href="#"><span>contact</span></li> </ul> </nav> </wrapper> <footer> <p ><small>(c)provence</small></p> </footer> </container> </body> </html>
jQueryとは
●jQueryはjava scriptのライブラリの一つです。 ●Cssと記述方法が似ています。 ＜記述する場所＞ <head> <script src="js/jquery-1-9-1.min.js"></script> </head> <body> <script src="js/jquery-1-9-1.min.js"></script> </body> ●ネットワーク経由でコンテンツを提供するサービスです。 ●＄()でhtmlをjQueryオブジェクト化することから始まります。 $('h1').show();//表示させる。 $('h1').fadeIn();//フェードインさせる。 $('h1').slideDown();//スライドアニメーション付きで表示。 $('h1').css('boder','1px solid red');//1pxの赤線をつける。 $('h1').remove();//削除する。 ●ready準備ができたら実行する。 $(document).ready(){ $('#sample').css('color','red'); }); ●$(function(){}) ページの読み込みが完了してから中に書かれたコードを実行します。 複数の命令をひとまとめにした関数を使います。
HTML,CSS復習
<！DOCTYPE html>と
宣言をしてhtmlを書くと過去のバージョンでも書くことができる。
brは改行に使うもので行間を空けるのに使うものではない。行間を空ける際はmargin: bottonを使う。
hrは水平線
h1~h6は見出しに使う。
sectionは本でいう章
articleは本文
asideはsidebarと同じ使い方ができる。
cssはデザイン担当
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link href="css/css2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <header> <h1>HTML5の使い所</h1> <p>W3Cの勧告までカウントダウン！さてIEは追従できるか否か！？</p> </header> <nav> <ul class="global"> <li>1章：html5使い所</li> <li>2章：W3Cの勧告</li> <li>3章：DTD宣言</li> <li>4章：スマホサイト</li> <li>5章：Media Queries</li> </ul> </nav> <article> <section> <h2>【html5使い所】</h2> <p>「これからはHTML5だ！」といきり立たず、どんな場合にhtml5のタグを使用できるのかしっかり学ぼう。スマホのブラウザシェアーが凄い勢いで伸びているが、まだまだコア層はIE8と9だ。</p> </section> <section> <h2>【W3Cの勧告】</h2> <p>来年に迫るW3Cの勧告で、WHATWG、W3C、そしてブラウザごとにバラバラに開発されていたhtml5が統一されるのか否か。</p> </section> <section> <h2>【DTD宣言】</h2> <p>PCではhtml5に完全対応しているブラウザはモダンブラウザのみ。今はW3Cのhtml5勧告のための準備として、html5で記述する箇所はDTD宣言と、IE7～8に支障の無いタグにとどめておこう。</p> </section> <section> <h2>【スマホサイト】</h2> <p>スマホに特化したサイトならほぼ全てのhtml5のタグを使用できる。PCサイトと別サイトをスマホ専用に作って同一アドレスでデバイスを振り分けよう。振り分けの方法は.htaccessを設置する方法、phpで記述する方法、JavaScriptを用いる方法がある。</p> </section> <section><!--1番目のセクション開始--> <p>【Media Queries】</p> <p>Media Queriesを使用したマルチディバイスなサイト作りが今人気を得ている。しかしながら、Media Queriesは現在のIE8ではサポートされていない。IEに対応されるための様々な手法を紹介しよう。</p> <section><!--2番目のセクション開始--> <h3>【Respond.js】</h3> <p>IE6～8でCSS3 Media Queries（max-widthとmin-width）を解釈可能にするスクリプト</p> <section><!--3番目のセクション開始--> <h4>【Respond.jsの問題点】</h4> <p>古いPCでページを読み込む時のロード時間が極端に長くなる。</p> </section> <!--3番目のセクション終わり--> </section> <!--2番目のセクション終わり--> <section> <h3>【html5shiv】</h3> <p>Googleが用意しているIE8以下での崩れを防ぐJavaScript。</p> </section> <!--2番目のセクション終わり--> <section class="last"> <h3>【条件付きコメント】</h3> <p>IEの独自仕様をhead内に記述。</p> </section> <!--2番目のセクション終わり--> </section> <!--1番目のセクション終わり--> </article> <aside> <ul class="sidemenu"> <li>用語解説</li> <li>索引</li> <li>画像出典</li> <li>リンク集</li> </ul> </aside> <footer> <small>COPYRIGHT (C) 1998-2013 Felica Technical Academy. ALL RIGHTS RESERVED.</small> </footer> </div> </body> </html> |K >|css| @charset "utf-8"; /* base */ body{ font-size: 16px; line-height: 1.7; } div#container{ width: 940px; margin: 0 auto; padding: 20px; background-color: #9CC; overflow:hidden; /* 子要素 */ } header,nav,article,aside{ padding: 10px; background-color: #FFF; margin-bottom: 20px; } article { float:left; width: 620px; margin-right: 20px; } aside { float:left; width: 260px; } footer { clear: both; padding: 10px; text-align:center; background-color:#FFF; } /* parts */ ul { margin: 0; padding: 0; } nav ul{ overflow: hidden; } nav ul li{ float: left; margin-right: 30px; } section{ margin-bottom: 10px; padding: 10px; background-color: #CFC; } section > section{ background-color: #FFF; } section > section > section{ margin-bottom: 0; background-color: #CFC; } section.last{ margin-bottom: 0; }
変数（復習）
＜変数＞
変数をするには宣言が必要、宣言をするには
Var 変数名
複数の宣言をするにはカンマで区切る。
＜変数の値の代入＞
変数名＝値;
(値は1つしか入れられない）
＜変数の表示＞
変数の中身を表示するには「console.log」や「alert」の（）に変数名を指定。
＜変数の利用＞
変数に値を入れるには次のようにする。
例）a= 2;
変数に値を入れることを代入という。
変数名には半角数字、＄、_が使える。
＜未定義型＞
変数が未使用状態であることをundefined【未定義）で表す。変数に代入はできない。
typeof演算子はundefinedで表される。
＜delete演算子＞
Delete演算子を使うと変数を削除し未使用状態にする。
＜複数代入演算子＞（イクリメント、デクリメント）
イクリメント
変数の値を1増やす。
＋＋はイクリメント演算子
デクリメント
変数の値を1減らす。
－－はデクリメント演算子
＜異なる型の演算子＞
文字列と数値を＋で結合すると数値は文字列に変換される。
C4 卵カフェHTML練習
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>おいしい卵料理レストラン Cockeyolly</title> </head> <body> <div id="container"> <div id="header"> <h1><img src="img/logo.gif" width="82" height="78" ait="おいしい卵料理レストラン Cockeyolly"><h1> </div> <div id="content"> <h2><img src="img/title.gif" width="231" height="49" alt="今月のおすすめ"</h2> <h3>きのこオムライス</h3> <p class="photo"><img src="img/photo01.jpg" width="185" height="129" ait="きのこのオムライス">ふんわりアツアツのオムライスを、<br> きのこたっぷりのドミグラソースで<br> どうぞ。オムレツには新鮮な特選地<br> 卵を使って、ほんのり甘く仕上げています。:<span class="price">800円</span></p> <h3>シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味</h3> <p class="photo"><img src="img/photo02.jpg" width="185" height="129" alt="シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味"> エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。 :<span class="price">900円</span></p> </div> <div id="sidebar"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">メニュー</a></li> <li><a href="#" class="this">今月のおすすめ</a></li> <li><a href="#">オリジナル雑貨</a></li> <li><a href="#">マップ</a><li> </i><a href="mailto:xxx@xxxx.xxx">メール</a></li> </ul> </div> <div id="footer"> <p><small>(c)2013 卵料理カフェ Cockeyolly</small></p> </div> </body> </html>
JavaScriptで画像置換(7/29分）
JavaScriptで画像置換
<!DOCTYPE html> <html lang ="ja"> <head> <meta charset="utf-8"> <title>ナビゲーション</title> <link rel="stylesheet" href="cafe.css" media="all"> </head> <body> <div id="nav"> <ul> <li><a herf="#"><img src="img/01_o.jpg" alt="ホーム" width="160" height="50" onMouseOver="this.src='img/01.jpg'"onMouseOut="this.src='img/01_o.jpg'"> </a></li> <li><a herf="#"><img src="img/02_o.jpg" alt="カフェフード" width="160" height="50" onMouseOver="this.src='img/02.jpg'" onMouseOut="this.src='img/02_o.jpg'"> </a></li> <li><a herf="#"><img src="img/03_o.jpg" alt="カフェドリンク" width="160" heigt="50" onMouseOver="this.src='img/03.jpg'" onMouseOut="this.src='img/03_o.jpg'"> </a></li> <li><a herf="#"><img src="img/05_o.jpg" alt="インフォメーション" width="160" height="50" onMouseOver="this.src='img/05.jpg'" onMouseOut="this.src='img/05_o.jpg'"> </a></li> <li><a herf="#"><img src="img/04_o.jpg" alt="お問い合わせ" width="160" height="50" onMouseOver="this.src='img/04.jpg'" onMouseOut="this.src='img/04_o.jpg'"> </a><li> </ul> </div> </body>
JavaScripｔ初歩
<インタプリ方式＞
一行ずつマシン語に変換しながら変更。WEBでは主にこちらを使用
＜コンパイラ方式＞
コンパイラを使ってオブジェクトファイル作成
＜変数＞
変数（variable）とはプログラムのソースコードにおいて一定期間記憶し必要な時に利用できるようにデータに固有の名前をつけたもの
変数名の前に半角スペースを入れる
例）
var 変数名；
複数の変数を宣言する際はカンマで区切る
例）
Var 変数１,変数2,変数3,
変数への値の代入
変数名＝値;
例）
数式を書く際、ansは左側に記入する
例
Var ans;
ans=(150*2+120*2)/2;
Console.log(ans);
要素検証をする際、クロームで表示をしてから行う
Console 結果確認
Alert,document 人に伝える。見せる
＜Method＞
オブジェクトの操作
例）
外部Javascriptファイルに記述
例