ウェブネタブログ tag:blog.webneta.net,2008-05-29://1 2008-07-05T15:35:49Z Movable Type 4.1 CSSによるテーブルの装飾 tag:blog.webneta.net,2008://1.20 2008-07-04T08:13:39Z 2008-07-05T15:35:49Z CSSと画像でテーブルを装飾しています。なかなか手が込んでいてきれいですね。... Homcom http://wife.nanbbs.jp/ CSSと画像でテーブルを装飾しています。なかなか手が込んでいてきれいですね。

]]> 参考サイトはこちら
サンプルテーブルはこちら
以下にソース記載します。

CSS

th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #6D929B;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #C1DAD7;
	background: none;
}
th.spec {	
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #fff url(images/bullet1.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
}
th.specalt {
	border-left: 1px solid #C1DAD7;
	border-top: 0;
	background: #f5fafa url(images/bullet2.gif) no-repeat;
	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,
	sans-serif;
	color: #B4AA9D;
}
td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	padding: 6px 6px 6px 12px;
	color: #6D929B;
}
td.alt {
	background: #F5FAFA;
	color: #B4AA9D;
}

HTML

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    <th scope="col" abbr="Dual 2">Dual 2GHz</th>
	<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
  </tr>
  <tr>
    <th scope="row" abbr="Model" class="spec">Model</th>
    <td>M9454LL/A</td>
    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
    <td class="alt">Dual 1.8GHz PowerPC G5</td>
    <td class="alt">Dual 2GHz PowerPC G5</td>
    <td class="alt">Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
    <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>
  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
  </tr>
</table>




エキサイトFX『外為ルネッサンス』の詳細はコチラ]]> 縦横 ページの中央に配置 tag:test.webneta.net,2008://1.2 2007-09-05T07:03:44Z 2008-07-05T15:45:34Z CSSレイアウト時にボックスを左右中央揃えで配置するには、ボックスの左右のマージ... Homcom http://wife.nanbbs.jp/ CSSレイアウト時にボックスを左右中央揃えで配置するには、ボックスの左右のマージンをautoにすればいいのですが、天地（縦）中央揃えで配置する時の方法。

]]> ネガティブマージンを利用した中央配置です。
ブラウザの中央（50%）にコンテンツ（div）の左上がくるように配置されるので、そこからコンテンツの幅、高さの分だけ左上（負の値）にmarginで移動。
コンテンツの幅、高さが固定の時しか利用できません。幅が可変の時はボックスの左右のマージンをautoなどを組み合わせれば上手くいくかも。

<html>
<body>
<div>あああ</div>
</body>
</html> 
html,
	body{
	height:100%;
	width:100%;
	position:relative;
}
											
div {
	position:relative;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
	background:#555;
	margin:-25px 0 0 -25px;
}



外国為替証拠金取引・FX取引 ヒロセ通商株式会社]]> IE6でPNG画像を表示する　（IEPNGFIX） tag:test.webneta.net,2008://1.8 2007-08-30T03:27:54Z 2008-07-05T15:39:10Z IE6でアルファチャンネル有のPNG画像を表示する方法はいくつかありますが、自分... Homcom http://wife.nanbbs.jp/ IE6でアルファチャンネル有のPNG画像を表示する方法はいくつかありますが、自分はこの方法が一番簡単で、応用が効くかなと思います。

]]> IE PNG Fix v1.0 RC4
IE（var6以前）で自動的にAlphaImageLoaderを適用してPNG画像を表示してくれます

コチラからiepngfix.zipをダウンロード
解凍後、任意のディレクトリにiepngfix.htcと、blank.gifをおく。
iepngfix.htc内のblank.gifまでのパスを修正。

<div><img src="sample.png" /></div>

上記のようなHTMLで<img>PNG画像を表示したいならCSSに以下のように記述

div img {
	behavior:url(iepngfix.htc) 
}

