プロフィール

mshp0723(旧Mikaん星人アワー)

Author:mshp0723(旧Mikaん星人アワー)
ごらんいただきありがとうございます。マルチクリエイタ・クリエイティブ起業家のmikaん星人アワーです。webコンテンツ関連お仕事をしています。

■お仕事関連サイト■
仙台スマホ対応ワードプレスサイト制作・アトリエSS


webサイト制作・運用関連事例
・食品店さま ネットショップ制作
・音楽スクールさま webサイト制作
・楽器奏者さま 再生プラグイン埋め込みサイト制作
・エクステリア施工企業さま webサイト企画
・飲食店さま webサイト制作
・支援団体さま サイト制作
・一般企業さま 会社案内サイト企画
・支援団体さま fc2ブログカスタマイズ
・その他 メディア/アフィリエイト運用ブログカスタマイズ



よろしくお願いいたします。

最近の記事

カテゴリー

ieに気をつけるCSSエディット・レイアウトねた~横paddingや、大きいサイズ文字切れに気をつけて、文章構造をしっかり見る人に伝えよう♪

こんにちわ。

ネットのパワーで良さよ伝われ!』とおもったmikaん星人アワーです。


さて先日もばりばりホームページをつくってました。今回は、あらかたできたところで依頼者の方に確認いただき、ブラウザごとの表示で、よろしくない表示になった部分を修正していくお話。

お察しのとおりcssの調整でまずい部分を引き起こすのはIE(インターネットエクスプローラ)です(笑)

ちなみに良くやらかすのはこのねた。こんな感じのレイアウト作ろうとして
201201153
一つの例ですが、『全体800px 左180px 右600px、真ん中空白20pxだから、足して800、余裕だな』とか調子こいて、『ちょっと見やすく寄せるか』と見出しにpadding50pxぐらいたすと・・・


IEが指定した横padding分余慶にくっつけて解釈し・・・
201201154


ということがあったので、横paddingを使わないで(marginとボックスサイズで空白作ったり)コーディング。使わないと、IE6とかでも全然いけてしまうので、こっちに気を配りすぎてもう一箇所。

6ばっか気にしてると、背後から7にやられます(笑)


お知らせ見出しみたいなのを作ろうとして・・・
201201151

cssこんな感じだったと思います。(だいたい)
.news {width:665px; height:40px; margin-top:20px; padding:6px 0px 0px 0px;
background-image: url('http://○○○/○○.jpg');
background-repeat: no-repeat;
font-size:20px; color: #ffffff; font-weight:bold;}


背景画像&文字は画像でなくテキストで。テキストでフォントサイズ大きめが結構見やすかったので字は大きめに。しかしテキストを大きくしてしまうと・・・

201201152
ブラウザバグで切れてしまいます。俺の好きなブラウザはoperaですが、まだIE7ユーザーも多く、かつこれは見出しなので、文書構造上あったほうが見る人はわかりやすい・伝わりやすいということで、これはほっとけません。


限りなく惨劇に近いシナリオを避けるなら、7の言うことを聞けって感じで、早速修正。

ie7のバグで検索すると、こつは、line-heightプロパティのようです。表示サイズに応じて調整。これで大きめ文字も見出しにつかえます。

.news {width:665px; height:40px; margin-top:20px; padding:6px 0px 0px 0px;
background-image: url('http://○○○/○○.jpg');
background-repeat: no-repeat;line-height: 20px;
font-size:20px; color: #ffffff; font-weight:bold;}



ただしペースト打ち間違えてvertical-align:middle;をくっつけちゃった場合は、line-height:でも切れることがあります。(実証済み)


という感じで、CSSエディットで対応しましたが、世の中ではIE(特にバージョン6)は訝しく思われており、使用停止カウントダウンサイトまである始末。
http://www.ie6countdown.com/


そこで一言。『IE邪魔だ消えろ』と、声を上げることはたやすい。しかし、その困難を技術力で克服したとき成長があるかもしれない。と、まじめにしめてみようと思います。

んでわまた♪

にほんブログ村 地域生活(街) 東北ブログ 仙台情報へにほんブログ村 ベンチャーブログへにほんブログ村 音楽ブログへ


(↑面白かったらクリックお願いいたします♪)
関連記事
スポンサーサイト
このエントリーのタグ: cssレイアウト webサイト制作
トラックバック
トラックバック送信先 :
コメント

リンク(相互大歓迎♪)

月別アーカイブ