スポンサーサイト

一定期間更新がないため広告を表示しています

スポンサードリンク | - | | - | - | - | - |

CSSメモ−IE6対策その2+IE7対策

 3月11日の東北地方太平洋沖地震にて被災された方、関係の方々に、心よりお見舞い申し上げます。

 大変微力ではありますが、個人的には可能な限り、義援金と血液の提供、援助できる人に対する情報提供、各種イベントへの参加を行います。
 何の取り柄も力もない私には、本当に個人レベルのちっぽけなことしかできませんが、できることを見つけて積極的に取り組んでいきたいと思います。

 皆様に、一日も早く笑顔が戻りますように。


*****************************************************************************************************


 HTMLやCSSは、プログラムに比べて個性は出にくいかと思いますが、やはり人によって色々な組み方が存在します。CSSレイアウトの場合、誰かが書いたソースをいじるのは意外と大変です。
 今、久々に他人のソースをいじっているのですが、もう半泣き状態です。
 HTMLテンプレートの状態ではちゃんと対策されているので問題ないのですが、CFを適用させるとそれはもうひどいことに。
 さらに、エミュレーターによって見え方が違うという……もはや何を信じて良いのかわかりません。

 とりあえず、IE6対策メモその2とIE7対策です(その1はこちら)。かなり個人的なメモですが、CFメモ同様、少しでもお役に立てることができれば幸いです。


【追記】
 ColdFusionのコードを埋め込んだ状態で発生する崩れの対処方法ですので、HTMLのみのページにおいて同じ現象が発生するとは限りません。
 また、下記の方法で対処できるとも限りませんのでご注意ください。


-----------------------------------------------------------------------------------------------------


■共通

まず対象となる要素と関連すると思われる要素に、片っ端から1pxのボーダーをつける。余白の問題が多いため、こうするとわかりやすい。
 もちろん後で消去。


-----------------------------------------------------------------------------------------------------


■IE6


floatした要素がずれて下に落ちる

・勝手に余白、もしくは幅が大きめに取られている可能性があるので、padding・marginを指定していない場合は0にしたり、ハックでwidthを縮めたりする。

・floatを逆(leftであればrightに)変更し、子要素のmarginを消して親要素にpaddingをつけてみる。もしくは逆。

・ネストされている子要素のmargin・paddingが影響していることもあるので確認。


要素を元の位置に戻したは良いものの、今度はそれぞれの要素が上に浮く

・margin-topを加えて無理矢理対処。
 floatを使用する場合は特に、確認・調整がしやすいのでwidth及びheightは指定しておいた方が良い。


-----------------------------------------------------------------------------------------------------


■IE7


clearfix問題
 と言うと、なんだか時事問題のようですが。

・親要素のclearfixが原因で、レイアウトの崩れが起こる場合がある。幅や余白に問題が見られない場合、これを疑うと良いかもしれない。
 対策としては、clearを個別に指定する=通常のclear指定にする……くらいしか方法がなかった。

 親要素のclearfixを削除し、親要素終了タグの直下に下記のタグを挿入。

<div class="clearfix"><hr /></div>

 この時、divの中身が空白なのは良くないので、適当に何かを挟んでおく。
 私の場合は、(画像やborderで代用するため)使用することのないhrタグを挟む。

hr {
    display: none;
}

 また、clearfixのCSSは下記のようにハックをかけて指定するか、別のclassとして割り当てる。
 個人的には、特に他人のソースだと紛らわしいので、後者の方が良いと思う。

*+html .clearfix {
    clear: both;
}
くみっち | Webデザイン | 17:27 | comments(0) | trackbacks(0) | - | - |

CSSメモ−IE6レイアウト崩れ対策

 Webクリエイターを恐怖のどん底に突き落とす、噂のIE6。の対策です。
 エミュレーターは、私は念のためIE TesterMultipleIEsを使用していますが、どちらか片方で良いと思います。

 これまでは何かあれば適当にいじって直していたのですが、いい加減面倒になってきたのでざっとメモしておきたいと思います。
 心の中で何度も呪いながら書いたので、そろそろIE6はなくなってくれるでしょう……と思いたいです……。


 さて、先程NEXCOMサイトを更新したのですが、IE6で確認したらメニューがこんなことになっていました。

IE6崩れ1
 サイトをリニューアルした際にもちゃんと確認しており、その時は正常に表示されていたにも関わらずです。
 よく見ると最下段のブログバナーにもおかしな空白ができており、すごい崩れ方をしていました。

 確認してみると、

・ヘッダーのdivの高さ→○
・〃margin→○

 という訳で、ヘッダーのdivと下のコンテンツ用のdivの間に余分な空白ができているということでした。

・対策→ヘッダーのdivにoverflow: hidden;

IE6元通り1
 メニューはこれで一件落着。


-----------------------------------------------------------------------------------------------------


 次はこれです。

