Text

id属性をスタイルのホック目的に使わない理由

詳細度が強い

  • id : 1.0.0
  • class : 0.1.0

文書内に1回しか使えない

1回しか使えないなんてスタイルとして微妙. とはいえSassならextendがあるけどね！

JSでグローバルオブジェクトになって汚れる

<div id=”unk”></div>→window.unk

他に思いついたら追記する

May 28, 2012
1 note
Text

画面横幅を縮めた時ヘッダーフッターの右はじの背景とかが切れる対策

@media(max-width:960px){body{display:inline-block;}}

March 29, 2012
1 note
Text

table を block にしたとき関連まとめ

IE9用

table要素において、[1]table→[2]block のような手順で、表の表示を block 表示に切り替えようとしても、blockの表示にはならない。これを解決するには、th, td 要素に対して float: left あるいは right を指定し、強制的に block とすればいい。float による横並びをさせないためにあわせて clear:both も指定しておく。幅を調整するために width:100% もあわせて指定しておく。 width:auto; だと最小限に縮むので padding を併用したい場合には box-sizing を使う。

Firefox用

col要素を伴うtable要素において、[1]table→[2]block のような手順で、表の表示を block 表示に切り替えると、col に指定した幅が残ってしまう。これを解決するには、table関連の全て要素のwidthはautoにする

chrome用

col要素を伴うtable要素において、[1]table→[2]block→[3]table のような手順で、表の表示を一度block表示にし、その後再び表の表示にすると幅がおかしくなる。これを解決するためには table をblock表示をする際に、table関連の要素全てをblockにする。

March 21, 2012
Text

table を block にしたとき、中途半端にblockにしてはいけない

colを併用しているtableの場合、chromeで、一度画面小さくして、その後また大きくすると表示がおかしくなる

<style>
table{
width:100%;
}
th,
td{
border:1px solid #333;
}
@media(max-width:640px){
th,td{
display:block;
}
}
</style>
<table>
<col width="20%">
<col width="50%">
<col width="30%">
<tr>
<th>th1 th1 th1 th1 th1</th>
<td>td1 td1 td1 td1 td1 td1 td1</td>
<td>td2 td2 td2 td2 td2 td2 td2</td>
</tr>
</table>

原因は、中途半端にblockにしていること。やるならtable関連全てをblockにする

<style>
table{
width:100%;
}
th,
td{
border:1px solid #333;
}
@media(max-width:640px){
table,tr,th,td{
display:block;
}
}
</style>
<table>
<col width="20%">
<col width="50%">
<col width="30%">
<tr>
<th>th1 th1 th1 th1 th1</th>
<td>td1 td1 td1 td1 td1 td1 td1</td>
<td>td2 td2 td2 td2 td2 td2 td2</td>
</tr>
</table>
March 21, 2012
1 note
Text

table を block にしたとき、colgroup, colを消す

消さないとFirefoxで幅がおかしくなる。

@media(max-width:640px){
  colgroup, col{
    display:none; /*Firefox用*/
  }
  td, th{
    float:left; clear:both; /*IE9用*/
  }
}
March 02, 2012
Text

THREE.js で Ray を使ってクリックとかを取得

Ray はクリックした点を near 面から far 面まで伸びる線として扱い、その線と 3D オブジェクトが接したかで判定する方法。

THREE.js は Ray を使うことができ、これによりどのオブジェクトをクリックしたなどを判定できる。

  1. 判定したい mesh を meshArray とかみたいな配列に入れる。全部の Mesh を判定するなら scene まるごとでもいける
  2. THREE.Projector を用意 new THREE.Projector();
  3. カーソル位置をとって 3次元ベクトルに変換する
  4. 3 の 3次元ベクトルとカメラの位置を Ray に渡す
  5. そうすると RAY.intersectObjects(meshArray) あるいは ray.intersectScene( scene ) に判定の結果、Ray と交差した全ての Mesh が手前から順番に入っている配列を取得できるのでそれをいろいろできる。 判定を貫通させたくなければ、配列の [0] 番目のみ操作すればいい。

view demo : くるくる回っている立方体をクリックすると反応する例 http://jsfiddle.net/yomotsu/MB6XU/

see also

February 29, 2012
Text

