html-css
cssで印刷されないボタンを画面に表示する
cssを記述しているところに以下を追加 @media print { .noprint{ display:none; } } あとはタグのclassでnoprintを指定するだけです。 |
borderを指定するとタグの実サイズが変わる
border:none; がデフォルトとなる。この状態でwidth:100pxとすると、divタグの端から端までは100pxだが、 border:solid 1px red; と指定するとdivタグの端から端までのサイズは102pxになる。またブラウザによっても動作がことなり、widthで指定されているサイズの内側に枠を設けるか、外側に設けるかでことなる。 divタグは |
htmlとスタイルシートでバーを表示する
三国志大戦用のサイトビルダーでも利用した方法。 1のサイズを16pxとし最大を8とした場合、最初のdivの横幅を16px×8の128pxにする。これが最大値を示すことになる。 もうひとつ入れ子にdivをつくってその背景にバーの画像を指定する。 横幅は16pxを1として換算する。気をつけなければいけないのは、入れ子のdivで高さ(height)を指定することと、フォントサイズ(font-size)を0にすること。そして値として半角スペース( )を指定すること。これらが揃ってないと表示されない場合がある。 <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%
横は 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