IE6崩れ2

 なんという…………。


 この辺りでDreamweaverが共有違反とか何とか、よくわからないエラーを出して保存ができなくなってしまったので、Eclipseで作業しました。Firebugにもお世話になりつつ。
 共有違反のエラーは調べてみたのですが、テンプレートをいじっていた訳でもなく別の場所でファイルを開いていた訳でもないので、なぜ起こったのか全くわかりません。


 こちらの原因は、よくあるpaddingのバグでした。
 ここのwrapにあたるdivは890pxで、上下左右にpaddingを20px取っています。
 通常はその分widthからマイナスするので、divは850pxになるはずなのですが、IE6ではそれが適用されないことがあります。そのため、padding分を引かず890pxのままにする必要があります。
 こちらはどうしようもないので、CSSハックを使用しました。

#lower-ps-product-back {
    width: 850px;
    _width: 890px;
            ・
            ・

 もしくは

* html #lower-ps-product-back {
    width: 890px;
            ・
            ・

IE6元通り2

 これで良しです。

 あまり大きな場所にpaddingは使わない方が良いそうですが、入れ子のdivにmarginを適用する方法でやるともっとひどいことになったので、もうこれで良いと思います……。
くみっち | Webデザイン | 11:55 | comments(0) | trackbacks(0) | - | - |

Webデザインのちょっとした効率化

  「Webデザインのコツ」などといった大層なことは書けそうにありませんので、今日はちょっとした効率化の方法をメモしておきたいと思います。
 といっても、ちょっとかじった人なら恐らく誰でもやっていることなので、Webデザインを始めたばかりの方向けです。私のブログで技術的な話が出た時は、ジャンルが何であれ、今のところほぼ全て初心者向けですのでよろしくお願いします(^^;)

※ここではPhotoshopを使用していますが、Illustratorでも同様のことができます。

 私はデザインをするにあたって、作成するファイルの他に、2つのファイルを用意します。

1.カラーパレット
2.パーツパレット

パレット活用
(クリックで拡大します)

 画像にあるファイル名はアレですが、お気になさらないでください。

 まずカラーパレットは、その名の通り、デザインに使用した色を保存しておくものです。イラストを描く時などにも用いられる方法ですね。
 ブラシで適当にパレットに色をつけ、何に使った色かをメモしておきます。

 次にパーツパレットですが、これも名前の通りでパーツ倉庫です。
 レイヤーをそのままパレットにドラッグしてコピーし、ロゴや文字などを保管します。
 この画像にあるロゴファイルはIllustratorで作られたもので、ベクターイメージなので使い回しができます。フォントや色の情報なども同時に保存しておけるので、よく使うパーツはここに入れておきます。

 この方法だと、「パーツパレットだけあればいいじゃないか、わざわざ2つのパレットに分ける意味があるのか?」ということになりそうですが、そうでもありません。
 サイトを作るにはとんでもない数のパーツが必要になります。それらを全てパレットに集約させてしまうと、今度は探すのが大変になって、かえって使いづらくなってしまうのです。
 大体最初の段階で「この色やこのパーツは今後も使うな」というのがわかるので、なるべく最低限のものを入れるようにします。


 書いているうちに、「グラデーションパレット」「シェイプパレット」「レイヤースタイルパレット」などもあれば便利そうだなと気付きました。ここまでするとかなり面倒臭そうですが、該当ファイルを開いてレイヤーを探すよりは早いかもしれませんね。
くみっち | Webデザイン | 15:46 | comments(0) | trackbacks(0) | - | - |

委託か、テンプレートか

 最近は、Webサイトのテンプレート専門の販売サイトが多くあるようですね。
 先日こちらのテンプレートモンスターが良いという話を聞いたのですが、なるほど、確かに私などでは到底及ばないほどハイクオリティです(笑)。
 価格も、クオリティとPSDやHTMLなどの元データを考慮すると安めですね。

 しかし気になったのがユーザビリティ。デザインは確かにすごいのですが、使いどころによっては非常に扱いづらいサイトとなりそうです。
 例えばサンプルに、開いた時にサーッとFlashが流れて「おっ、おしゃれだな」と思うサイトがありました。しかしページ遷移の度にそれが流れて、さすがに鬱陶しく感じました。
 しかもこれはメインメニュー部分でもあったので、Flashが全て表示されるまで待たなければならず、サクサクページを見ていくことができません。ほんの3秒程度なのですが、ストレスを感じるユーザーは多いと思います。
 学校や有名企業などのサイトであれば、ユーザビリティに関係なく閲覧してもらえますが、無名の企業サイトやネットショップであれば話は別です。見た目の印象だけで選ぶと、後々大変なことになる場合もあるのです。

 テンプレート販売では安価で優れたデザインのサイトが手に入りますが、あくまでテンプレートであって利用者用に打ち合わせて作られたものではないので、自己満足になってしまわないように注意が必要ですね。
 Webサイトとは、もちろん何らかのアピールの場ではあるのですが、他人も目的を持って見るものであり、両者のニーズが一致して初めて意味を持つものになります。他人が見たいのはサイトのデザインではありません。デザインを見に来たとしてもそれは、参考にする目的のWebデザイナーくらいでしょうし、コンバージョンには結びつきません。

 Webデザイナーは淘汰されていくという話をよく聞きますし、実際そうかもしれませんが、なんだかんだ今後も委託は必要だと思いました。
 「知識がなくてもカスタマイズしやすいデザインにしてくれ」と頼めばそうしてくれますし、「基本的な雰囲気はそのままでリニューアルしたい」といった細かい要望にも応えてくれます(そのまま応えないにしても、アドバイスや代替案を出さずに渋るような業者には頼まない方が良いです)。
 上記のサイトのようにデータを丸ごとくれるところもありますが、Photoshopを使用した画像作成・編集やCSSコーディングを勉強してカスタマイズするなど、そこまで本気でやるのであれば、外注でオリジナルのサイトを作ってもらい、元データをもらうなり買うなりした方が良いのではないかな……と個人的には思います。
