Web Artisan Blog - ウェブアルチザンブログ:6月 2004

a:hover（アンカーテキストを動的に変化）

JavaScript・XHTML・CSS

2004年06月28日

a:hoverを使う事で、
「アンカーの上にマウスを乗せた時に、アンカーの色などの属性を動的に変化させる」
という動きを、Javascriptを使用せずに実現する事が出来る。

下記は、当サイト”Categories”部のCSS定義。

#sidebar-a a {
font-weight : normal;
font-size : 90%;
display : block;
color : #ffffff;
text-decoration : none;
padding : 4px 3px;
margin : 0 0 2px;
border : 1px solid #800000;
background-color : #800000;
}
#sidebar-a a:hover {
border : 1px solid #808080;
background-color : #cccccc;
color : #b22222;
}

0 Comment 0 Trackback Permalink

SEO対策の基本中の基本として、
キーワードをtitleタグとh1タグに埋め込むというのがあるが、
この対策と画面の見栄えを考えた場合、ネックになるのが、h1タグである。

h1タグのデフォルト属性では、文字の大きさも大き過ぎるし、
CSSで文字サイズや文字色を変える事で、ごまかす事はできるが、
この方法では、
検索エンジンが「スパムサイト」
（SEO対策で不正にレイアウト調整しているとみなされ検索対象から外す）
と判断するとの説もある。

そこで、現状の対策として他サイトでも行われている方法の一つに、
バナーのimgタグとしてh1タグを持つ方法がある。

下記は、当サイトのソース。

・h1タグ部分

<h1 id="banner">
<a href="http://www.res-system.com/weblog/"
accesskey="1" title="WEB Artisan">
<img
src = "http://www.res-system.com/weblog/skins/rssskin/img/logo.gif"
alt="WEB Artisan" title="WEB Artisan" width="728" height="90" />
</a>
</h1>

・CSS側のbanner部指定

#banner {
width : 728px;
float : none;
border : 0 solid #808080;
margin-left : auto;
margin-right : auto;
margin-top : 0;
margin-bottom : 0;
padding : 0;
font-size : 180%;
background-color : #ffffff;
text-align : center;
}

まず、h1タグとしてTOPページへのaタグ付きのimgタグを定義する。
ここで重要なのは、imgタグにalt属性を指定し、
そこにキーワードを定義している点。（当サイトの場合、”WEB Artisan”）
また、a、imgタグのtitle属性にもキーワードを指定する事も必要。
更に、h1タグにはid属性を持ち、
CSS側で、そのid属性に対してのサイズ指定などの設定。
これにより、
レイアウト的にもhtml的にも自然で、
且つSEOにも有効なhtml定義となる。

1 Comment 0 Trackback Permalink

Formの要素を配列にした場合のJavaScriptの書き方

JavaScript・XHTML・CSS

2004年06月24日

Formの要素を配列にした場合のJavaScriptの書き方

Formの要素を配列で指定

<input type="text" name="abc[0]">
<input type="text" name="abc[1]">
<input type="button" value="test" onClick="alert(form1.abc[1].value)">

JavaScriptでform1.abc[1].valueと参照すると下記の様なエラーが発生
※abc.0はNULLまたはオブジェクトではありません
<hr>

※解決方法（textとradio)
＞続きを読む・・・Formの要素を配列にした場合のJavaScriptの書き方

0 Comment 1 Trackback Permalink

他サイトの引用・参照HTMLタグ

JavaScript・XHTML・CSS

2004年06月24日

○<blockquote>

長い文章を引用する場合に使用。
ブロック要素として定義。
XHTML1.1としては、<blockquote>内に<br />による改行は不可、
文字を埋め込む場合は<p>タグの挿入が必要。

↓使用例

Yahoo!JAPAN から自分のサイトにリンクをはってもらう方法は大まかに言うと、・スポンサーサイト（PPC広告＝キーワード連動型クリック課金広告）・Yahoo!登録サイトとの一致（ディレクトリ登録≒ビジネスエクスプレス）・ページとの一致（ロボット型検索エンジン＝SEO が効果的）の3つの方法があり、この順番で検索結果に表示されます。

ソース：
<blockquote><p>Yahoo!JAPAN から自分のサイトにリンクをはってもらう方法は大まかに言うと、・スポンサーサイト（PPC広告＝キーワード連動型クリック課金広告）・Yahoo!登録サイトとの一致（ディレクトリ登録≒ビジネスエクスプレス）・ページとの一致（ロボット型検索エンジン＝SEO が効果的）の3つの方法があり、この順番で検索結果に表示されます。</p></blockquote>

○<q>

短い文章を引用する場合に使用。
インライン要素として定義。

↓使用例
平均すると毎月2％の割合で「ディレクトリの壁」が高くなっていることになります

