風の吹くまま気の向くままに: CSS

2007年7月30日 (月)

[CSS]IE6とIE7でスタイルシートを分けるテクニック

前回からだいぶ更新をサボってしまいましたが、久々のアップです。

スタイルシートを適用してページを作成するとIEとFireFoxで期待したとおりの表示ができない場合がよくあります。またIEでもバージョン6と7でも違って表示される場合があります。

こんなときにはFireFoxでとりあえず表示できるようにしておいて、IE6とIE7でそれぞれ別のCSSを適用して表示を思ったようにするテクニックがあります。

IE6の場合には、セレクタの頭に「* html」とつけます。

たとえば、

* html .sample {
color: #00ff00;
}

とするとクラスが「sample」となっている部分の文字の色が緑で表示されるようになります。

IE7に適用したい場合は、セレクタの頭に「*:first-child+html」とつけます。

たとえば、

*:first-child+html .sample {
color: #0000ff;
}

とするとクラスが「sample」となっている部分の文字の色が青く表示されるようになります。

両方を同じスタイルシートに記述することでアクセスしたブラウザによって表示を変えることができます。

.sample {
color: #ff0000;
}
html .sample {
color: #00ff00;
}
*:first-child+html .sample {
color: #0000ff;
}

これは、FireFoxとSafariでアクセスした場合は赤、IE6は緑、IE7では青で表示されるようになります。

こんな↓感じになります。ブラウザを変えてアクセスしてみてください。

このテクニックは、主にpositionを利用した場合にアクセスしたブラウザで微妙に位置がずれるといった場合によく使うと思います。

注意ですが、記述された順番でCSSが適用されるので頭に何もつかないセレクタを最後にもってくると最後のCSSが適用されてしまうので意味がなくなってしまいます。ですのでくれぐれも順番に気をつけてください。

投稿者嶋　敦時刻 11時07分 CSS, パソコン・インターネット, 仕事 | 固定リンク | コメント (0) | トラックバック (0)

2006年12月19日 (火)

[JavaScript]JavaScriptで作るメニューパート3

前回までのJavaScriptで、ダイアログやメニューなどを作成してきましたが、実はIEの場合のみある条件であまりよろしくない状態になってしまうことがあります。
それは、「div」の指定で「position:absolute」の指定をして表示した場合に表示している領域の下に「select」タグがあるとそちらが表示されてしまうという現象が発生します。

実際に行ってみるとこんな感じになります。

このようにIEでは、「z-index」をいくら大きくしても下にある「select」タグの内容が表示されてしまいせっかく作ったダイアログやメニューが台無しになってしまいます。

しかし、これについて回避する方法があります。それは、「iframe」を使用することにより回避できるようになります。
「iframe」タグは、インラインフレームのことでHTMLのページの中にほかのページを埋め込むことができる機能です。

実際にやってみるとこのようになります。

これで、IEでも問題なくダイアログやメニューが表示できるようになります。

中身を見ていくと

HTMLの内容
<div id="topmenu" class="topmenu" style="width:6em;float:left;" onmouseover="showmenu( this, 'sample3' );" onmouseout="hiddenmenu( 'sample3' );">メニュー　⇒</div><div><select>
<option>選択１</option>
<option>選択２</option>
<option>選択３</option>
<option>選択４</option>
<option>選択５</option>
</select></div>
<iframe id="sample3" class="submenu" style="display:none;z-index:1000;height:6.6em;" frameborder="0" src="http://at-shima.cocolog-nifty.com/sample/menu3_iframe.html" onmouseover="onmousemenu( 'sample3' );" onmouseout="hiddenmenu( 'sample3' );"></iframe>

iframeで読み込んでいるHTMLの内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="http://at-shima.cocolog-nifty.com/css/menu.css" type="text/css" rel="stylesheet" />
</head>
<body style="margin:0px;padding:0px;">
  <div class="menuitem"><a class="menuitem" href="#" onclick="window.parent.closeMenu( 'sample3' );return false;">サブメニュー1</a></div>
  <div class="menuitem"><a class="menuitem"  href="#" onclick="window.parent.closeMenu( 'sample3' );return false;">サブメニュー2</a></div>
  <div class="menuitem"><a class="menuitem"  href="#" onclick="window.parent.closeMenu( 'sample3' );return false;">サブメニュー3</a></div>
  <div class="menuitem"><a class="menuitem"  href="#" onclick="window.parent.closeMenu( 'sample3' );return false;">サブメニュー4</a></div>
  <div class="menuitem"><a class="menuitem"  href="#" onclick="window.parent.closeMenu( 'sample3' );return false;">サブメニュー5</a></div>
