Twittertwitter.com
Deliciousdelicious.com
Tumblrwww.tumblr.com
Flickrflickr.com
Evernotewww.evernote.com
FriendFeedfriendfeed.com
Facebookwww.facebook.com
Bloggerwww.blogger.com
Twittertwitter.comDeliciousdelicious.comTumblrwww.tumblr.comFlickrflickr.comEvernotewww.evernote.comFriendFeedfriendfeed.comFacebookwww.facebook.comBloggerwww.blogger.comWindows OSにPHPとApacheサーバーのインストール ～php.iniの設定まで、パソコンでPHPを使えるようになるまでの手順を図解。.htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。Tipsでは実用的な自作関数を紹介。
JavaScriptの基本～実用的な関数までサンプル付きで解説。ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック（正規表現含む）など、サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。JavaScriptでDOM（Document Object Model）のメソッド・プロパティを使ってページ上のノードにアクセスするサンプルも追加しました。
docomo（i-mode）、au（EZweb）、SoftBankの3大キャリア携帯サイトの作成方法。各キャリア毎に使用可能な要素（タグ）とその属性をリストアップ。
Windows Media Player、RealPlayer、QuickTime、FlashPlayerのWebページ埋め込みによるストリーム配信方法を図・サンプルスクリプト付で解説。 表示するコントロールのカスタマイズ方法やメタファイル作成も。
RSSの受信・配信方法、HTML文法チェックやPageRank表示など無料で使えるSEOツール、アクセス解析で分かることなどSEO対策関連、Webページ作成に役立つフリーソフトやオンラインツール、サイトをグレードアップさせるブログパーツの紹介、IT用語やIPアドレスの調べ方など、知っておくといいかもな情報を特集。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* hover */
$('#content a').each(function () {
$('<div class="fader" />').css('opacity', 0).prependTo(this);
}).hover(function () {
$('img', this).stop().animate({
marginLeft:5
}, 250);
$('.fader', this).stop().animate({
opacity:0.15
});
}, function () {
$('img', this).stop().animate({
marginLeft:10
}, 250);
$('.fader', this).stop().animate({
opacity:0
});
}).find('img').css('marginLeft', 10);
/* accordion */
$('.navigation').each(function () {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelwrapper = $panels.filter(':first').parent(),
delay = 500,
heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
$panels.hide();
$links.click(function () {
var link = this,
$link = $(this);
// ignore if already visible
if ($link.is('.selected')) return false;
$links.removeClass('selected');
$link.addClass('selected');
document.title = 'jQuery look:Tim Van Damme - ' + $link.text();
if ($.support.opacity) $panels.stop().animate({opacity:0 }, delay);
$panelwrapper.stop().animate({
height:0
}, delay, function () {
var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
$panelwrapper.animate({
height:height
}, delay);
});
});
$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']':':first').click();
});
});
</script>
<!-- CSS -->
<style type="text/css">
#wrap {
width:470px;
}
/* hover */
#content {
padding:0 10px;
background:url("/content/img/ajax/content.png") repeat-y;
}
#content ul {
float:left;
display:block;
width:450px;
margin:0; padding:0;
background:url("/content/img/ajax/networks.png") repeat;
list-style:none;
}
#content li {
margin:0; padding:0;
list-style:none;
float:left;
width:225px; height:60px;
position:relative;
line-height:1;
}
#content a {
font-size:1em;
color:#666;
text-decoration:none;
padding:10px 0 5px;
display:block;
width:225px; height:45px;
position:relative;
z-index:2;
}
#content a img {
border:0;
float:left;
margin:0 10px; padding:0;
width:32px; height:32px;
}
#content a div.fader {
opacity:0;
-moz-opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:0; left:0;
width:100%; height:60px;
}
#content a:hover img {
margin-left:5px;
}
#content a strong {
display:block;
font-size:18px;
color:#000;
}
/* accordion */
#datacontent {
margin:0; padding:0px 10px;
}
#datacontent ul {
list-style:none;
margin:0; padding:5px;
display:block;
height:30px;
background:#dfdfdf;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#datacontent li {
list-style:none;
margin:0; padding:0;
float:left;
}
#datacontent li a {
outline:0;
display:block;
background:#dfdfdf;
color:#666;
text-decoration:none;
margin:5px; padding:1px 5px;
border:1px solid #dfdfdf;
}
#datacontent li a:hover {
border:1px solid #d1d1d1;
background:#d1d1d1;
color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#datacontent li a.selected {
background:#afafaf;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px inset #fff;
color:#fff;
}
#datacontent .panels {
border:1px solid #dfdfdf;
border-top:0;
border-bottom:10px solid #dfdfdf;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
overflow:hidden;
}
#datacontent .panelsinner {
overflow:hidden;
}
#datacontent .panel {
background:#fff;
padding:20px;
}
#datacontent h2 {
margin:0; padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://jqueryfordesigners.com/jquery-look-tim-van-damme/'>jQuery look:Tim Van Damme</a></p>
<!-- CODE -->
<h2>hover効果：プロフィールサイト風リンク集</h2>
<div id="content">
<ul>
<li><a href="http://twitter.com/"><img src="/content/img/sns/twitter_32.png" /><strong>Twitter</strong>twitter.com</a></li>
<li><a href="http://delicious.com/"><img src="/content/img/sns/delicious_32.png" /><strong>Delicious</strong>delicious.com</a></li>
<li><a href="http://www.tumblr.com/"><img src="/content/img/sns/tumblr_32.png" /><strong>Tumblr</strong>www.tumblr.com</a></li>
<li><a href="http://www.flickr.com/"><img src="/content/img/sns/flickr_32.png" /><strong>Flickr</strong>flickr.com</a></li>
<li><a href="http://www.evernote.com/"><img src="/content/img/sns/evernote_32.png" /><strong>Evernote</strong>www.evernote.com</a></li>
<li><a href="http://friendfeed.com/"><img src="/content/img/sns/friendfeed_32.png" /><strong>FriendFeed</strong>friendfeed.com</a></li>
<li><a href="http://www.facebook.com/"><img src="/content/img/sns/facebook_32.png" /><strong>Facebook</strong>www.facebook.com</a></li>
<li><a href="https://www.blogger.com/"><img src="/content/img/sns/blogger_32.png" /><strong>Blogger</strong>www.blogger.com</a></li>
</ul>
<br clear="all" />
</div><!-- #content -->
<h2>アコーディオン効果：簾のように上下に伸縮するタブ切替コンテンツ</h2>
<div id="datacontent">
<ul class="navigation">
<li><a href="#php">PHP</a></li>
<li><a href="#jsdom">JavaScript/DOM</a></li>
<li><a href="#mobile">モバイル</a></li>
<li><a href="#strm">音声・動画配信</a></li>
<li><a href="#topics">Web関連特集</a></li>
</ul>
<div class="panels">
<div id="php" class="panel">
<h2>PHP</h2>
<p>Windows OSにPHPとApacheサーバーのインストール ～php.iniの設定まで、パソコンでPHPを使えるようになるまでの手順を図解。.htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。Tipsでは実用的な自作関数を紹介。</p>
</div>
<div id="jsdom" class="panel">
<h2>JavaScript/DOM</h2>
<p>JavaScriptの基本～実用的な関数までサンプル付きで解説。ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック（正規表現含む）など、サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。JavaScriptでDOM（Document Object Model）のメソッド・プロパティを使ってページ上のノードにアクセスするサンプルも追加しました。</p>
</div>
<div id="mobile" class="panel">
<h2>モバイル</h2>
<p> docomo（i-mode）、au（EZweb）、SoftBankの3大キャリア携帯サイトの作成方法。各キャリア毎に使用可能な要素（タグ）とその属性をリストアップ。</p>
</div>
<div id="strm" class="panel">
<h2>音声・動画配信</h2>
<p>Windows Media Player、RealPlayer、QuickTime、FlashPlayerのWebページ埋め込みによるストリーム配信方法を図・サンプルスクリプト付で解説。 表示するコントロールのカスタマイズ方法やメタファイル作成も。</p>
</div>
<div id="topics" class="panel">
<h2>Web関連特集</h2>
<p>RSSの受信・配信方法、HTML文法チェックやPageRank表示など無料で使えるSEOツール、アクセス解析で分かることなどSEO対策関連、Webページ作成に役立つフリーソフトやオンラインツール、サイトをグレードアップさせるブログパーツの紹介、IT用語やIPアドレスの調べ方など、知っておくといいかもな情報を特集。</p>
</div>
</div>
</div><!-- #datacontent -->
<!-- / CODE -->
</div>
</body>
</html>