<div>の背景としてPNG画像を表示したいならCSSに以下のように記述


div {
	background:url(sample.png);
	behavior:url(iepngfix.htc) 
}



伊藤忠グループの外国為替取引会社・ＦＸプライム]]> Firefoxで描画エンジンをIEに切替え tag:test.webneta.net,2008://1.9 2007-08-29T03:37:19Z 2008-07-05T15:40:58Z FirefoxでのHTML描画エンジンをGeckoからIEに切り替えるアドオン「... Homcom http://wife.nanbbs.jp/ FirefoxでのHTML描画エンジンをGeckoからIEに切り替えるアドオン「IE Tab」です。Firefoxのタブ毎切替が可能です。
サイト構築時にブラウザの表示確認をするのに便利です。

]]> IE化されたタブでは"Windows Update"などIE専用のWebサイトにアクセスできるほか、IEの右クリックメニューに登録したツールも利用可能。

Mozillaサイトよりダウンロード

IE Tabイメージサムネイル




FXなら「みんなのFX」！手数料無料！]]> IEの各バージョン 動作確認ソフト tag:test.webneta.net,2008://1.10 2007-04-26T04:09:48Z 2008-07-04T06:54:09Z WindowsにIEは、基本的に１つのバージョンしかインストールできません。 そ... Homcom http://wife.nanbbs.jp/ WindowsにIEは、基本的に１つのバージョンしかインストールできません。
そのため、バージョンによってCSSの解釈が非常に異なるIEでのWebページの動作確認は、 バージョンごとにPCを用意しなくてはいけないので、手間がかかります。
そこで異なるIEのバージョンでの動作チェックするためのアプリケーションです。

]]> Multiple IE

http://tredosoft.com/Multiple_IE

コチラのソフトは、インストール不要で、Windows上で擬似的にIEの各バージョンを動作させることができるようす。
IEのバージョンは3、4、5.01、5.5sp2、IE6です。

IETester

http://www.my-debugbar.com/wiki/IETester/HomePage

コチラのソフトも、インストール不要です。
IEのバージョンは3、4、5.01、5.5sp2、IE6、IE7、IE8 betaです。
ただしIE7を導入済みの場合です。

]]> ウィンドウ幅にあわせてレイアウトを変更 tag:test.webneta.net,2008://1.11 2007-04-16T06:35:09Z 2008-07-06T16:55:38Z 最近ブログの普及などもありよく見かける３カラムレイアウト。ツールやナビゲーシ... Homcom http://wife.nanbbs.jp/ 最近ブログの普及などもありよく見かける３カラムレイアウト。ツールやナビゲーションが区分けされ、分かりやすいのが特徴です。
反面、ブラウザウィンドウ幅が狭いと、メインのコンテンツが入る部分がどんどん狭くなっていったり、横スクロールが出たり、デメリットも。
そこで、ウィンドウの幅に合わせてカラムを変化させるスクリプトの紹介

]]> コチラのスクリプトは、ウィンドウ幅を取得し、幅に合わせたCSSファイルを読み込むものです。読み込むファイルを幅に合わせて３段階選択することが出来ます。
サンプルはコチラ

HTML

<script src="dynamiclayout.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="css/thin.css" title="narrow" />
<link rel="alternate stylesheet" type="text/css" href="css/wide.css" title="normal" />
<link rel="alternate stylesheet" type="text/css" href="css/wider.css" title="wide" />

ウィンドウの幅に関係なく読み込むファイルはtitle="default"を、
幅が１番狭い時に読み込むCSSファイルにtitle="narrow"
幅が中間の時に読み込むCSSファイルにtitle="normal"
幅が広い時に狭い時に読み込むCSSファイルにtitle="wide"
としています。
title="hogehoge"の部分はJavascript側と同期を取れば、どんな名前でも構いません。

Javascript

