画像と背景色の同化

随分ご無沙汰しました。

久しぶりの更新です。


今日は担当しているサイトで他用している、背景色＋画像の小技を紹介します。


画像の背景色とテンプレートの背景色を合わせて、いかにも繋がっているように見せる同化テクニックですが、実は盲点が！


それは画像を境目にして、上下で色を変えたい場合です。


例えば草原と土をイメージしたライン画像で、上を緑として、下を茶色とします。


当然画像より上から緑を被せるわけですが、茶の背景色はどこで指定するのでしょうか？


div style=ﾞbackground-color:#緑ﾞ

img

/div

div style=ﾞbackground-color:#茶色ﾞ

…

/DIV

と、よくやります。


ところが、それをau（比較的最近の機種）で見てみてください。

閉じDIVと次のDIVの間に隙間ができています。



さてこの場合、次のように解決します。


※面倒なので一部割愛

DIV緑
DIV茶
IMG
…
/DIV
/DIV



次の色の背景色も予め被せるんですね～。

フォームのサイズ指定

最近のモバイルサイトは、文字サイズを"x-small"で書くこと多いですね。

個人的にも多様しますが、フォームのフォントサイズも小さくする時には注意が必要です。


"select"の中身で、２行になってしまうことありませんか


それはフォームの枠だけ小さくして、中の文字が"medium"のままだからです。


"input"や"select"タグにもフォントサイズを指定してあげましょう。


フォームのサイズより小さくしておけば改行はなくなりスッキリおさまるはずです。

音楽動画特化型アドネットワーク

オリコン、BARKS、ナタリーが、動画アドネットワークを始めるそうです。


前職でクチモバというモバイル動画アドネットワークを運営していたので、きたな！って感じです。


オリスタモバイル運営会社の社会人同期の話では、話来てないからＰＣだろうと。
うん、知ってます(笑)

間違いなくモバイルにも参入して、某会社の脅威となりますね…

アーティスト案件は根こそぎ持ってかれるでしょう。。

<a id name>の落とし穴

ページのトップをマーキーにしている方も多いかと思います。

さらにフッターに、

ページ上へ

とページ内リンクをつけたり…


ただし、マーキーをaタグで囲むとマーキーが無効になってしまいます。

ちなみにマーキーと一緒に指定したCSSが無効化されます。



divの中にidとnameも入れちゃいましょう！
ただし、idとnameが、aタグに入れないと効かない端末もあったような…

画像表示における高速化

『imgタグのwidth属性とheight属性およびその値を入れておく』


モバイルサイトを表示するとき、画像は最初小さく表示され数秒で元のサイズに広がりますよね？

その時にテキストなど全体のレイアウトを調整するのに多少時間がかかるようです。




そこで、予め画像表示枠を決めておくとこの時の処理時間が短縮されます！！


最初から体裁が整っているので、ストレスも減ります(笑)


これはオススメヽ(・∀・`)ノ