</body>
</html>

「iframe」タグで読み込んでいる内容とHTMLの中身が変わっただけでスタイルシートやJavaScriptの内容は、[JavaScript]JavaScriptで作るメニューと同じ内容になっています。イガっているのは、メニューの表示部分で「iframe」を使用しているということだけになります。

「iframe」タグの中でメニューを閉じるために「window.parent.closeMenu( 'sample3' );」と呼び出していますがこれは、iframeを読んでいるウインドウ（トップメニューがあるほうのWindow）のJavaScriptを呼び出していることになります。

注意点としては、「iframe」タグで呼び出すHTMLの中身はそれ自体で表示されるHTMLとして記述する必要があるので「html」タグからきちんと記述する必要があります。当然別のHTMLとして記述するので必要なスタイルシートやJavaScriptもきちんと記述する必要があります。
あと、基本的には「iframe」タグを使用するのは、IEのみにしてほかのブラウザで表示する場合には、前回までの表示方法を使用することをお勧めします。「iframe」タグは別のHTMLを表示していることになるので2回サーバーに対してリクエストを発行することになりますし、表示の大きさなどをきちんと指定しないとスクロールバーが表示されたりします。これがすべてのブラウザで同じ場合はいいのですがIEとFireFoxで表示する大きさがちょっとずつ違っているので大変なことになります。

１つにまとめたサンプルです。

メニューのサンプル

投稿者嶋　敦時刻 00時06分 CSS, Javascript, パソコン・インターネット, プログラミング, 仕事 | 固定リンク | コメント (0) | トラックバック (0)

2006年12月 8日 (金)

JavaScript]JavaScriptで作るメニューパート2

今回は、前回に引き続きJavaScriptでメニューの作成を行いたいと思います。

前回の動的なメニューの作成では、マウスがメニューから外れてしまうと開いていたプルダウンメニューが勝手に消えてしまうので実際に使用していると使い勝手が悪かったりします。
そこで今回のメニューではプルダウンで開いたメニューが、メニューの領域以外の画面のほかの部分をクリックしたときに閉じるようにしてみたいと思います。

メニュー　⇒

中身をみていくと

HTMLの内容
<div id="topmenu" class="topmenu" style="width:6em;" onclick="showmenu2( 'sample1' );">メニュー　⇒</div>
<div id="sample1" class="submenu" style="display:none;">
  <div class="menuitem"><a class="menuitem" href="" onclick="alert( 'サブメニュー1' );closeMenu2();return false;">サブメニュー1</a></div>
  <div class="menuitem"><a class="menuitem" href="" onclick="alert( 'サブメニュー2' );closeMenu2();return false;">サブメニュー2</a></div>
  <div class="menuitem"><a class="menuitem" href="" onclick="alert( 'サブメニュー3' );closeMenu2();return false;">サブメニュー3</a></div>
  <div class="menuitem"><a class="menuitem" href="" onclick="alert( 'サブメニュー4' );closeMenu2();return false;">サブメニュー4</a></div>
  <div class="menuitem"><a class="menuitem" href="" onclick="alert( 'サブメニュー5' );closeMenu2();return false;">サブメニュー5</a></div>
</div>

読み込んでいるCSSファイルの内容（前回と同じです）
.topmenu {
border:solid 1px gray;
}

.submenu {
width: 10em;
background-color:white;
border:solid 1px gray;
position: absolute;
z-index:1000;
}
.menuitem {
width:100%;
white-space:nowrap;
border-bottom:solid 1px gray;
margin:0;
}

a.menuitem:link{
text-decoration:none;
}
a.menuitem:visited{
text-decoration:none;
}
a.menuitem:hover{
text-decoration:none;
background-color:lightcyan;
}
a.menuitem:active{
text-decoration:none;
background-color:lightcyan;
}

JavaScriptの内容
var menuobj = null;
var menu_id = null;

function showmenu2( id )
{
  var target = document.getElementById( id );

  target.style.display = '';

  menuobj = new Rect(0,0,0,0);
  menuobj.getElementRect( target );
  menu_id = id;
}

