ブログやHPで使えるHTMLタグ【小技集】

何かと使える便利な小技を集めました。

 

 

 

 

 

文字や画像などの位置を指定する

通常、位置の指定をせずにページに配置した文字や画像などは、勝手に左寄せに表示されると思います。

ページのレイアウトによっては左寄せでは困ることもありますよね。これを、中央、右寄せ、に指定する方法です。もちろん、左寄せに指定することも可能です。

align属性を使用します。

align=”位置”

位置は、

・右寄せ   right

・中央      center

・左寄せ   left

で指定します。

これを、文字や画像の要素の< >内に入れます。

また、ブロック要素を利用した位置の指定なら、

画像に、文字に、表に、、、と、

たくさんの要素それぞれにalign=”位置”を記入しなくても、

位置を指定したい一まとまりを<div align=”位置”></div>で囲むことにより、可能です。

<div align=”位置”>文字や画像など</div>

例1)テーブル内の文字をセンタリングする

<table border=”1″ width=”350″ height=”200″><tr><td>
<div align=”center”>文字を中央配置にしました。</div>
</td></tr></table>

文字を中央配置にしました。

例2)テーブル内の文字を右寄せにする

<table border=”1″ width=”350″ height=”200″><tr><td>
<div align=”right”>文字を右寄せにしました。</div>
</td></tr></table>

文字を右寄せにしました。

 

透過テーブル

ちょっと高度なテクニック。
でも難しくはありません。

透けるテーブルを作ることが出来ます。

style属性に filter:alpha(opacity=数値1);-moz-opacity:数値2;opacity:数値3;  を使って透明度を指定します。

数値は0が完全な透明、100が全く透けない、になります。

ここで、数値1、数値2、数値3について

・数値1は、IEで表示する場合の透明度です。
0~100で指定、0が完全な透明、100が不透明。

・数値2は、NNとFirefoxで表示する場合の透明度です。
0~1の小数で指定、0が完全な透明、1が不透明。

・数値3は、Opera、Safari、GoogleChromeなどwebkit系の透明度です。
0~1の小数で指定、0が完全な透明、1が不透明。

この3種類の数値とも設定しておかないと、

サイトを閲覧する環境によっては透過して見ることが出来ません。

よく、数値1のalpha(opacity=~ のみ設定されているパターンを見かけますが、

最近では、スマホやタブレット端末の普及に伴い、

Safariや、GoogleChromeを利用しているユーザーも増えてきていると思うので

数値2、数値3まで指定してあげましょう。

例)模様の背景に、半透明化させた真っ白なテーブル

<table style=filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;border-width:1;background:#0066FF” width=”350″ height=”200″>
<tr><td>
・alpha(opacity=50)<br>
・-moz-opacity:0.5<br>
・opacity:0.5<br>
に指定しています。<br>
いずれも最大値半分の透過度。
</td></tr></table>

・alpha(opacity=50)
・-moz-opacity:0.5
・opacity:0.5
に指定しています。
いずれも最大値半分の透過度。

なかなかお洒落です。

ここで、文字も透過することに注意してください。

はじめから薄い色にしていると見えにくくなってしまいます。

タイトルとURLをコピーしました