tande lab.

Archive
Tag "HTML"

と思って調べてみた。
Twitter のソースコード眺めてたら見つけたので気になりました。

文書全体の書字方向を指定できるプロパティらしい。
世界的に利用されるサービスだと、ローカライズ対応で記述が必要になるんでしょうね。

html タグに指定してコンテンツ全体に指定することもできるし、div タグなど一部のコンテンツに対して指定することもできます。

左から右へ "ltr"

左から右へ記述する場合 ltr を指定する。
ex. 日本語や英語など

<html dir="ltr">

右から左へ "rtl"

右から左へ記述する場合 rtl を指定する。
ex. アラビア語やヘブライ語など

</html><html dir="rtl">

へー、知らなかった。
勉強になった。

Read More

背景色がダイナミックに変更になる箇所で、
その背景色によって表示するテキストの色を変更する Tips です。

以下のサイトの、gday さんの回答が参考になりました。

RGB値を引数にとった関数にしてみました。
return で 白(#FFF) または 黒(#000) を返します。

// 背景色によってテキスト色を白/黒どちらにするか判別する
// 参考式: Y=0.3R+0.6G+0.1B で Y>127なら黒、それ以外なら白
var checkTxtColor = function(cR,cG,cB){

	// 最高値は255なので、約半分の数値127を堺目にして白/黒の判別する
	var cY = 0.3*cR + 0.6*cG + 0.1*cB;
	
	if(cY > 127){
		return "#000"; // 黒に設定
	}
	return "#FFF"; // 白に設定
}

RGB値自体の取得は、
前記事 – [JavaScript] 色表記の変換が簡単なライブラリ rgbcolor.js
で紹介したライブラリを利用すると簡単です。

Read More

色表記の変換が簡単になる JavaScript ライブラリの紹介です。

RGB color parser in JavaScript / Stoyan’s phpied.com
上記サイトで紹介されている rgbcolor.js を使うと

  • RGB表記 rgb(255,0,0)
  • 16進数表記 #FF0000
  • RGB各色を10進数で取得

が簡単にできます。

こちらでデモが見れます。
RGBColor test

Read More

前記事
[CSS] リンク<a>のスタイルを変更する
[CSS] 水平線<hr>のスタイルを変更する
に引き続き、よく使うリスト表示のスタイル設定方法を自分のチートシート代わりにメモしておくことにします。

Read More

リンクテキストの色などスタイルをCSSで変更する方法です。
これも 前記事の<hr> に引き続き、毎回ぐぐって調べていたのでメモしておくことにしました。

Read More

水平線を点線にしたり、独自の画像にしたりする方法です。
毎回ぐぐって調べていたので、メモしておくことにしました。

HTMLで <hr> と書くとでてくる線です。
普通に <hr> とだけ書くとブラウザデフォルトのスタイルで表示されますが、例えば以下のような点線にしたい場合、

点線の例

Read More