アコーディオンメニュー

JQ

どう作っていくかを考える

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style>
body, dl, dt, dd {
  margin: 0;
  padding: 0;
}
#container {
  width: 500px;
  margin: 50px auto;
}
.accordion {
  padding: 5px 0;
  background: #61A342;
}
.accordion dt {
  padding: 1em;
  border: 1px #BBB solid;
  background: #FFF;
  font-weight: bold;
  cursor: pointer;
}
.accordion dd {
  padding: 1em 1em 1em 2em;
  border: 1px #BBB solid;
  background-color: #F1F1F1;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<dl class="ac accordion">
  <dt>HTML</dt>
  <dd>HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。</dd>
  <dt>jQuery</dt>
  <dd>jQuery（ジェイクエリー）は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。</dd>
  <dt>PHP</dt>
  <dd>PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。</dd>
</dl>
</body>
</html>
  1. まずは文章の部分であるdd要素を隠す
  2. ひとつだでは最初から開いた状態にしておく
  3. dt要素をクリックしたら、開いているdd要素は閉じてクリックした部分のdd要素を開く
  4. CSSで指定しやすいように開いている部分のdt要素にはクラスを付ける

セレクタ

JQ

「何かを取ってくる」機能

  • セレクタ
  • 取ってきたところからさらに探す

セレクタ

$( 'セレクタ' )
  1. ID セレクタ
  2. タイプセレクタ
  3. CLASSセレクタ
  4. 子孫セレクタ
  5. 全称セレクタ
  6. 子供セレクタ
  7. 隣接兄弟セレクタ
  8. 複数セレクタ
  9. 否定セレクタ
  10. 属性セレクタ
  11. 順番に関するセレクタ
  12. 状態に関するセレクタ
  13. フォームに関するセレクタ
idセレクタ
  • ピンポイントでページ内の要素がほしい時に最適なセレクタ
$( '#id名' )

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<ul>
  <li>fox</li>
  <li id="cat">cat</li>
  <li>fish</li>
  <li id="dog">dog</li>
  <li>bird</li>
</ul>
<script>
$(function(){
  $('#cat').css('background','pink');
  $('#dog').css('background','yellowgreen');
});
</script>
</body>
</html>
classセレクタ
  • 2つ以上の要素に何かしたい時に最適なセレクタ
$('.class名')

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<ul>
  <li class="man">John</li>
  <li class="man">Bob</li>
  <li class="woman">Mary</li>
  <li class="man">Taro</li>
  <li class="woman">Hanako</li>
</ul>
<script>
$(function(){
  $('.man').css('background','lightblue');
  $('.woman').css('background','pink');
});
</script>
</body>
</html>
タイプセレクタ(element)
  • 指定した要素名の要素すべてを取ってくる
$('div')

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
  <li>The quick brown fox jumps over the lazy dog.</li>
  <li>The quick brown fox jumps over the lazy dog.</li>
</ul>
<script>
$(function(){
  $('p').css('background','pink');
  $('li').css('background','yellowgreen');
});
</script>
</body>
</html>


body要素を取得

$(function(){
  $( 'body' ).css( 'background', 'black' );
});
子孫セレクタ(ancestor descendant)
$('p strong')

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style>

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div><p>I have a <strong>pen</strong>.</p></div>
<ul>
<li>His <strong>pen</strong> is red.</li>
<li>I needhis <strong>pen</strong>.</li>
<p>She dosen't need a <strong>pen</strong>.</p>
</ul>
<script>
$(function(){
  $('div strong').css('background','lightblue');
  $('ul strong').css('background','pink');
});
</script>
</body>
</html>
全称セレクタ(ユニバーサルセレクタ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
  <li><span>The quick brown fox jumps over the lazy dog.</span></li>
  <li>The quick brown fox jumps over the lazy dog.</li>
  <li><span>The quick brown fox jumps over the lazy dog.</span></li>
  <li>The quick brown fox jumps over the lazy dog.</li>
</ul>
<script>
$(function(){
  $('li *').css('background','yellowgreen');
});
</script>
</body>
</html>
グループセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
  <li class="first">The quick brown fox jumps over the lazy dog.</li>
  <li class="second">The quick brown fox jumps over the lazy dog.</li>
  <li class="third">The quick brown fox jumps over the lazy dog.</li>
  <li class="fouth">The quick brown fox jumps over the lazy dog.</li>
</ul>
<script>
$(function(){
  $('.first, .third').css('background','yellowgreen');
});
</script>
</body>
</html>

より高度なセレクタ

子セレクタ
$( 'li > em' )

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<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>
</html>
隣接セレクタ
  • 指定した2つの要素が隣り合っている時だけ指定した2つ目の要素を指定するセレクタ
$( 'h2 + h3' )

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<h1>最も優先順位の高い見出し</h1>
<h2>次に優先順位の高い見出し</h2>
<h3>その次に優先順位の高い見出し</h3>
<h2>次に優先順位の高い見出し</h2>
<p>ここに本文が入る</p>
<h3>その次に優先順位の高い見出し</h3>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>
<script>
$(function(){
  $('h2 + h3').css('background','pink');
});
</script>
</body>
</html>
間接セレクタ
  • 同じ親要素をもつ要素(兄弟関係)で指定した要素よりも後に登場する弟要素を指定するセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<ul>
  <li class="first">HTML</li>
  <li class="second">CSS</li>
  <li class="third">jQuery</li>
  <li class="fouth">PHP</li>
</ul>
<script>
$(function(){
  $('.second ~ li').css('background','pink');
});
</script>
</body>
</html>
:first-child 擬似クラスセレクタ
  • 一番最初に登場する要素だけを指定できるセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>
<script>
$(function(){
  $('li:first-child').css('background','pink');
});
</script>
</body>
</html>
:not 擬似クラスセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>
<script>
$(function(){
  $('li:not(:first-child)').css('background','pink');
});
</script>
</body>
</html>
組み合わせ
  • idがdivな要素の直下にあるp要素のうち、クラスboxに属さない要素を取得
$('#div > p:not(.box)')

メソッド

  • 要素に命令を出す
$( 'セレクタ' ).メソッド( パラメータ );
CSS系メソッド
  • 要素のCSSを操作するためのメソッド
HTML系メソッド
  • HTMLそのものを操作するためのメソッド
属性系メソッド
  • 要素の属性を操作するためのメソッド
トラバース系メソッド
  • HTMLを横断してその中から要素(トラバース)を検索するようなイメージのメソッド
エフェクト系メソッド
  • マウスイベントなど、きっかけを指定するためのメソッド
Ajax系メソッド
  • Ajaxを操作するためのメソッド

要素のスタイルを操作

$( 'セレクタ' ).メソッド( パラメータ );
  • ドット(.)でつなぐ
  • メソッド名には必ず()を付ける
  • 必要な場合はパラメータを記述する
CSS()メソッド
  • 要素のCSSを操作するためのメソッド
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style></style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li id="third">jQuery</li>
  <li>PHP</li>
</ul>
<script>
$(function(){
  $('#third').css('background','yellowgreen');  /*複数の指定*/
  $('#third').css('font-size','30px');
});
</script>
</body>
</html>
width()メソッド
  • 要素の幅を指定するメソッド

メソッドチェーンの指定

  • 複数のメソッドをドットでつなぐ
$(function(){
  $( '#third' ).css( 'background', 'yellowgreen' ).width( 250 );
});
addClass()メソッド
  • 要素にクラスを付け加える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style>
.first {
  background: yellowgreen;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>
<script>
$(function(){
  $('li:first-child').addClass('first');
});
</script>
</body>
</html>
  • classの追加を確認する
removeClassメソッド
  • 要素のクラス属性を削除する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<style>
.first {
  background: yellowgreen;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
  <li class="last">PHP</li>
</ul>
<script>
$(function(){
  $('li:last-child').removeClass('last');
});
</script>
</body>
</html>

実行後、class名は削除される(ただし、classという語句が残るので注意が必要)

JavaScriptによるページ構築あれこれ

JS

パスワード認証ページ

例1

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メンバーページの入り口</title>
</head>
<body>
<p>ようこそ。web制作科メンバーページへ。</p>
</body>
</html>

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パスワード認証</title>
<script>
function password() {
  var PASS = prompt('パスワードを入力して下さい。');
  location.href = PASS+'.html';
}
</script>
</head>
<body>
<form>
  <input type="button" value="メンバーページへ" onClick="password()">
</form>
</body>
</html>
例2

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メンバーページの入り口</title>
</head>
<body>
<p><a href="pass2.html">ようこそ。web制作科メンバーページへ。</a></p>
</body>
</html>

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パスワード認証2</title>
<script>
  PASS = prompt('パスワードを入力して下さい。');
  location.href = PASS + '.html';
</script>
</head>
<body>
</body>
</html>

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メンバーページ</title>
</head>
<body>
<p>ようこそ。web制作科メンバーページへ。</p>
</body>
</html>

ポップアップウィンドウ

ブラウザによってブロックされる

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ウィンドウはブロックされる</title>
<script>
  window.open('popup.html','frm1');
</script>
</head>
<body>
</body>
</html>
ブラウザにブロックされない方法

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブロックされない方法</title>
<script>
function popupNonBlock() {
  var win = window.open('popup.html','child','width=400,height=300');
}
</script>
</head>
<body>
<a href="popup.html">ただの遷移</a>
<a href="javascript: popupNonBlock()">non block</a>
</body>
</html>

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>開いたウィンドウ</title>
</head>
<body>
<p>ウィンドウが開きました。</p>
</body>
</html>
ブラウザにブロックされない方法2(時間を置いてURLを表示)

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブロックされない方法</title>
<script>
function popupNonBlock() {
  var win = window.open('opener.html','child','width=400,height=300');
}
</script>
</head>
<body>
<a href="javascript: popupNonBlock()">non block</a>
</body>
</html>

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>開いたウィンドウ</title>
<script>
window.setTimeout(function(){
  window.open('popup.html','child');
}, 1000);/*1000ミリ秒後に表示させる*/
</script>
</head>
<body>
<p>parent window</p>
</body>
</html>

何故ブロックされるのか
ブラクラ対策等でブラウザにはポップアップブロックが機能しているので、「window.open」小窓を生成してそこに指定したURLを表示させる事で可能となる。

オンマウスイベント

背景色の変更

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オンマウスイベント｜背景色を変更</title>
</head>
<body>
<p><input type="button" value="赤にする" onClick="document.bgColor='#FF0000'"></p>
</body>
</html>
アラートの表示

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オンマウスイベント｜アラート</title>
</head>
<body>
<p><a href="#" onMouseOver="window.alert('マウスを置きました。');">ここにマウスを置いてください。</a></p>
<p><input type="button" name="myButton" value="押す" onClick="window.confirm('ボタンを押しました。');"></p>
</body>
</html>
パラメーター(引数)を使う

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オンマウスイベント｜パラメーター</title>
<script>
function showMsg(str) {
  msg = "あなたは「" + str + "」をクリックしました。";
  confirm(msg);
}
</script>
</head>
<body>
<p>「はい」か「いいえ」をクリックして下さい。</p>
<p><input type="button" value="はい" onClick="showMsg('はい');"></p>
<p><input type="button" value="いいえ" onClick="showMsg('いいえ');"></p>
</body>
</html>
背景色・文字色を変える

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景色・文字色を変える</title>
</head>
<body>
<p>文字色が変わります。</p>
<p><input type="button" value="赤にする" onClick="document.bgColor='#FFFFFF',document.fgColor='#FF0000';"></p>
<p><input type="button" value="緑にする" onClick="document.bgColor='#000000',document.fgColor='#00FF00';"></p>
<p><input type="button" value="青にする" onClick="document.bgColor='#FFFFFF',document.fgColor='#0000FF';"></p>
</body>
</html>
背景色・文字色を変える2

<>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>背景色を変える</title>
    <script>
      function chgColor(bg, fc) {
        var target = document.getElementById("box");
        target.style.background = bg;
        target.style.color = fc;
      }
    </script>
  </head>
  <body>
    <div id="box">ここの背景色を変えます。</div>
    <p><input type="button" value="赤にする" onclick="chgColor('#FF0000','#FFFFFF');"/></p>
    <p><input type="button" value="緑にする" onclick="chgColor('#00FF00','#000000');"/></p>
    <p><input type="button" value="青にする" onclick="chgColor('#0000FF','#FFFFFF');"/></p>
  </body>
</html>
フォームに入力された数値を計算する

<>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>計算</title>
    <script>
      function calc () {
        document.myForm.result.value = document.myForm.price.value * document.myForm.count.value;
      }
    </script>
  </head>
  <body>
    <form name="myForm">
      <label for="price">単価</label><input type="text" id="price" size="10" onchange="calc();"><br>
      <label for="count">数量</label><input type="text" id="count" size="10" onchange="calc();"><br>
      <label for="result">合計</label><input type="text" id="result" size="10" onchange="calc();"><br>
    </form>
  </body>
</html>
JavaScriptを使ったプルダウンメニュー

<>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テンプレート</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script>
function pulldown(action,target) {
  listthis = document.getElementById(target);
  if(action == "over"){
    listthis.style.display = 'block';
  } else if(action == "out") {
    listthis.style.display = 'none';
  }
}
</script>
</head>
<body>
<div id="contents">
  <div id="header">
    <h1>JavaScriptを使ったプルダウンメニュー</h1>
  </div>
  <div id="navi"> 
    <!-- プルダウンメニュー　-->
    <div id="gnavi">
      <ul class="clearfix">
        <li id="gnavi1" onmouseover="pulldown('over','gnavi1_sub')" onmouseout="pulldown('out','gnavi1_sub')"><a href="#">メニュー1</a>
          <ul id="gnavi1_sub">
            <li><a href="#">サブメニュー1_1</a></li>
            <li><a href="#">サブメニュー1_2</a></li>
            <li class="last"><a href="#">サブメニュー1_3</a></li>
          </ul>
        </li>
        <li id="gnavi2" onmouseover="pulldown('over','gnavi2_sub')" onmouseout="pulldown('out','gnavi2_sub')"><a href="#">メニュー2</a>
          <ul id="gnavi2_sub">
            <li><a href="#">サブメニュー2_1</a></li>
            <li><a href="#">サブメニュー2_2</a></li>
            <li><a href="#">サブメニュー2_3</a></li>
            <li class="last"><a href="#">サブメニュー2_4</a></li>
          </ul>
        </li>
        <li id="gnavi3" onmouseover="pulldown('over','gnavi3_sub')" onmouseout="pulldown('out','gnavi3_sub')"><a href="#">メニュー3</a>
          <ul id="gnavi3_sub">
            <li class="last"><a href="#">サブメニュー3_1</a></li>
          </ul>
        </li>
        <li id="gnavi4"><a href="#">メニュー4(サブなし)</a></li>
        <li id="gnavi5" onmouseover="pulldown('over','gnavi5_sub')" onmouseout="pulldown('out','gnavi5_sub')"><a href="#">メニュー5</a>
          <ul id="gnavi5_sub">
            <li><a href="#">サブメニュー5_1</a></li>
            <li><a href="#">サブメニュー5_2</a></li>
            <li class="last"><a href="#">サブメニュー5_3</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /プルダウンメニュー --> 
    
  </div>
</div>
</body>
</html>

<>

@charset "utf-8";
/* css reset */
body {
	font-family:"メイリオ","ＭＳ Ｐゴシック", Tahoma, Arial, sans-serif;
    line-height: 1.7;
    color: #333;
	font-size: 12px;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/* recsr css ここまで　*/

/* NINJAのコマーシャルを消す */
ul.tdftad {
	display: none;
}



/* テンプレ　*/
#contents {
	color: #fff;
}
#header {
	background: #7F9F00;
}
h1 {
	padding:10px;
	font-size: 18px;
	font-weight: bold;
}
#navi {
	width: auto;
	margin: 0px;
	padding: 20px;
	overflow: hidden;
}


/*   プルダウンメニュー   */

#gnavi{
	position:relative;
    width:805px;
	margin-bottom: 150px;
    z-index:100;
}

#gnavi ul{
    margin:0;
    padding:0;
    list-style:none;
	overflow: hidden; 
}

