モバイルサイトコーディングの注意点 2

毎日書くといっておきながらもう忘れがちｗ

今日は二つかきます。


続きを読む

モバイルサイトコーディングの注意点 1

文字をコーディングする際に、よく改行を入れてしまう人がいますが、

続きを読む

携帯(モバイルやガラケー)サイトのコーディング ヒント

メモＵＲＬ

続きを読む

2011-06-09~またもや画像置換で手こずるw~

自分のホームページにtwitterとfacebookのボタンを設置しようと思ったら
画像置換がまた、忘れてしまっていたw

今回、そのtwitterとfacebookのアイコンを組み込む上でのメモ。
（自分なりのメモなので、他の人が見たら分からない場合があります。ご了承を）

まずはそのアイコンをそれぞれ、ホバーする時の画像として２種類ずつ用意。

htmlのほうはこんな感じ。

• twitter
• facebook

で、問題はCSS。
まずは２つの画像を重なり合うように置く。

ul .btn_tw {
background: url(../image/index/twitter_icon_hover.png) no-repeat;
}
ul .btn_tw a {
background: url(../image/index/twitter_icon.png) no-repeat;
}
ul .btn_fa {
background: url(../image/index/facebook_icon_hover.png) no-repeat;
}
ul .btn_fa a{
background: url(../image/index/facebook_icon.png) no-repeat;
}

これはアンカーポイントにまで画像を指定するというやり方。

#sidecontents #side_btn ul li {
list-style-type: none;
float:left;
width:64px;
height: 64px;
}

liには必ず、幅と高さを指定する。さらに

#sidecontents #side_btn ul li a {
height: 100%;
display: block;
overflow: hidden;
text-indent:-9999px;
text-decoration:none;　←あってもなくても良い。
}
高さは100％指定の必ずブロック要素にしておく！
（インラインのままでは、次にくるoverflow: hidden;が効かない）
もちろんtext-indentも指定。こうすれば、弾いた文字は消える。

最後に大事なのがこれ

#sidecontents #side_btn ul li a:hover {
/* 　background:none !important;*/
background-image:none !important;

}
アイコンをホバーした時に強制的に、画像を透明化させ
下の画像を写すという訳だ。

以上、メモ。

2011-04-16〜marginの相殺について〜

自分の思考回路がちょっとてんぱっていてだめなので
整理整頓したら、また書く事にする。

とりあえず参考URL
【CSS】 上下のマージンは互いに相殺されるようだ。
http://www.pxt.jp/ja/diary/article/149/

マージンの相殺と背景
http://adp.daa.jp/archives/000574.html

2011-02-20〜コーディングにおいて１〜

とても眠いです。どーもです。

さて、webコーディングにおいて…

今回のサイトを作るにあたって、やはりくせ者だったのがIEだったわけです。
特に今、IE6とIE7のシェアはまだ約20％あるわけで…
http://daaaaaaaai.blogspot.com/2011/01/201012.html

このIEのバグ対策ももちろんなんだけど
これから？（今もだけど）多いのはきっと既存のサイトからさらに作り直すことや
HTMLとCSSを読み解く力も必要なのでは？と思っている。
DW（Dreamweaver）の最新版CS5では、今まではFirebugとかでサイトの構造を
ひも解いていたがDWにURLを指定する事で、今度は既存のサイトをひも解く事が
出来るらしい。これはすごいw　早く就職して、自分も最新のソフトはあるからMacが欲しいな。

コーディングにおいては本当スピードが求められると思う。
そんな中で、シェアの多いブラウザにはちゃんと表示されるようにするのがまず最低限。
今回はド素人で、Firefoxばっかりに気をとられ、ある程度サイトのレイアウトが出来てから
IEで見たら、アウトだったってやつwちなみに下のIETesterでも確認はできるがまだ不十分らしい。
http://coliss.com/articles/browser/ie/928.html

あと、拡張性を意識したレイアウト、段組みを行わなければならない。
むやみにCSSではheightを指定しないほうがいいし効率の良いdivとクラス属性が
望まれる。あまりdivの入れ子になりすぎても問題。

セレクタのクラス属性においては、他の人との共同作業は今後
もちろんあるだろう。そんな時に気をつけておきたいのは、命名規則である。
http://q.hatena.ne.jp/1201052127
上記の参考サイトを見ておく事が良いだろう。

もっと書きたい事があるが、これはまた明日。