function dynamicLayout(){
	var browserWidth = getBrowserWidth();

	//狭い時の幅を設定
	if (browserWidth < 750){
		changeLayout("narrow");
	}
	
	//中間の時の幅を設定
	if ((browserWidth >= 750) && (browserWidth <= 950)){
		changeLayout("normal");
	}
		
	//広い時の幅を設定
	if (browserWidth > 950){
		changeLayout("wide");
	}
}

上記では750px以下を狭い時、750px～950pxを中間時、950px以上を広い時の定義

サンプル下部のリンクをクリックすると、ウィンドウ幅に関係なく、レイアウトを変更することが可能です。




アイディーオー証券]]> 各ブラウザ対応 透明度指定 tag:test.webneta.net,2008://1.12 2007-04-11T06:39:38Z 2008-07-07T13:47:54Z CSSで透明度を指定するプロパティです。各ブラウザ毎に独自の指定方法ですので、... Homcom http://wife.nanbbs.jp/ CSSで透明度を指定するプロパティです。
各ブラウザ毎に独自の指定方法ですので、こういうのは早く統一して欲しいものです。

]]> IEでの透明度指定方法 
div { filter: alpha(opacity=40); }

(opacity=40)の40が透明度です。0が不透明、100で完全透明です。

Firefoxでの透明度指定方法

div { -moz-opacity:0.4; }

0.4が透明度です。0が不透明、1で完全透明です。

Opera、Safariでの透明度指定方法

div { opacity:0.4; }

0.4が透明度です。0が不透明、1で完全透明です。




FX 外国為替証拠金取引のFX ZERO]]> 文字サイズの変更　大中小　（読み込むCSSファイルを切替版） tag:test.webneta.net,2008://1.13 2007-04-10T06:43:51Z 2008-07-07T13:49:13Z 文字のサイズを大中小から選ぶやり方です。Javascript制御で読み込むCS... Homcom http://wife.nanbbs.jp/ 文字のサイズを大中小から選ぶやり方です。Javascript制御で読み込むCSSファイルを切り替えます。

]]> スクリプトダウンロード

コチラのサイトで配布されているスクリプトをダウンロード。
ページ下のほうDownload styleswitcher.jsより

外部javascriptとして記述

<script type="text/javascript" src="styleswitcher.js"></script>

切り替えしたいCSSファイルを複数用意

文字サイズを記述したCSSファイルを用意し、外部CSSとして読み込み

<link rel="alternate stylesheet" type="text/css" href="big.css" title="big" />
<link rel="alternate stylesheet" type="text/css" href="normal.css" title="normal" />
<link rel="alternate stylesheet" type="text/css" href="small.css" title="small" />

title="big"の部分は任意のtitleをつけてください。

切り替えボタン部

<a href="javascript:void(0)" onclick="setActiveStyleSheet('big'); return false;">大きい</a><br />
<a href="javascript:void(0)" onclick="setActiveStyleSheet('normal'); return false;">普通</a><br />
<a href="javascript:void(0)" onclick="setActiveStyleSheet('small'); return false;">小さい</a>

setActiveStyleSheet('●●●')●●●部分は上でtitleにつけた任意の名前を入れる

これで完了です。
一応スクリプトも記述しておきます。参考までに

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);



自動車保険はアクサ]]> モダンブラウザ向けCSSハック tag:test.webneta.net,2008://1.14 2007-04-09T06:48:46Z 2008-07-04T06:49:54Z IE7もぼちぼち普及し始めてきました。サイトを作る上で、対応しなくてはいけない... Homcom http://wife.nanbbs.jp/ IE7もぼちぼち普及し始めてきました。サイトを作る上で、対応しなくてはいけないブラウザが増えるとそれだけで時間がかかってしまいます。
で、今日はハックについて。

]]> IE6のみ適用 
* html body { }

IE7のみ適用

*:first-child+html body { }

IE6を除外（モダンブラウザ）

html > body { }

IE6、IE7を除外（モダンブラウザ）

html>/**/body { }