document.onmousedown = function( e )
{
if( ! menuobj  ) return;

  var target = document.getElementById( menu_id );

  if( target.display != 'none' )
  {
    var pt = null;
    if( document.all )
    {
      pt = new Point(event.x , event.y );
    }
    else
    {
      pt = new Point(e.pageX , e.pageY );
    }

    if( ! menuobj.PtInRect( pt ) )
    {
      menuobj = null;
      target.style.display = 'none';
    }
  }

  return true;
}

function  closeMenu2()
{
  var target = document.getElementById( menu_id );
  if( target )
  {
    target.style.display = 'none';
  }
  menuobj = null;
  menu_id = null;
}

function Rect( x, y, width, height )
{
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;

}

Rect.prototype.getElementRect = function( target )
{
  if( target.display != 'none' )
  {
    var top = target.offsetTop;
    var left = target.offsetLeft;
    var obj = target.offsetParent;
    for( ;; )
    {
      if( ! obj )
        break;

      top += obj.offsetTop;
      left += obj.offsetLeft;

      obj = obj.offsetParent;
    }

    this.x = left;
    this.y = top;
    this.width = target.offsetWidth;
    this.height = target.offsetHeight;

    return true;
  }

  return false;
}

Rect.prototype.PtInRect = function(point)
{
  if( this.x > point.x || (this.x+this.width ) < point.x )
   return false;
  if( this.y > point.y || (this.y+this.height ) < point.y )
   return false;

  return true;
}

Rect.prototype.toString = function()
{
  return 'X:' + this.x + ' Y:' + this.y + ' Width:' + this.width + ' Height:' + this.height;
}

