html-css
cssで印刷されないボタンを画面に表示する
cssを記述しているところに以下を追加 @media print { .noprint{ display:none; }}あとはタグのclassでnoprintを指定するだけです。 |
borderを指定するとタグの実サイズが変わる
divタグは border:none; がデフォルトとなる。この状態でwidth:100pxとすると、divタグの端から端までは100pxだが、 border:solid 1px red; と指定するとdivタグの端から端までのサイズは102pxになる。またブラウザによっても動作がことなり、widthで指定されているサイズの内側に枠を設けるか、外側に設けるかでことなる。 |
htmlとスタイルシートでバーを表示する
三国志大戦用のサイトビルダーでも利用した方法。
１のサイズを16pxとし最大を８とした場合、最初のdivの横幅を16px×8の128pxにする。これが最大値を示すことになる。 もうひとつ入れ子にdivをつくってその背景にバーの画像を指定する。 横幅は16pxを１として換算する。気をつけなければいけないのは、入れ子のdivで高さ(height)を指定することと、フォントサイズ(font-size)を０にすること。そして値として半角スペース（ ）を指定すること。これらが揃ってないと表示されない場合がある。 <div style="width:128px; background:url('http://www.imomushi.com/img/3594/cost_bk.png');"> <div style="width: 32px; height:16px; font-size:0px; background:url('http://www.imomushi.com/img/3594/cost_bk.png');"> </div> </div> 最近は外部サイトへbackground:url('***')で背景を指定することができなくなってきているのでこの方法がいつまで有効なのかはわからない。現にGoogle Siteでは利用できないし、Livedoorブログでも再編集するとdivが消える。 素直にスクリプトを組み込むほうがいいかもしれない。 |
ページ全体のセンタリング
IEとその他のブラウザで動作が違い困ったものです。
<body style="text-align:center;">
<div style="width: 90%; border:solid 1px gray;text-align:left;margin: 0px auto 0px;">
センタリング
</div>
</body>
IE8とFF、Chromeに対応です。
|
width height 100%
css で 縦横 100% で表示するcss。
横は width 100% で思い通りに100%で表示される。
縦はうまくいかない。
cssで
html,body{
height: 100%;
}
として、html は
<body>
<table style="width: 100%;height:100%">
</table>
</body>
のようにすると縦も100%に設定できる。
<body>
<table style="width: 90%;height:100%">
</table>
</body>
なんかにすると最近よく見るブログのような感じ。
<body>
<table style="max-width: 1000px; min-width: 800px; width: 800px;height:100%">
</table>
</body>
とすれば少し動的なデザインになる。
|
1-6 of 6