#gnavi ul li{
    float:left;
	border-right: solid 1px #FFF;
}

#gnavi ul li a{
    text-align:center;
    width:160px;
    display:block;
    padding:6px 0;
    height:20px;
	color: #FFF;
    text-decoration:none;
    background: #699;
}

#gnavi ul li a:hover{
    background: #369;
}

#gnavi ul li ul{
    position:absolute;
    display:none;
}

#gnavi ul li ul li{
	clear: both;
    position:static;
}

#gnavi ul li ul li a{
    height:16px;
    padding:6px 0;
	color: #33F;
	background: url(../img/tree.png) no-repeat 12px -0px;
}
#gnavi ul li ul li.last a, #gnavi ul li ul li.last a:hover {
	background: url(../img/tree.png) no-repeat 12px -37px;
}
#gnavi ul li ul li a:hover{
	color: #F00;
	background: url(../img/tree.png) no-repeat 12px 0px;
}

feedを使った情報表示

JS

feedで使用するCSSプロパティ
折り返し禁止 → white-space: nowrap
指定した長さ以上の文章を折り畳む → text-overflow: ellipsis

マッシュアップ(Webプログラミング)

複数のWebサービスのAPIを組み合わせ、あたかも1つのWebサービスのようにする機能の事。ITの深い知識が無くても既存のWebサービスを組み合わせて、短期間でアプリケーション開発が出来る事から、新しい開発技法として注目されている。


