signpost

2016年2月7日日曜日

emを使用したフォントサイズ指定

ブラウザのデフォルトサイズは多くは16px。
BODY {font-size:62.5%}
で、10pxに設定される。
1em は 10px, 0.8em は 8px, 1.6em で 16pxとなり、pxで考える際にわかりやすくなる。

...

#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}
こういうレイアウトがあるとして、#navigationと#side_bar は 10px, #main_contentは12px、#footerは9pxでそれぞれの
テキストが表示される。

#main_contentは12pxに設定されていて、その中の要素は,それをもとに計算される。

H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */

まとめると、まず16pxがデフォルトでそれを10pxに設定する。
16 x 0.625 = 10
子要素/親要素で設定。
child pixels / parent pixels = child ems
12 / 10 = 1.2
しかしこれだと
#main_content LI {font-size:0.8333em}
リストがネストしている場合、どんどん小さくなっていくので、それを防ぐために
LI LI {font-size:1em}
のように設定する。
混乱を防ぐために、あらかじめ設定しておくのが良いだろう。
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}

cssセレクターまとめ

1 *

* {
margin: 0;
padding: 0;
}

全称セレクタ。テスト用としてはいいが、本番では使わない方が良い。全ての要素を対象にするため、ブラウザに負担をかける。

#container * {
border: 1px solid black;
}
子セレクタにも使えるが、使用しない方が良い。

2 #X

#container {
width: 960px;
margin: auto;
}

id指定。その要素にidを指定する必要があるか考える必要あり。

3 .X

.error {
color: red;
}
クラス指定。

4 X Y

li a {
text-decoration: none;
}

子孫セレクタ。X Y Z A B.errorのようになっているのは間違い。

5 X

a { color: red; }
ul { margin-left: 0; }

型セレクター。全ての要素を指定する時使用する。

6 X:visited X:link

a:link { color: red; }
a:visted { color: purple; }

疑似クラスセレクタ。

8 X > Y

div#container > ul {
border: 1px solid black;
}

標準のXYとX> Yの違いは、後者は直接の子のみを選択する。

List Item
- Child
List Item
List Item
List Item

この場合、#container直下のulのみ対象になる。それ以外のulには適用されない。

9 X ~ Y

ul ~ p {
color: red;
}

この例ではul以後のp要素全てを対象にする。

10 X[title]

a[title] {
color: green;
}

属性セレクタ。この例ではタイトル属性を持つaのみ対象になる。

11 X[href="foo"]

a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}

例では、http://net.tutsplus.comにリンクする全てのaタグを対象にする。
他のアンカータグは影響を受けない。

12 X[href*="nettuts"]

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}

正規表現で指定できる。文字列の先頭と末尾を参照するには、^および＆を使用します。

13 X[href^="http"]

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}

この場合httpで始まるurlへのリンクを持つaタグ。
http://を探していないことに注意してください。それは不要だし、https://で始まるURLを考慮しません。

14 X[href$="jpg"]

a[href$=".jpg"] {
color: red;
}

.jpgで終わるリンクを持つaタグ

15 X[data-*="foo"]

a[data-filetype="image"] {
color: red;
}

リンク先のデータタイプが画像のものを指定している。
色々な画像形式のリンクを指定する時、

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}

このようにするのは効率が悪い。そういう時に使う。
使用する場合は、要素にdata-filetype属性を指定する。
data-filetype属性のない物には適用されない。

Image Link

16 X[foo~ = "bar"]

a[data-info~="external"] {
color: red;
}

a[data-info~="image"] {
border: 1px solid black;
}

" Click Me, Fool

external属性を持つ要素はcolor:redになり、externalとimage両方を持つ要素はcolor:redと border: 1px solid black;
の両方を持つことができる。

よりよいCSSを書くためのTips

cssを書く上での参考のため。

http://www.admixweb.com/2010/11/09/tips-to-code-better-css-for-in-your-projects/

わかりやすい名前をつける

idではなく、classを使う

#formExample1{
border:1px solid gray;
padding:20px;
}
#formExample2{
border:1px solid gray;
padding:20px;
}

これは別要素に同じようなスタイルを適用している。無駄が多く、再利用性にかける。
共通するスタイルはクラスで再利用できるようにする。

.form{
border:1px solid gray;
padding:20px;
}

再利用性にかけるもうひとつの原因は、単純なスタイルを特定のセレクターに適用する場合。

div.error-message{
color:red;
}

