2011年 7月 の投稿一覧

文字色と背景色のコントラスト

文字の色と、その背景色のコントラスト(色の差、明度差)が十分でないと、文字の視認性が低下してしまいます。

W3Cで公開されている計算式を利用すると適切なコントラストにする事が出来ます。

明朗度を求める計算式

結果が「125」以上となれば基準を満たす

((R×299)+(G×587)+(B×114))÷1000

色の差を求める計算式

結果が「500」以上となれば基準を満たす

(max(R1,R2)-min(R1,R2))+(max(G1,G2)-min(G1,G2))+(max(B1,B2)-min(B1,B2))

サンプル

明度差/色の差が共に不足
  • 文字色:#3366ff(51:102:255)
  • 背景色:#33cccc(51:204:204)
  • 明度差:54
  • 色の差:153
明度差/色の差が共に基準を満たしている
  • 文字色:#3333ff(51:51:255)
  • 背景色:#ffff00(255:255:0)
  • 明度差:152
  • 色の差:663
色の差が不足
  • 文字色:#ff0000(255:0:0)
  • 背景色:#ffff00(255:255:0)
  • 明度差:150
  • 色の差:255
明度差が不足
  • 文字色:#ffff00(255:255:0)
  • 背景色:#00ffff(0:255:255)
  • 明度差:47
  • 色の差:510

チェックサイト

http://www.kanzaki.com/docs/html/color-check

CSSの優先順位

CSSにはスタイルが適用される優先順位があります。
大きなサイトになればなるほど、スタイルが競合して適用されないといったケースが出てきますので注意が必要です。

CSSのスタイル適用順を決定する要素

CSSの提供元による優先順位
  1. Webページ制作者が作成したCSS[制作者スタイルシート]
  2. Webブラウザのユーザーが作成したCSS[ユーザースタイルシート]
  3. Webブラウザがデフォルトで適用するCSS[デフォルトスタイルシート]
個別性による優先順位
個別性の高いものが優先される
記述位置による優先順位
後から出てきたものが優先される
!importantルール
!important宣言の付いたスタイルが最優先される

  1. ユーザースタイルシート(!important宣言付き)
  2. 制作者スタイルシート(!important宣言付き)
  3. 制作者スタイルシート
  4. ユーザースタイルシート
  5. デフォルトスタイルシート

 

個別性による優先順位(個別性の計算ルール)

個別性は最大4ケタの正数値で表現され、より大きい値のスタイル程、個別性が高いと判断され優先される。計算方法は以下のようになる。

1,000の位(a)
(X)HTML文書内に、style属性がある場合は、1をカウント
100の位(b)
セレクタに含まれているid属性の数をカウント
10の位(c)
セレクタに含まれているid以外の属性と、疑似セレクタの数をカウント
1の位(d)
セレクタに含まれている要素、疑似要素の数をカウント

計算例

記述例 a b c d 個別性
* 0 0 0 0 0
li 0 0 0 1 1
li:first-line 0 0 0 2 2
ul li 0 0 0 2 2
ul ol+li 0 0 0 3 3
p[class=”memo”] 0 0 1 1 11
ul ol li.menu 0 0 1 3 13
li.menu.service 0 0 2 1 21
#example 0 1 0 0 100
div#example 0 1 0 1 101
style=”” 1 0 0 0 1000

最近、(X)HTMLやHTML5の勉強をしております。

dotfileをgithubで管理する

今まではDropboxにいれてたから良いかーと、思ってたんですが履歴管理できるといいなーと思ってgithubにpushしてみることにしました。

※githubに入っているのはmac用のdotfileでwindowsやubuntu等で同じ環境使う場合はDropboxのファイルを使う

ホームディレクトリのdotfileをgithubにpushする

事前にgithubでリポジトリを新たに作成しておきます。今回はdotfilesというリポジトリを作成しました。

重要なのは.gitignoreでdotfileにpushしたいファイルを指定するところです。

$ cd ~
$ vi .gitignore

#全てのファイルを除外
/*
#全ての隠しファイルを除外
/*.

!/.bashrc
!/.bash_profle
!/.profile
!/.emacs
!/.emacs.d
!/.vim
!/.vimrc
!/.gitconfig
!/.gitignore
!/.screenrc

$ git init
$ git add .
$ git commit -m "first commit."
$ git remote add origin git@github.com:suusuke/dotfiles.git
$ git push -u origin master

https://github.com/suusuke/dotfiles

done.


追記
vimのプラグインをvim-pathogenで管理するようにしたのでその時のメモ。
何が出来るようになるかというと、~/.vim/bundleというディレクトリでプラグインの管理ができるようになるので、管理が分かりやすくなります。

こちらからスクリプトをダウンロードして~/.vim/autoload/にいれて~/.vimrc

call pathogen#runtime_append_all_bundles()

を記述しておく。

~/.vim/bundleディレクトリを作成しておく。

これだけでおーけー。

bundleという一つのディレクトリでプラグインの管理ができるので、githubから簡単にプラグインのインストール、アップデート可能になります。

早速、プラグインをインストールしてみました。

$ git submodule add git://github.com/tpope/vim-surround.git .vim/bundle/vim-surround
$ git submodule add git://github.com/scrooloose/nerdcommenter.git .vim/bundle/nerdcommenter
$ git submodule add git://github.com/Shougo/neocomplcache.git .vim/bundle/neocomplcache

設定は.vimrcに書けばおーけー。

お疲れさまでした。

cp -f でも上書きの確認表示が出てしまう

cp -fとやっても確認表示がでてきてしまう場合はcpのエイリアスを調べてみる。

aliasで調べてみる

$ alias 
alias cp='cp -i'

cpのエイリアスにcp -iが設定されていました。

\でエイリアスを無効にして実行する

$ \cp -rfp app/ .

\を付けて実行するとエイリアスを無効にして実行出来るということを初めて知りました。