Operaに適用

*+html:first-child body { }

Safariに適用

/*\*/
html:\66irst-child { }
/* end */

Mac IE適用

body { /*\*//*/ ●●●●●●● /**/ }
]]> AJAX版 郵便番号から住所検索 tag:test.webneta.net,2008://1.15 2006-11-14T06:58:55Z 2008-07-04T06:50:45Z 郵便番号を入力した時点で、以下の住所欄に住所が自動的に入力されるスクリプトです... Homcom http://wife.nanbbs.jp/ 郵便番号を入力した時点で、以下の住所欄に住所が自動的に入力されるスクリプトです。AJAXとJSONを使用して郵便番号の入力が完了すぐに住所が自動的に入力されます。便利ですね。

]]> こちらのサイトにAJAX版 郵便番号から住所検索のソースが掲載されていました。CGIを使用しないバージョンなので使いやすいですね。
ありがたく活用させて頂きます。

以下サンプル

郵便番号
都道府県
市区町村～番地
建物名～号室

Kawa.net xpで紹介されているものは、
index.html
└ ajaxzip2
　　　├ data
　　　├ work
　　　└ ajaxzip2.js
の階層になっています。
ajaxzip2以下の階層を別のディレクトリに移す場合は、htmlファイルから見たJASONファイルの場所が変わってしまうので、 

<script>AjaxZip2.JSONDATA = '/common/scriptajaxzip2/data';</script>

上記の記述が必要です

]]> lightbox.js　v2.0 tag:test.webneta.net,2008://1.7 2006-09-12T02:22:14Z 2008-07-11T14:52:18Z 前のエントリで紹介したスクリプトの別バージョンです。こちらも最近よく見かけます。... Homcom http://wife.nanbbs.jp/ 前のエントリで紹介したスクリプトの別バージョンです。
こちらも最近よく見かけます。]]> 今回は写真をグループ化してスライドショー的に写真を見ることができるようになっています。

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

上記コードのlightbox[roadtrip]のようにrel属性を設定するとlightbox[roadtrip]だけグループ化され、スライドショー化できます。

サンプルはこちら

作者サイト＆ダウンロードはこちら




保険の窓口 インズウェブ]]> lightbox.js　v1.0 tag:test.webneta.net,2008://1.6 2006-09-11T01:51:24Z 2008-07-10T15:19:41Z フォトアルバムや、商品カタログなんかに使えそうなスクリプト。 最近はかなりメジャ... Homcom http://wife.nanbbs.jp/ フォトアルバムや、商品カタログなんかに使えそうなスクリプト。
最近はかなりメジャーになってきました

]]> サンプルは結構クールな感じに仕上がってますが、CSSをいじれば様々なイメージにあわせる事が出来そうです。

サンプルページはこちら

参考サイト：http://www.huddletogether.com/projects/lightbox/




純金積立プラン 商品紹介]]> パスワードでログインさせる方法（入室制限） 2 tag:test.webneta.net,2008://1.17 2006-09-07T07:18:29Z 2008-07-09T14:48:34Z ベーシック認証によるアクセス制限（ID パスワードによる入室制限）を説明しました... Homcom http://wife.nanbbs.jp/ ベーシック認証によるアクセス制限（ID パスワードによる入室制限）を説明しました。こちらは手軽な上に、セキュリティーのレベルもぼちぼちなので、簡単にセキュリティーをかけたい場合はオススメですが、なにぶんサーバーの制限を受けるため、場合によっては利用できない場合もあります。
今回は、セキュリティーのレベルはあまり高くありませんが、どんなサーバーを利用していても手軽にできるJavascriptを利用した、アクセス制限（パスワードによる入室制限）を説明します。

]]> 閲覧するのにパスワードの必要なページを secret.html 、パスワード入力の手前のページを main.html とします。

main.html にJavascriptを記述

