備忘録

canvasなどを使わず、CSSのみで三角（斜め線）を表現する

htmlに
<div class="sankaku"><div>

cssに
.sankaku{
width:0px;
height:0px;
margin:0px;
padding:0px;
border-left: 15px solid #000;
border-top: 20px solid #CCC;
border-bottom: 20px solid #CCC;
}
で↓

刑事コロンボ コンプリート ブルーレイBOX [Blu-ray]








モヤモヤさまぁ～ず2　DVD-BOX　Vol.13&Vol.14


モヤモヤさまぁ～ず2　Vol.15　モヤさまHAWAIIシリーズ2010&2011ディレクターズカット版 [DVD]


麻理子の部屋 [DVD]

ブラウザで選択してコピー、WORDへペーストするときに・・・
HTMLで、CSSをclass指定するとき、複数指定していると、WORDにペーストしたときにCSSが適用されない。
指定を1つにすると適用される。

テーブルのセルの隙間を　css　でなくす(<table cellspacing="0"> の cellspacing="0" をやらない)ためには、

table{
border-collapse:collapse;
}

なかんじ

今更ながら、IE7のバグ？
IE7でだけ、ウィンドウサイズを変えていくと、横スクロールバーがでる時がある。
↓この辺を参考に・・・
http://nobuko.biz/iebug-dtd/iebuglist.html

float:right あたりがよろしくないのかな・・・

改行しない、タグで言うと<nobr>ってやつをcssでかくと、

white-space: nowrap;

下付き文字タグ<sub>について以下のように指定することで、行間・文字の下を他と揃える。

sub{
  vertical-align: baseline;
}





スタイルシート スタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術

上付き文字タグ<sup>をそのまま使うと行間が他の行より空いてしまったりするが、CSSで以下の様に設定にするとOK

sup{
  vertical-align: baseline;
  position: relative;
  top: -1ex;
}

ワンランク上を目指す CSSクリエイティブ・デザイン

バージョンが違うからか、OSが違うからか・・・

Safariでの表示を確認するために
Windows版の Safari3PublicBeta をインストールしたが、
MacのSafari2.0.4 での表示と違っていた。

divタグに囲まれた範囲に背景画像の配置で、
divタグで囲まれたサイズよりも大きい画像を背景に設定し、ポジションのY座標を１以上設定した場合、
たとえば、
css
　　background-image: url('white_box.png');
　　background-repeat: no-repeat;
　　background-position: 0px 115px;
　　width: 550px;
　　height: 430px;
画像(white_box.png)
　　width: 550px
　　height: 6000px
のようなとき、

Windowsのほう(Safari3.0.3)では、はみ出した部分はカットされて表示される。
Macのほう(Safari2.0.4)ではrepeatされているように表示される。
同じバージョンで検証したいところだが・・・・・
CSSのHackでなにか方法があるのかな？？
Macナシでも検証OKかと思ったが、とりあえず、Safariの表示の検証にはMacを使おう・・・

Safari Style (Icons)

form の input や textarea も同様に

textarea {
font-size: 100%;
}

とすると、form外のフォントサイズとあう。

CSSビジュアルデザイン・メソッド―技術の体系化と要素のモジュール化によりデザインプロセスの効率化を実現する「CSSバリューデザイン」

スタイルシートで

#fs80 {font-size: 80%;}

という指定がされていたとする。
HTMLが、

<div id="fs80">
<table> ・・・ </table>
</div>

となっていたとする。
IE6だと、div,tableともに80%になるが、
Firefoxだと、divは80%になるが、tableは80%にならない。
スタイルシートに

table {font-size: 100%;}

を追加する。
Firefoxも、div,tableともに80%になる。

CSS Zen Garden Book―Webデザインのベストプラクティスに学ぶ、CSSクリエイティブ・テクニック