株式会社オンラインコンサルタントが運営する技術メモです
タグのリンク先を、Javascriptで動的に書き換えるスクリプトサンプルです。
//例 リンク先をtest.htmlからtest2.htmlに書き換え
<a href="test.html" id="test_target">テスト</a>
<script>
var testTarget=document.getElementById('test_target');
testTarget.href="test2.html";
</script>
リンク先は、test2.htmlになっています。
さて、前回リストのCSSのブラウザ間の違いについて述べてみました。
リストのCSS ブラウザ間の違い
リストのCSS ブラウザ間の違い2
今回は、悩ましい！リストのマーカー（箇条書きの頭につく黒い点などのこと）の画像の位置調整についてまとめてみます。
まず、画像をリストのマーカーに画像を指定してみます。
list-style-image:url(画像へのリンク)
でマーカーに画像が指定できます。
やってみましょう。
<style type="text/css">
<!--
ul {
padding-left: 10px;
margin-left: 10px;
list-style-image:url(images/yaji_red.gif)
}
-->
</style>
</head>
<body>
リストだよー。
<table><tr>
<td style="width:70px; background-color:#FFCC33">
<ul class="test1">
<li>ナルト
<ul>
<li>ナルト連弾</li>
<li>ナルトキック</li>
</ul>
</li>
<li>さすけ</li>
<li>さくら</li>
</ul>
</td>
</tr></table>
</body>
</html>
Firefoxのスクリーンショットです。（IE6でもほぼ同じ）
ネストされているリスト（子供のリスト：ナルト連弾やナルトキックの部分）のマーカーを、できれば文章の縦位置の真ん中に持ってきたいとします。
残念ながら、これを指定する方法はないようです。![[sad]](https://i1.wp.com/oc-technote.com/wp-content/themes/oc/assets/images/face/sad.png?w=525&ssl=1)
divで背景に画像を設定して、padding や背景位置の指定でなんとかするようにはいかないのです。
listタグのマーカーの位置を変更するために設けられているプロパティはlist-style-position にて、outsideかinsideを指定するしかありません。
参考：リストのCSS ブラウザ間の違い2
heightやvertical-alignを仕込んでみても、縦に長い画像をマーカーに仕込んでみても無駄です。
縦に長い画像を仕込んだ場合、マーカーの画像が終わったところからリストのコンテンツが始まります。
横方向に動かすことは、小細工でできます。
何かというと、たとえばタグなどを仕込み、そのタグの配置を指定します。
ただし、縦方向には効きません。
縦方向にマーカーを動かすことはどうやらできないようです。
コンテンツの場所を変更しても、マーカーが一緒にくっついてくるからです。
横方向に、マーカーとコンテンツを離すことができるだけです。
<style type="text/css">
<!--
ul {
padding-left: 10px;
margin-left: 10px;
list-style-image:url(images/yaji_red.gif)
}
a{
display:block;
padding-top:20px;
margin-top:20px;
paddhing-bottom:20px;
margin-bottom:20px;
padding-left:20px;
}
-->
</style>
</head>
<body>
リストだよー。
<table><tr>
<td style="width:70px; background-color:#FFCC33">
<ul class="test1">
<li>ナルト
<ul>
<li><a>ナルト連弾</a></li>
<li>ナルトキック</li>
</ul>
</li>
<li>さすけ</li>
<li>さくら</li>
</ul>
</td>
</tr></table>
</body>
</html>
上記HTMLでナルト連弾とかいてあるところにタグを仕込み、タグに上下・左のマージンやパディングを指定したところ。
マーカーは縦方向にコンテンツをずらしてもくっついてきます。
横方向にだけ、マーカーからコンテンツを離すことができます。
ホームページのドメインをほかのドメインに移行した、コンテンツの場所が変更になった、などさまざまな理由で、ページに来たユーザーをほかのページへジャンプさせたいことがあります。
それをリダイレクトと言います。
リダイレクトさせるには、次のようにします。
両方とも、HTMLの
～ タグの間に書いてください。＜meta＞タグ使用例（http://www.onlineconsultant.jp/はジャンプしたいURLに変えてください。
<meta http-equiv="Refresh" content="0;URL=http://www.onlineconsultant.jp/">
javascript使用例
<SCRIPT type="text/javascript">
<!--
setTimeout("link()", 0);
function link(){
location.href='http://www.onlineconsultant.jp/';
}
-->
</SCRIPT>
関連：
リダイレクト Javascriptとmetaタグどちらが早い
拡張子とは、ファイルの種類を識別するために、ファイル名の後ろのピリオドの後につけられる文字列のことです。
たとえば、エクセルのファイルであればたとえば「test」という名前のファイルだとtest.xlsという名前になり、.xlsが拡張子。
拡張子辞典などというものもあります。
拡張子辞典・解説 CCfA.info
http://ccfa.info/
サイトマップを作成する、のページでも紹介したサイトマップツールですが、リンク切れのチェックにも使えます。
ローカルにあるファイルのリンクチェックはほかのツールでできると思いますが、Web上でできるものは重宝しますよね。![[smile]](https://i0.wp.com/oc-technote.com/wp-content/themes/oc/assets/images/face/smile.png?w=525&ssl=1)
まずは、下記のツールをIEで開いてください。
http://www.auditmypc.com/xml-sitemap.asp
便利です！