IE9 だと table を block にできない

IE9 だと、

<table>
	<tr>
		<th>th</th>
		<td>td</td>
	</tr>
</table>

に対して、

th,td{
	display:block;
}

としても、横並びのままで意図した表示にならない。float を適用すると強制的に block になるので以下を試したところ、table-cell のような表示ではなくなった。

th,td{
	float:left;
	clear:both;
}

この方法でなら、media queries を併用してもしっかり動作した。

@media(max-width:640px){
	table{
		border-collapse:collapse;
	}
	th,td{
		float:left;
		clear:both;
	}
}
February 28, 2012
Text

IE6,7 で a < div したとき img をクリックできない場合の対処

原因は、a の中で float や position を使うことにある。float が原因の場合は以下で解決可能

html

<a href="#">
	<div class="imgContainer">
		<img src="http://dummyimage.com/100" />
	</div>
</a>

css

<style>
a{
	/*some codes ...*/
}
div.imgContainer{
	float:left; /* a element which is applying float */
	background:url(transparent.png); /* applying transparent image for IE6, 7 when using float */
}
div.imgContainer img{
	/* applying transparent z-index:-1 for IE6, 7 when using float */
	position:relative;
	z-index:-1;
}
</style>

position:(relative|absolute)が原因の場合はそのまま死ぬしかない。

追記 : 昔同じ事書いてた。何のためにはまろぐやってるのかわからない…http://yomotsu.tumblr.com/post/6549320870/ie6-7-a-div-img-floated-img

February 20, 2012
Text

classやidに-を使うとか使わないとか のついでに

ずどさんがはまろぐってたからついでに。

昔いろいろ悩んでいた頃があって、前の会社にいたころいろいろ試してました。キャンペーンページのような、すぐ消えるであろうページだったのでいろいろやってました。

例えば「.」でつなげてみるとか。

<div class="mod.sample.vertical">サンプル縦長版</div>

でもCSSも一手間加えないといけないのでやめました。CSSでは、「.」は普通には使えませんが、エスケープすれば使えます。

.mod\.sample\.vertical{
(snip)
}

あと、マルチバイト文字をクラス属性値にしてみたり。

<div class="大見出し">大見出し</div>
.大見出し{
(snip)
}

マルチバイト文字は普通に使えます。たしか。

ただの文字列ですし、予約語とか気にせず好きにすればいいんじゃないですかね

January 22, 2012
25 notes
Text

ウェブフォントに使えそうなライセンス和文フォント追加分

はんなり明朝
http://typingart.net/
IPAライセンス

フォントポ日本語
http://yoshihisa.que.jp/fontopo/font.html
IPAライセンス

XANO明朝フォント
http://www.asahi-net.or.jp/~sd5a-ucd/freefonts/XANO-mincho/
このフォントは、印刷・表示、電子文書への埋め込み等の目的で、誰もが自由に無償で用いることができます。
このフォントの配布・再配布は、自由に無償で行うことができます。
このフォントを、より大きな規模のソフトウエアパッケージの一部として販売するなどしても構いません。

Oradano Mincho フォント
http://www.asahi-net.or.jp/~sd5a-ucd/freefonts/Oradano-Mincho/
このフォントは、印刷・表示、電子文書への埋め込み等の目的で、誰もが自由に無償で用いることができます。
このフォントの配布・再配布は、自由に無償で行うことができます。

TRON文字収録センター
http://charcenter.t-engine.org/
TRONプロジェクトはオープンポリシーを採っていますので、TRONコード仕様はオープンです。この仕様を下にプロダクト（ソフトウェア製品、フリーソフトウェア、フォントなど）を開発することはTRONプロジェクトに賛同されることにより自由です。

半角フォント
http://musashi.or.tv/hankakufont.htm
IPAライセンス

キネ丸系
http://fontgraphic.jp/indexjp.html

#ライセンス未確認

たぬき油性マジック
http://tanukifont.sblo.jp/article/41432838.html

http://honya.nyanta.jp/
http://azukifont.com/
http://s2g.jp/font/

2011-09-08までにブックマークした内容、以降はまた。

September 08, 2011

About

portrait

People I follow

  • oosugi20
  • hamalog
  • kyosuke
  • hamatag