プロフィール

mshp0723(旧Mikaん星人アワー)

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

■お仕事関連サイト■
音楽制作・楽曲アレンジ・webサイトやブログ制作・アトリエSS



2010~2013年の業務
サウンド制作関連
・一般クライアントさま向けDAWレッスン
・芸能プロダクションさま、アーティストさま向け楽曲提供
・教育機関さま 歌唱教材ダンスアレンジ
・ダンススクールさま ダンスBGMオーディオデータ編集
・機器メーカーさま ナレーションレコーディングと編集
・地元企業さま イベント用ご当地風楽曲アレンジ制作
・飲食店運営企業さま 店舗用カラオケアレンジ制作
・移動販売店さま 店舗BGM楽曲アレンジ制作


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



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

メールフォーム

名前:
メール:
件名:
本文:

最近の記事

カテゴリー

最近のコメント

月別アーカイブ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック
トラックバック送信先 :
コメント

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サイト制作
トラックバック
トラックバック送信先 :
コメント

検索フォーム

音楽制作読んどけ☆コラム dawテクニックと音楽理論・アレンジ・更新情報

Powered by RSSリスティング

リンク(相互大歓迎♪)

RSSフィード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。