くみっち | Webデザイン | 10:33 | comments(0) | trackbacks(0) | - | - |

Webデザイナーにセンスは必要?

 +GTDのご意見掲示板を復旧させました。どんどんご意見をお寄せください!


 Million BookのことやCFのことなど、色々と書きたいことはあるのですが、ちょっと年明けに回ってしまいそうです。
 本日は、Webデザインに関して少しだけ書きたいと思います。


 Webデザイナーを目指す人から「自分にはセンスがないし……」という声を聞いたり、私が自分の職種を言った時に「センスがあってうらやましい」と言われたりすることがよくあります。
 Webデザイナーになるにはデザインセンスがいる、とお思いの方は本当に多くいらっしゃるようです。
 しかし一言で言うと、単純にWebデザイナーになるだけであればセンスは必要ありません。はっきり言って全くセンスのない私でも、Webデザイナーとして仕事ができているのですから。
 誰もが驚愕・感心するような独創的で奇抜なデザインをするのであればセンスは必要になってくるでしょうが、Webデザイナーは「クライアントに満足して頂けるものを作る」というのが本来の形です。そのレベルであれば、努力で辿り着くことは誰にでもできます。
 いきなり超大物俳優のオフィシャルサイトを作って欲しい、などというオファーを受けることはまずありません。私も受けたことはありませんが(笑)。将来的にそのレベルを目指すかどうかは置いておいて、とにかくまずWebデザイナーになりたいと思っておられる方には、センスを意識する必要はないことをお伝えしたいと思います。

 服飾デザイナーでも、いわゆる「カリスマ」と呼ばれる方々は自分の好きなデザインをして生きておられますが、世の中の服のほとんどは「一般人に着てもらうことを意識して作られた服」です。
 さらにWebサイトにはコンテンツがあり、Webサイトはあくまでそのコンテンツを引き立たせるためのツールで、目には見えますが役割としては裏方です。Webサイトを純粋な作品として公開するといった場合を除いて、その位置付けが変わることはありません。
 どんなに素晴らしいデザインセンスを持っていても、仕事にする以上は「クライアント」と「納期」というものがあります。「限られた時間で、クライアントの要望に合ったものを作る」ことが必要になります。
 それをこなすのに必要なのはスキルと慣れ、つまり経験。これに限ります。


1.PhotoshopやDreamweaverといったツールの基本的な使い方を覚える。

2.ハウツー本やサイトを見ながら、自分で作品を作ってみる。

3.広告や他のサイトを見た時、それが実際にどのようにして作られているのかは別として、同じものを自分で作る方法がパッと浮かぶようになればこちらのもの。

4.効率的に作業する方法は、実際に仕事をすることで身につく。逆に仕事としてやってみないとわからない。


 少なくとも私は、上記のように考えています。
 街中の広告や何気なく見たサイトで「これは良いな」と思ったデザインがあれば参考にします(もちろんデザインをそのまま盗む訳ではありません)。
 後はショートカットキーを覚えるくらいでしょうか。
 何でもそうかもしれませんが、センスよりも、常に観察と研究を怠らないことの方が大切になってきます。

 Webデザイナーは、なるだけであれば色々な方法があるのでさほど難しくありませんが、なってからが大変な職業です。
 私もまだまだ一人前とは言えず、日々自分のセンスのなさに頭を抱えつつ格闘しております(笑)。しかしそれは、プログラムに関してもそうだと言いますが、まだ引き出しが足りないというのが大きな要因です。
 他のサイトを沢山見て良いものを随時取り入れて、必要な時にサッと引き出せるようにしておく。感覚で作れるものではありませんので、そういった地味な作業や努力の積み重ねになってきます。これはセンスの有無に関係なく、誰にでも必要なことだと思います。


 書いているうちに、「そもそも、Webデザインにおけるセンスとは何だろう?」という疑問が浮上してきたのですが、それを追求するとものすごくごちゃごちゃした記事になりそうですので、この辺りで置いておきます(笑)。
 とりあえずここでは、「Webデザインのセンスのある人」=「特に努力をしなくても、自然に良いデザインが浮かんでくる人」と定義しておきます。……そんな人いるのでしょうかね(^^;)
くみっち | Webデザイン | 17:34 | comments(0) | trackbacks(0) | - | - |
1/1PAGES | |

10
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--