ソース：
<q>平均すると毎月2％の割合で「ディレクトリの壁」が高くなっていることになります</q>

○<cite>

文章の引用でなく、サイト名・文書名等を引用する場合に使用。
インライン要素として定義。

↓使用例
Japan.internet.com

ソース：
<cite>Japan.internet.com</cite>

「Japan.internet.com」

※<blockquote>等を枠付きにしたい場合は、CSSで定義。
（例）
. blockquote {
border: #000000 1px dotted;
}

0 Comment 0 Trackback Permalink

HTMLで線や円などのベクトル図形を表示する

JavaScript・XHTML・CSS

2004年06月22日

VML(Vector Markup Language)によって、実現します。

例：円

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML TEST</title>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:oval style="width:40; height:40"
fillcolor="#ffcccc" strokecolor="red" strokeweight="1" />
</body>
</html>

0 Comment 0 Trackback Permalink

CSSによるアンカータグの横並び縦並び（brタグ無しで改行）

JavaScript・XHTML・CSS

2004年06月21日

CSSで、
アンカータグを横並びにするか縦並びするか（改行するかしないか）の調整を行うには、
「display」の”block”か”inline”で調整する。

block（ブロック要素）とinline（インライン要素）の意味は、
HTML文書の基本となるところなので、下記リンクで理解しておく。
「ブロックレベル要素とインライン要素」

つまり、CSSによるアンカータグの横並び縦並びでは、
block＝改行あり
inline＝改行なし
という事で、CSSに定義する。

（例）
当サイトの「Category」部分はアンカータグ縦並び、
カレンダー部は、アンカータグ横並びとなっている。
下記は当サイトのCSS定義。

★Category部

#sidebar-a a {
font-weight : normal;
font-size : 90%;
display : block;
color : #ffffff;
text-decoration : none;
padding : 4px 3px;
margin : 0 0 2px;
border : 1px solid #8b0000;
background-color : #b22222;
}

★カレンダー部

#calendar-side a {
font-size : 90%;
display : inline;
color : #336699;
padding : 2px;
text-decoration : none;
margin : 0 0 25px;
background-color : #f5f5f5;
border : 0 solid #808080;
font-weight : bold;
}

0 Comment 0 Trackback Permalink

XHTMLではbrタグによるレイアウト調整はよくない

JavaScript・XHTML・CSS

2004年06月21日

今後、標準となり得るXHTMLでのコーディングにおいては、
従来のHTMLコーディングで行っていたやり方を禁じている事が多い。

その一つに、brタグの改行によるレイアウト調整がある。
今までは、brタグを連発して各項目間のすきま調節などを行ってきたが、
XHTMLでは、brタグを過度に連続して記述すべきでないとされている。

そのような場合は、CSS側でpaddingなどで調節する。

※HTMLで<BR>・<br>とされていた改行タグは、
XHTMLでは<br />となり、小文字でbrの後ろに「半角スペース＋/」が必要。

0 Comment 0 Trackback Permalink

XHTML、CSSのレイアウト調整がズレる対策

JavaScript・XHTML・CSS

2004年06月20日

BLOGサイトの定番的なレイアウト、
当サイトで言うと、
左側メニュー・右側コンテンツの様なレイアウトを、
CSSの「float:left、right」で調整した場合、
左右の高さ（height）が対照でない為、
レイアウトがズレる（テキストが回り込む）場合がある。

このような場合は、「clear」で回り込みの解除を行わなくてはいけない。

clear: left;（左側回り込み解除）
clear: right;（右側回り込み解除）
clear: both;（両側回り込み解除）

ちなみに、
htmlのtableタグによるレイアウト調整に慣れてしまっている場合、
tableの1行目→左→右、
tableの2行目→左→右、
の様に、
上から下、左から右というhtml文書構造で定義しなくてはならないと考えてしまいがちだが、
CSSの「float」等を使用することで、
文書構造に囚われず、レイアウト調整する事が出来る。

※当サイトは、html文書構造はコンテンツ（右）→メニュー（左）
見た目は左→右。

0 Comment 0 Trackback Permalink

AmazonライブリンクをXHTMLに表示させる

JavaScript・XHTML・CSS

2004年06月09日

Amazonライブリンクを挿入するには、
Amazonサイトで生成されるコードを埋め込むだけでいいんですが、
これが厄介な事に、iframeタグ付きのhtmlコードで生成され、
このコードをXHTML1.1にそのまま貼り付けてしまうと、
W3CのValidatorで鬼のようにエラーが出ます。。。
（W3C的には無茶苦茶です。。）

これに対応するにはどうしたらいいか？？
生成されたコードをXHTML1.1に合わせて修正するか・・。
＞続きを読む・・・AmazonライブリンクをXHTMLに表示させる

0 Comment 0 Trackback Permalink