function Point( x, y )
{
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function()
{
  return 'X:' + this.x + ' Y:' + this.y;
}

となっています。

中身を見ていくといつものようにプルダウンの部分を「display:none;」で隠しておいてトップメニューをクリックしたときにそれを表示るようにしています。
そしてプルダウンメニューの部分の領域を保存しておいて、マウスをクリックしたときにその保存しておいた領域外でイベントが発生してたときにプルダウンメニューを再び隠すということを行っています。

このJavaScriptの中で「Rect」と「Point」がありますがこれは「function」を用いてユーザー定義の独自のクラスを定義してます。
このように独自のクラスを用いることでオブジェクト指向な実装をすることが可能になっています。

１つにまとめたサンプルです。

メニューのサンプル

投稿者嶋　敦時刻 22時49分 CSS, Javascript, パソコン・インターネット, プログラミング, 仕事 | 固定リンク | コメント (0) | トラックバック (0)

2006年11月30日 (木)

[JavaScript]JavaScriptで作るメニュー

ちょっと前回の更新から時間が空いてしまいましたが今回は、JavaScriptでプルダウン形のメニューを作成します。

一番簡単なのは、最初にサブメニューの部分に「display:none;」を指定して隠していおいて、マウスのクリックイベントなどでメニュー部分を表示するタイプで

メニュー（ここをクリック）

という風になります。

もう少し高度になるとNiftyのトップページでも行っていますが、メニューの部分にマウスカーソルを持っていくと新たなメニューが表示されてそこから新しい選択肢を選択できるというものです。実際にデモしてみると

という感じになります。

こちらは、マウスがメニューの上に来たときにonmouseoverイベントでメニューを表示して、onmouseoutイベントでタイマーを発生させてある程度の時間メニューからマウスが離れていたらメニューを消すような処理を行っています。

中身を見ていくと

HTMLの内容
<div id="topmenu" class="topmenu" onmouseover="showmenu( this, 'sample2' );"  onmouseout="hiddenmenu( 'sample2' );">メニュー　⇒</div>
<div id="sample2" class="submenu" style="display:none;" onmouseover="onmousemenu( 'sample2' );" onmouseout="hiddenmenu( 'sample2' );">
  <div class="menuitem"><a class="menuitem" href="" onclick="closeMenu( 'sample2' );return false;">サブメニュー1</a></div>
  <div class="menuitem"><a class="menuitem"  href="" onclick="closeMenu( 'sample2' );return false;">サブメニュー2</a></div>
  <div class="menuitem"><a class="menuitem"  href="" onclick="closeMenu( 'sample2' );return false;">サブメニュー3</a></div>
  <div class="menuitem"><a class="menuitem"  href="" onclick="closeMenu( 'sample2' );return false;">サブメニュー4</a></div>
  <div class="menuitem"><a class="menuitem"  href="" onclick="closeMenu( 'sample2' );return false;">サブメニュー5</a></div>
</div>

読み込んでいるCSSファイルの内容
.topmenu {
border:solid 1px gray;
}

.submenu {
width: 10em;
background-color:white;
border:solid 1px gray;
position: absolute;
z-index:1000;
}
.menuitem {
width:100%;
white-space:nowrap;
border-bottom:solid 1px gray;
margin:0;
}

a.menuitem:link{
text-decoration:none;
}
a.menuitem:visited{
text-decoration:none;
}
a.menuitem:hover{
text-decoration:none;
background-color:lightcyan;
}
a.menuitem:active{
text-decoration:none;
background-color:lightcyan;
}

JavaScriptの内容
var timer_id = null;
function showmenu( parent, id )
{
  var target = document.getElementById( id );
  var top = 0;
  var left = 0;
  var obj = parent.offsetParent;
  for( ;; )
  {
    if( ! obj )
      break;

    top += obj.offsetTop;
    left += obj.offsetLeft;

    obj = obj.offsetParent;
  }

  target.style.top = top + parent.offsetTop;
  target.style.left = left + parent.offsetLeft + parent.offsetWidth;
  target.style.display = '';
  if( timer_id )
  {
    clearTimeout( timer_id );
    timer_id = null;
  }
}

function onmousemenu()
{
  if( timer_id )
  {
    clearTimeout( timer_id );
    timer_id = null;
  }
}

function hiddenmenu(id)
{
  timer_id = setTimeout( "closeMenu('"+id+"')", 400 );
}

function closeMenu(id)
{
  var submenu = document.getElementById( id );
  submenu.style.display = 'none';
  timer_id = null;
}

となっています。

注意点ですが、setTimeout関数で別の関数を呼び出すときに単純にsetTimeout( "closeMenu("+id+")", 400 )とすると文字列を渡していたidが受け取り側のcloseMenuでは、オブジェクトととして渡されてくるのでうまく動きません。そのためsetTimeout( "closeMenu('"+id+"')", 400 )という風にidを「'（シングルクォート）」でくくる必要があります。

前回と同様に１つにまとめたサンプルになります。

メニューのサンプル

投稿者嶋　敦時刻 10時13分 CSS, Javascript, パソコン・インターネット, プログラミング, 仕事 | 固定リンク | コメント (0) | トラックバック (0)

2006年11月16日 (木)

[CSS&JavaScript]CSSでダイアログの作成パート2

今回は、前回パート１で作成したダイアログをドラッグ＆ドロップで画面上を動くようにしたいと思います。

名前
パスワード

といっても難しいことはなく、JavaScriptのマウスイベントを利用してスタイルシートで指定している位置を動かすということを行っています。

まずは、ダイアログの作成でこれは前回のものを利用します。ダイアログを動かすためにスタイルのpositionをabsoluteにすることを忘れないようにしてください。この指定をしないと動きません。

ダイアログの部分
<div class="dlg" id="dlg" style="display: none;position:absolute;">
<div id="dlghead" >
<div class="dlghead1"></div>
<div class="dlghead2"></div>
<div class="dlghead3"></div>
<div class="dlghead4"><a onclick="close_dialog();return false;" href="#">×</a></div>
</div>
<div class="dlgbody">
<table style="margin:0px 5px;padding:2px 5px;">
<tr>
   <th style="text-align:left;">名前</th>
   <td><input type="text" size="30"></td>
</tr>
<tr>
   <th style="text-align:left;">パスワード</th>
   <td><input type="password" size="30"></td>
</tr>
</table>
<input type="button" value="登録する" onclick="close_dialog();return false;" style="margin-left:5px">
</div>
</div>

続いては、これを動かすためのJavaScriptを作成します。

JavaScriptの部分
var target;var offsetX;var offsetY;　①

function mouseDown( e )　②
{
  target = document.getElementById( 'dlg' );
  target.style.cursor = 'move';

  if( e )
  {
    offsetX = e.layerX;offsetY = e.layerY;
  }
  else if( event )
  {
    offsetX = event.offsetX;offsetY = event.offsetY;
  }

  return false;
}

function mouseMove( e )　③
{
  if( ! target ) return false;

  var x;var y;
  if( e )
  {
    x = e.pageX;y = e.pageY;
  }
  else if( event )
  {
    x = event.clientX + document.body.scrollLeft;
    y = event.clientY + document.body.scrollTop;
  }
  x -= offsetX;y-=offsetY;
  target.style.left = x; target.style.top = y;
  return false;
}

function mouseUp( e )　④
{
  if( ! target ) return false;
  target.style.cursor = 'auto';
  target = null;
}

function init_page()　⑤
{
  var dialogHead = document.getElementById( 'dlghead' );
  dialogHead.onmousedown= mouseDown;
  document.onmouseup= mouseUp;
  document.onmousemove= mouseMove;
}

window.onload = init_page;　⑥

解説していきます。

①は、ダイアログとその位置を保存するための変数です。これがないと動かしているときの位置などがわからなくなってしまいます。

②は、ダイアログのタイトルバーの部分をクリックしたときに発生するイベントです。これ以降マウスボタンをあげるまで動かすことができるようになります。中身は、マウスカーソルの形を変更して動かせるようにユーザーにわかってもらえるようにして、クリックされたダイアログのオブジェクトを①で用意した変数に代入しています。同様にイベントの位置も変数に代入しています。

③は、実際にダイアログを動かしている部分でスタイルの位置指定をマウスを動かした分量だけ変化させています。if( e )とelse if( event )は、ブラウザごとに位置の算出方法を変えているということになります。

④は、マウスボタンを離してダイアログの移動を終了させるときに呼び出されます。中身は、マウスカーソルを通常の状態に戻して、覚えていたダイアログのオブジェクトをクリアしています。

⑤は、この画面が表示されたときに呼び出される関数で、標準のイベントハンドラを定義している関数に置き換えています。最初の2つは、ダイアログのタイトル部分でマウスが押されたときのイベントを置き換えています。

⑥は、実際にこの画面が表示されたときに⑤を呼び出すための関数になります。

前回と同様に１つにまとめたサンプルになります。

ダイアログのサンプル

という感じで、スタイルシートとJavaScriptでウインドウを画面内に作成してそれを動かすということができるようになりました。中身を知らないと難しい気がしますが実際にやってみるとそんなには難しいことは行っていません。あとは、いろいろ試してみてください。

投稿者嶋　敦時刻 00時02分 CSS, Javascript, パソコン・インターネット, プログラミング, 仕事 | 固定リンク | コメント (0) | トラックバック (0)

2006年11月 1日 (水)

[CSS&JavaScript]CSSでダイアログの作成パート1

今回は、ポップアップするUIの作成です。divタグにスタイルを適用することで、簡単にポップアップするようなUIを作成することができます。

ここをクリック→

あとはこれの応用でうまいことレイアウトを作っていくと

名前
パスワード

という感じでダイアログのようなUIを画面上に表示することができます。

やっている内容は、前回のタブの応用でダイアログ的なUIを作成していて、最初にHTMLが表示されたときのスタイルに「display:none」を指定して表示されないようにしています。それでボタンが押されたタイミングでそのスタイルをはずしているだけです。あと、その場で表示するために「position:absolute」を指定して画面の指定した位置にダイアログを表示するようにしています。

HTMLの内容
<div class="dlg" id="dlg" style="display: none;position:absolute;">
<div id="dlghead" >
  <div class="dlghead1"></div>
  <div class="dlghead2"></div>
  <div class="dlghead3"></div>
  <div class="dlghead4"><a onclick="close_dialog();return false;" href="#">×</a></div>
</div>
  <div class="dlgbody">
   <table style="margin:0px 5px;padding:2px 5px;">
    <tr>
     <th style="text-align:left;">名前</th>
     <td><input type="text" size="30"></td>
    </tr>
    <tr>
     <th style="text-align:left;">パスワード</th>
     <td><input type="password" size="30"></td>
    </tr>
   </table>
   <input type="button" value="登録する" onclick="close_dialog();return false;" style="margin-left:5px">
</div>
</div>

読み込んでいるCSSファイルの内容
div.dlg a:link{
color:white;
}
div.dlg a:visited{
color:white;
}
div.dlg a:hover{
color:white;
} div.dlg a:active{
color:white;
}
div.dlghead1{ BORDER-RIGHT: gray 1px solid; MARGIN: 0px 3px; OVERFLOW: hidden; BORDER-LEFT: gray 1px solid; HEIGHT: 1px; BACKGROUND-COLOR: blue; }
div.dlghead2{ BORDER-RIGHT: gray 1px solid; MARGIN: 0px 2px; OVERFLOW: hidden; BORDER-LEFT: gray 1px solid; HEIGHT: 1px; BACKGROUND-COLOR: blue; }
div.dlghead3{ BORDER-RIGHT: gray 1px solid; MARGIN: 0px 1px; OVERFLOW: hidden; BORDER-LEFT: gray 1px solid; HEIGHT: 2px; BACKGROUND-COLOR: blue; }
div.dlghead4{ BORDER-RIGHT: gray 1px solid;BORDER-LEFT: gray 1px solid;margin:0px 0px;padding:0px 0px;TEXT-ALIGN: right;font-size:0.8em;BACKGROUND-COLOR: blue;}
div.dlgbody {BORDER-RIGHT: gray 1px solid;BORDER-LEFT: gray 1px solid;BORDER-RIGHT: gray 1px solid;BORDER-bottom: gray 1px solid;background-color:white; }

JavaScriptの内容
function pop_show()
{
  var menu = document.getElementById( 'menu' );
  if( menu )
  {
    menu.style.display = '';
  }
}

function pop_close()
{
  var menu = document.getElementById( 'menu' );
  if( menu )
  {
    menu.style.display = 'none';
  }
}

function show_dialog( x, y, width )
{
  document.getElementById( 'dlg' ).style.display = '';
  document.getElementById( 'dlg' ).style.width = width ;
}

function close_dialog()
{
  document.getElementById( 'dlg' ).style.display = 'none';
}

ココログでは、スタイルシートやJavaScriptタグが使えないみたいなので外部ファイルとしてこれらの内容を読み込んでいますがこれらを同一ファイル内に正しく書くけばうまく表示されます。

ダイアログのサンプル

次回は、このダイアログを動かしたいと思います。

投稿者嶋　敦時刻 23時05分 CSS, Javascript, プログラミング, 仕事 | 固定リンク | コメント (0) | トラックバック (0)

2006年10月17日 (火)

[CSS]スタイルシートだけでふちを丸くするタブを作る

よくタブのUIを作るときに左右に丸いふちの画像を配置してそれにはさむように文字を書き込みますが、divタグとそれに対するスタイルを指定することによりタブ見たいなUIを作ることができます。

たとえば

タブ１

こんな感じになります。

これを複数使うことで画像を使わないタブができます。

タブ１

タブ２

タブ３

あとは、スタイルの色に変化をつけることで選択されているタブかどうかとか利用できるかどうかといったことが簡単にできます。

やっていること自体は、表示する領域の大きさをちょっとづつ変化させていってそれの背景色やふちに色をつけていくという単純なものです。

先頭にあるdivタグの『float』は、続けて作成するタブを左側に持っていくためにあり、そのほかのスタイルの属性はタブの大きさとタブ同士の間隔を決めています。文字が多い場合などは、widthの値を増やせばタブが大きくなっていきます。

これの応用で、

タブ２

といった丸い表示領域を作成することができます。これは文字を表示するところまでは同じで、表示した後でdivタグの順番を逆に繰り返すということでできちゃいます。

スタイルの変更だけでいろいろできるので、JavaScriptで色を変更させたり、疑似クラスのhover（マウスが表示領域の上に来た場合）やactive（マウスをクリックした場合）を利用して動的なページを作ることができます。

投稿者嶋　敦時刻 17時45分 CSS, パソコン・インターネット, プログラミング, 仕事 | 固定リンク | コメント (0) | トラックバック (0)

その他のカテゴリー

CSS | Javascript | PHP | Postgresql | おすすめサイト | パソコン・インターネット | プログラミング | ライブ | 仕事 | 旅行・地域 | 日記・コラム・つぶやき | 書籍・雑誌 | 趣味 | 車 | 音楽

風の吹くまま気の向くままに

自分らしく生きるために会社を興しました

携帯URL

最近のコメント

最近のトラックバック

LINK

バックナンバー

カテゴリー

PR

track word

2007年7月30日 (月)

[CSS]IE6とIE7でスタイルシートを分けるテクニック

2006年12月19日 (火)

[JavaScript]JavaScriptで作るメニューパート3

2006年12月 8日 (金)

JavaScript]JavaScriptで作るメニューパート2

2006年11月30日 (木)

[JavaScript]JavaScriptで作るメニュー

2006年11月16日 (木)

[CSS&JavaScript]CSSでダイアログの作成パート2

2006年11月 1日 (水)

[CSS&JavaScript]CSSでダイアログの作成パート1

2006年10月17日 (火)

[CSS]スタイルシートだけでふちを丸くするタブを作る

その他のカテゴリー

バナー

2009年11月
日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30