Googleカスタム検索(サイト内検索)を利用するには
自分のサイトを登録して"キー"を取得し、そのキーをページに記述する事で可能となる。

jQueryとは

JQ

jQueryとは

jQueryのバージョン
  • Ver.2.0からは、IE8以下はサポートの対象外
  • IE8以下をターゲットにする場合は、Ver.2.0未満を利用する
head内に記述
<script src="js/jquery.js"></script>
CDNを利用する
  • Content Delivery Network
  • ネットワーク経由でコンテンツを提供するサービス
  • Minified(改行が除かれた圧縮版)


jQuery CDN

Google Ajax API CDN

記述する場所

  • ダウンロードしたデータを読み込む場合
<head>
　・・・
<script src="js/jquery-1.9.1.min.js"></script>
</head>

<body>
　・・・
<script src="js/jquery-1.9.1.min.js"></script>
</body>

jQueryの概念

  • 「何かを取ってくる」→「それに何かをする」
$とjQueryオブジェクト
  • 「$」こそが「jQuery」そのもの
  • 「$()」でHTML要素をjQueryオブジェクト化する事から始まる
  • 要素を示すセレクタを取ってきて「jQueryオブジェクト」を作成する

習得度確認試験2

訓練

1) shopというサイトがあります。それぞれのhtmlファイルに、ファイル名を表したテキストリンクがあります。(1)〜(7)のテキストリンクに相対パスの指定をしなさい。


<p><a href=" (1)  ">item1</a></p>
<p><a href=" (2)  ">products</a></p>
<p><a href=" (3)  ">white</a></p>
<p><a href=" (4)  ">index</a></p>
<p><a href=" (5)  ">item2</a></p>
<p><a href=" (6)  ">item1</a></p>
<p><a href=" (7)  ">white</a></p>

2) 次のhtml要素のcssにおける子孫セレクタを書きなさい。

(1)h2を親から、子孫セレクタで記述しなさい。

<div id="main">
<h2></h2>
</div>

(2)span class="date"を親から子孫セレクタで記述しなさい。

<p class="item">
<span class="date"></span>
</p>

上下のど真ん中に文字を置く
heightとline-heightを同じ値にする
→「line-height」とは頭の行間と次の行間の事を指している



習得度確認試験：解答

1)　(1)candy/item1.html　(2)products.html
　　(3)cake/white.html　(4)../index.html
　　(5)../candy/item2.html　(6)item1.html
　　(7)../cake/white.html
2)　(1)div#main h2　(2)p.item span.date