setsuyaku-gohan.cocolog-nifty.com > my あんちょこ

my あんちょこ

◎画像を中央に入れる

<center><img title="画像タイトル" alt="画像タイトル" src="画像のURL" border="0" /></center>
画像を表示するためのimgタグの前後をcenterタグで括ると中央に配置される。
imgタグ内で、style="float: left; margin: 0px 5px 5px 0px;" のような記述がある場合は、float: left; を消すこと。

◎文字を中央に入れる
<center>文字</center>
表示したい文字をcenterタグで括る。

◎文字(文章)を枠で囲む
<div style="margin: 0.5em; border: 2px dotted #ff0000; background:#ffdab9; padding: 0.5em; width:110px; font-size:11px;">枠の中に入れる文字(文章)</div>
枠の線のタイプや色などは好みで変更する。上記のコードの枠は下記のようになる。
枠の中に入れる文字(文章)
margin: 0.5em; 枠の周りに入れる余白のサイズ(半文字分)
border: 2px dotted #ff0000; 枠線の太さ(2ピクセル)・線の種類(点線)・色(赤)
                      ※普通の線の時はsolid
background: #ffdab9; 枠内の背景の色(オレンジ)
padding: 0.5em; 枠と文字の間に入れる余白のサイズ(半文字分)
width:110px; 枠の幅
font-size:11px; 文字の大きさ(11ピクセル)

太字の部分を変更する。括弧内はこのコードで指定されてる内容。

◎画像にカーソルを乗せると説明が出るようにする
<img title="表示させたい文字" alt="画像タイトル" src="画像のURL" border="0" />
何も表示したくないときは、img title="" alt="" にする。

◎画像にリンクを貼る
<a href="リンク先のアドレス"><img title="画像タイトル" height="画像の高さ" alt="画像タイトル" src="画像のアドレス" width="画像の幅" border="0" /></a>
border="0"を入れると、画像に枠が付かない。

◎リンクを別窓で表示する
<a href="リンク先のアドレス" target="_blank">●●●</a>
リンク先のアドレスの後ろに、target="_blank"を追加する。
●●●の部分は、リンクを貼りたい画像の情報(上記参照)や文字(文章)などを入れる。

◎画像の文字の回り込みを途中で止める
<br clear="all" />
画像の横に回り込ませたい文章の終わりに<br clear="all" />を入れると、そこで回り込みが解除されて、以降の文章は画像の下の行から表示される。ただし、文章の長さに比べて画像が小さい場合は自然に解除される。

◎空白のコード
&nbsp;
スペースキーが反映されないときには、HTMLの編集画面から、空けたい文字数分空白のコード&nbsp;を書くと入れられることもある。

◎特殊文字
例:ハート♥♥♥の文字コードは&#9829;
特殊文字は文字コードを使うことによって表示することができる。


★★★★★★ ここからは★節約ごはん★独自の設定のあんちょこ ★★★★★★

◎画像に枠をつける
<p></p><center><span class="pola"><img タグ></span></center><p></p>
<p></p><center><span class="shadow"><img タグ></span></center><p></p>
"pola"    ポラロイド風枠
"shadow" 少し影の付いた枠

◎コードを記事に載せる
<pre>コード</pre>

◎スタイルシートの変更
<STYLE type="text/css">
<!--
ここにスタイルシートを記述する
-->
</STYLE>