この場合は単に.error-messageとする。
これで全てのセレクターにクラスを適用できるようになる。

継承とカスケードプロパティーを使う

.odd{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}

不要なスタイルを作成している。

Lorem	Ipsu
Lorem	Ipsu
Lorem	Ipsu
Lorem	Ipsu

この場合、親の継承を使用する。

table tbody{
background-color:#E9EBEB;
}
.even{
background-color:#9EB0EE;
}

親要素の背景色を設定し、縞の部分のみクラスを使う。

Lorem	Ipsu
Lorem	Ipsu
Lorem	Ipsu
Lorem	Ipsu

名前空間

.widget{
width:300px;
height:200px;
border:1px solid gray;
}
.widget > h3{
color:white;
background:black;
padding:10px;
}

名前空間を使うことでクラス内の要素のみに適用できる。

Better Markup to Avoid Classitis and Divitis

インラインスタイルを使わない

CSSハックを避ける

CSSをリセットする

コメントを入れる
/* Reset */
..Restet the browser default..
/* Layout */
..Code for Layout only, including Forms..
/* Pages */
..Code that is used for specific page or pages.
/* Miscellaneous */
..Code for messages div, alerts, lightbox, etc.

shorthandsを使う

自分にとって最適なスタイルを選択する

コードの繰り返しを探す

プロジェクトが完成した後に、反復的なコードやパターンを探し、クラスに変換する。たとえば、プロジェクトのさまざまな部分に同じ背景と色を使用して、クラスにこれらのプロパティを追加し、それらを再利用すると良いでしょう。これは反復的なコードを避け、簡単に維持することができる。

Spriteを使う
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

オブジェクト指向CSS
http://www.slideshare.net/stubbornella/object-oriented-css

名人から学ぶ
Chris Coyier, Eric Meyer, Stu Nicholls, Nicole Sullivan, Andy Budd, Alen Grakalic, and a bunch of sites to help you to learn CSS.

JavaScript文法まとめ

Javascriptの文法をまとめたものです。すぐに忘れてしまうので自分で参照する用です。
もし間違いがあったら教えて下さい。

2012年6月29日金曜日

wordpress アクションフック

An Introduction to WordPress Action Hooks
function.phpに追加する。


add_action('wp_head', 'insert_some_css');
//以下、関数のコードを追加

第一引数にアクション名、第二引数にアクションフック名を記述する。

2012年6月15日金曜日

要素の情報を表示する

firefoxのwebdeveloperには同じような機能（しかも高機能）がすでにありますが、似たようなものを作ってみました。

var mouseBox = function(element){

 var elem = document.getElementsByTagName(element);
 for(var i=0; i < elem.length; i++)
 {
　　　　　　//すべての要素にイベントを設置
  elem[i].addEventListener('mouseover',function(e){//
  
　　　　　　//わかりやすいよう枠でかこむ 
  this.style.border = '1px solid';
  this.style.borderColor = 'red';
  
　　　　　　//新しくdivを作成し表示場所をつくる。
  var child = document.createElement('div');
  child.id = 'child';
  child.style.border = '1px solid';
  child.style.background = '#FFE4B5';
  
               //css情報の取得  
  var rule = getMatchedCSSRules(this,'');
  var style = rule[rule.length - 1].cssText;
  
　　　　　　//取得した情報を表示
  var text = document.createTextNode(element + '#' + this.id + ' .' + this.className + '  style ' +style);
  this.appendChild(child);
  child.appendChild(text);
  e.stopPropagation();//バブリングをストップ
  },false);
  
　　　　　　//マウスが離れたら表示場所を削除
  elem[i].addEventListener('mouseout',function(e){
  this.style.border = 'none';
  this.style.borderColor = '';
  var child = document.getElementById('child');
  child.parentNode.removeChild(child);
  e.stopPropagation();},false);
 }
}

今回はdivを作ってそこへ情報を流し込んでいますが、ツールチップみたいにしてもよさそうです。あとcssスタイルが改行されてないままテキストで出てるので、ちょっと読みにくいです。

2012年5月20日日曜日

Wordpressの画像の扱い

wp_postテーブルのpost_contentへパスを含めたタグをそのまま入れている。 html生成時にそのままコンテンツと一緒に出力しているようだ。画像ファイルはフォルダ（wp_content/uploads）以下に年数、月ごとにフォルダを作って配置してる。

2016年2月7日日曜日

Weather Details

2012年6月29日金曜日

2012年6月15日金曜日

2012年5月20日日曜日