<script type="text/JavaScript">
<!--
function enter(){
   password = prompt("パスワード入力","");
   if ( password != "" )location.href = password +".html";
}
// -->
</script>

HTML部分（ secret.html へのリンク部分）

<a href="javascript:enter()">こちら</a>

簡単ですね。
セキュリティーをかけるファイルの名前がパスワードになりますので、今回の場合は、secret がパスワードです。

注意

上記のmain.htmlとsecret.htmlは同じディレクトリに置いて下さい。
また、secret.htmlのURLがわかってしまうと、直接アクセスできてしまいます。




上田ハーローFX ]]> パスワードでログインさせる方法（入室制限） tag:test.webneta.net,2008://1.16 2006-09-06T07:09:32Z 2008-07-09T12:52:43Z 会員の向けの情報を掲載し、部外者に閲覧されたくない場合や、自分以外に見られたく... Homcom http://wife.nanbbs.jp/ 会員の向けの情報を掲載し、部外者に閲覧されたくない場合や、自分以外に見られたくないページがある場合、IDとパスワードで入室制限するのが一般的だと思います。
パスワードで入室制限する方法も何種類かあります。
今回は、手軽な上にセキュリティーもそこそこ高めな.htaccessファイルと.htpasswdを使ったユーザー認証（BASIC認証／ベーシック認証）の方法を紹介します。
ちなみにオンラインショッピングなどを行う場合に利用するには、BASIC認証では役不足です。気軽なセキュリティーと思って試してください。

]]> この方法はホスティングサーバーによって、可能な場合と不可能な場合がありますので、実践してみて不可能な場合は、ホスティング業者にお問い合せください。

ユーザー認証が必要なファイルがあるディレクトリに.htaccessファイルと.htpasswdを置きます。
メモ帳等のテキストエディタで作成し.htaccessと.htpasswdと名前を付けます。
Windowsのメモ帳ですと.htaccessと.htpasswdなど.（ドット）が一番最初についたファイル名をつけることができないので、適当な名前で保存し、FTPソフトでサーバーにアップ後FTPソフト上で名前を変更してください。

それぞれのファイルの記述内容は以下の通りです。それぞれ一番最後に改行を入れてください。

.htaccessファイル

AuthUserFile /home/sites/hogehogehoge/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter username and password"
AuthType Basic
require valid-user

上記の/home/sites/hogehogehoge/の部分は.htpasswdをおくディレクトリまでのフルパスを記述します。
不明な場合はサーバーの管理画面等で確認、もしくはホスティング業者にお問い合わせください。

.htpasswdファイル

CODE0:XXXXXXXXXXXXXXXX
HOGEHOGE:YYYYYYYYYYYYYYYY

.htpasswdファイルは「ユーザーID:暗号化されたパスワード」の形で記述されています。
改行して、ユーザーIDとパスワードを追加していくことが可能ですが、あまり多くなると、サーバーに負荷がかかりレスポンスが悪くなります。

パスワードの暗号化は、下記を利用してください。
パスワードを入れてください　



アトランティックフィナンシャルコーポレーション]]> Copyrightの西暦をJavascriptで表示 tag:test.webneta.net,2008://1.5 2006-09-01T00:46:32Z 2008-07-09T04:44:18Z このCopyright表記は西暦も一緒に表記されていることが多いですね。意外と１... Homcom http://wife.nanbbs.jp/ このCopyright表記は西暦も一緒に表記されていることが多いですね。意外と１年に１度西暦を修正するのが抜けているサイトをよく見かけます。
そこでJavascriptを利用して、自動的に西暦を取得し、表示する方法。

]]> 
Copyright 
<script type="text/javascript">
myDate = new Date();myYear = myDate.getFullYear();document.write(myYear);
</script>
WEBNETA GALLERY All Rights Reserved.

WEBNETA GALLERY All Rights Reserved.
こんな感じですね。




今なら、初年度の年会費無料(条件付）キャンペーン中！／シティカード]]>