html-css

cssで印刷されないボタンを画面に表示する

2010/08/08 7:41 に いつかはちょうになる が投稿

cssを記述しているところに以下を追加

@media print {
  .noprint{
    display:none;
  }
}

あとはタグのclassでnoprintを指定するだけです。

borderを指定するとタグの実サイズが変わる

2010/01/28 12:44 に いつかはちょうになる が投稿

divタグは border:none; がデフォルトとなる。この状態でwidth:100pxとすると、divタグの端から端までは100pxだが、 border:solid 1px red; と指定するとdivタグの端から端までのサイズは102pxになる。またブラウザによっても動作がことなり、widthで指定されているサイズの内側に枠を設けるか、外側に設けるかでことなる。

widthを指定したタグにpaddingやmarginを指定してはならない

2010/01/28 12:42 に いつかはちょうになる が投稿   [ 2010/01/28 12:48 に更新しました ]

タイトルの通りです。なぜかpaddingやmarginで指定した値が二倍で認識されてしまいます。

htmlとスタイルシートでバーを表示する

2010/01/22 3:27 に いつかはちょうになる が投稿   [ 2010/01/22 3:46 に更新しました ]

三国志大戦用のサイトビルダーでも利用した方法。

1のサイズを16pxとし最大を8とした場合、最初のdivの横幅を16px×8の128pxにする。これが最大値を示すことになる。
もうひとつ入れ子にdivをつくってその背景にバーの画像を指定する。
横幅は16pxを1として換算する。気をつけなければいけないのは、入れ子のdivで高さ(height)を指定することと、フォントサイズ(font-size)を0にすること。そして値として半角スペース(&nbsp)を指定すること。これらが揃ってないと表示されない場合がある。

<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');">&nbsp;
</div>
</div>


最近は外部サイトへbackground:url('***')で背景を指定することができなくなってきているのでこの方法がいつまで有効なのかはわからない。現にGoogle Siteでは利用できないし、Livedoorブログでも再編集するとdivが消える。

素直にスクリプトを組み込むほうがいいかもしれない。

ページ全体のセンタリング

2010/01/18 11:31 に いつかはちょうになる が投稿   [ 2010/01/18 11:38 に更新しました ]

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%

2010/01/17 18:44 に いつかはちょうになる が投稿   [ 2010/01/18 11:39 に更新しました ]

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