CSSの話：CSSの定石（その3）
ブロック要素を中央寄せにする場合、marginプロパティを使って左右の余白を「auto」にする方法がありますが、インターネットエクスプローラー（IE）では、ブロックが正しく中央寄せにならない場合があります。
IEでも正しくブロックを中央に配置するには、配置したいブロックの「親」に当たるブロックに「text-align:center」を指定します。ただし、これを指定すると、文章なども全部中央寄せになってしまうので、配置したブロック要素の方で、改めてtext-alignプロパティを指定する必要があります。
写真の重要性
最近では、デジカメの性能も上がり、素人でも綺麗に写真が撮れるようになりましたね。
携帯にもデジカメ機能が当たり前の様に搭載されて、画質もイイ。
友人に見せてもらったAUのカメラ付き携帯は、CyberShotと書いてあったので、ビックリです。
これは、デジカメの名称ですから、カメラにCyberShotを名乗れる機能を、そのまま搭載したという事ですよね。
ブログなどに掲載する写真には十分すぎるのではないでしょうか。
しかし、カメラの性能が上がったとはいえ、やはり撮影者の「腕」は大事です。
プロと素人では、同じカメラを使って、こうも違うものか？という程、でき上がりが違います。
ホームページで使用するイメージ写真などは、迷わずプロに撮影をお願いする事をお勧めします。
写真が良いとそれだけで引き立つ部分も多いので、これは重要です。
特に商品写真などは、写真の出来不出来で、売上が左右する要のポイントですので、
定番のアイテムについては、ちゃんと撮影をした方が良いでしょう。
横浜のホームページ制作会社アイエムシーでは、デジタル一眼レフによる、写真撮影を行ったりしますが、あくまでも補完の為・・・
しっかりした素材が欲しい場合には、プロをご紹介しています。
ちなみに弊社ウェブにのっている、社長のプロフィール写真は撮影所で撮っています。
良いウェブサイト制作には、良い素材が欠かない。
見栄えのホームページ作成には、力を入れる箇所と抜ける箇所がありますが、
写真には是非力を入れてみてください。
ここぞのイチロー
やはりイチローはやってくれます。
それまで打点が無しで来ていたのに、ここ一番、決めてくれました。
プレッシャーの中、それを力に変えるのがプロ選手ですね。
アメリカを撃破して、これで準決勝進出。
こうなると優勝・・・応援する側が先走ってしまいそうです。
横浜のホームページ制作会社アイエムシーは、プロの仕事をすべく、常にベストパフォーマンスを発揮します。
CSSの話：CSSの定石（その2）
CSSでデザインをする上での「約束事」をいくつか紹介していきます。
これらは、W3C等の規格で決められていることではなく、多くのデザイナーやコーダーが実際の運用の中で見出した、「現場の知恵」のようなものです。
今回ご紹介するのは、「widthプロパティを指定する場合、左右のborder-width、及びpaddingは指定しない」というものです。
border（枠線）とpadding（ブロック要素の中の余白）を指定した場合、それをwidth（ブロックの幅）に含めるかどうかは、現状ブラウザによって違います。
width:100px; border-width:5px; padding:10px とした場合、実際に表示されるブロック要素の幅が、100px なのか 110px （左右の枠線の幅を別に取る）なのか 120px （左右の余白の幅を別に取る）なのか、130px （枠線と余白の幅を取る）なのか、はっきりしないのです。
しっかり計算してレイアウトしたつもりが、レイアウト崩れになってしまう原因となります。
これを防ぐには、ブロック要素を入れ子にして、それぞれ個別にborderやpaddingを指定するようにするとよいでしょう。
釣りキチ三平とコスプレ
昔マンガで流行っていた「釣りキチ三平」が実写映画化されました。
この漫画、主人公の三平が釣りを通して色々な体験をしてるような話だったと思いますが、
正義の味方や、ヒーローが出ないストーリーなので、
当時の幼かった私にはよく理解できない漫画でした。
それはさておき・・・
実写化されて、その映像や宣伝の画像を見たのですが、どうも「しっくり」こない。
なんだろう？かなりマンガに忠実に再現できていると思うのだけど・・・
キャラクターの髪型がわざとらしいのかな、キャラが現実離れしているのに、
無理やり、リアルにしようとするから、気持ち悪さがあるのかな？
などと、考えていると、ふと気がつきました。
「なんだかコスプレみたい」
そうです。川や湖など、大自然の中で釣りをすれば、汚れや、ほころび、色あせしてて当然だと思うのですが、妙に衣装が綺麗すぎるんです。
真赤のアンダーウェアや、ズボンや帽子、本人の顔にいたるまで、借り物の様な綺麗さ。
これが、違和感の原因でした。
映画の世界には、「ヨゴシ」と言って、セットをわざと汚れさせ、昔からある風景や道具に見せる手法が使われていますが、この釣りキチ三平の衣装は、ヨゴシていないので浮いて見えるのですね。
横浜のホームページ制作会社アイエムシーのウェブ制作には、デザインをする上で、この「ヨゴシ」を使ったりします。
お客様から提供された、写真などで新規に用意したものは、妙にきれいで、サイトのデザインとミスマッチな事があるものです。
そこで、わざとくすませたり、深みを出すと、全体との調和がとれ違和感のないデザインとなって仕上がります。
デザインはつくづくバランスだと思いつつ、釣りキチ三平の映画を見るか、やめておくかに思いをはせるのでした。
CSSの話：CSSの定石（その1）
スタイルシートでのWEBデザインを実際に行う際には、覚えておくと便利な「暗黙の約束事」があります。その約束事を「定石」と呼ぶことにして、いくつかをご紹介します。
まず、ネットスケープ・ナビゲーター（NN）4、インターネットエクスプローラー（IE）4以前のブラウザには、CSSを読み込ませない方がいいでしょう。
これらのブラウザは、CSSという技術が出始めた頃のもので、実際のCSSへの対応が不完全であり、多くのバグ・不具合があります。ですので、中途半端に読み込まれるよりは、最初からCSSを読まないように設定しておいた方が良いです。
具体的には以下のような方法を使います。
外部CSSを読み込むlinkタグに「media="screen,tv"」 などと書き込むことで、NN4をはじくことができます。
「@import」規則を利用して外部CSSを読み込む形にすることで、IE3、4をはじくことができます。
CSSの話：さまざまな環境で表示を揃える（その2）
今回は、floatを使う場合のちょっとしたコツについてです。
段組のレイアウトをする際など、floatを使うと便利なのですが、ブラウザによって正しく対応していないものがあります。
バグとして代表的なものが、インターネットエクスプローラー（IE）5、または6で、指定よりも余白を大きく取ってしまうというものです。正しく設定したはずのレイアウトが、IE5、IE6で崩れて見える原因になっています。
回避策として、float:leftを指定した要素には、同時にmargin-left:0を指定するようにします。float:rightを指定した場合には同様にmargin-right:0を指定します。
もうひとつの回避策として、IE6では、floatを指定したブロック要素には、display:inlineを指定すると、なぜか余白の大きさが小さくなります。
呪のカーネル・・・・
昭和６０年に阪神タイガースがリーグ優勝を達成したさい、ファンに大阪市中央区道頓堀の道頓堀川に投げ込まれ、行方がわかならなくなっていたケンタッキーフライドチキン道頓堀店（閉店）の「カーネルサンダース人形」とみられる人形が１０日、同川左岸の新戎橋下流付近で見つかった。周辺の水辺整備事業を行っていた大阪市の工事関係者が発見したもので、この日は上半身部分だけが引き揚げられ、１１日に下半身も探すという。（産経新聞）
爆笑です。
私この時の馬鹿騒ぎを覚えています。
横浜なので、阪神ファンは少ないはずなのですが、この時の阪神にはにわか阪神ファンだらけでした。
私も阪神の野球帽をかぶっていましたね。
しかし、カーネルサンダース人形という、ネタがシュールで笑えます。
横浜のホームページ制作会社のホームぺージ作成には、このネタは使えそうにないのですが、
面白すぎるので、掲載です。
ライティングセミナーに参加
横浜のホームぺージ制作会社アイエムシーは、ちょっと普通のホームページ屋さんと違います。
「ライティングサービス」が有る事です。
これは、ホームページの見栄えの他に、心理学に基づいた読んでいる人が思わず反応をしてしまうという、心理トリックが使われている所がミソです。
このライティングサービスを利用されたお客様は、「もっと早くやるんだった」と口をそろえておっしゃいますので、評判のほどはなかなか上々なのではないでしょうか。
コピーライティングの各種講座や、書籍を日々研究していますが、そこに販売心理学の要素を加えているのは、アイエムシーだけです。
効果的なウェブ制作をお望みであれば、アイエムシーのホームぺージ作成をご利用頂きたいです。
CSSの話：さまざまな環境で表示を揃える（その1）
CSSでのWEBデザインは急速に普及してきていますが、それでもまだブラウザごとに対応の仕方がまちまちであったり、表示にずれがあったりします。
対応していない要素についてはどうしようもない部分も多いのですが、各ブラウザの表示のずれは、CSSの書き方である程度抑えることができます。
たとえば、余白や線の太さ、色等の既定値は、最初に明示的に宣言してしまえば、ブラウザごとの違いを考える必要が無くなります。
具体的には、以下のように書きます。
* {margin:0; padding:0; font-size:100%;
font-weight:normal; font-style:normal; text-decoration:none; color:#000000;
background:transparent;}
これで、どのブラウザでも、基本の余白、文字、背景の設定が統一されますので、あとは個別の要素ごとにスタイル指定をしていけば、ブラウザごとの差はかなり吸収されます。
強いぞ日本野球
イチロー選手や松坂投手など、メジャーリーグで活躍している選手たちが、勢ぞろい。
ただでさえも嬉しい所へ、韓国を相手に打ちまくりの抑えまくり！
そして、１４対２でコールドゲームという凄い結果。
いやぁ凄いですね、日本の野球レベル。
今年は再び優勝？と、つい期待をしてしまいますね。
横浜のホームページ制作会社アイエムシーのホームページ作成は、横浜のホームページ制作キーワードで首位を独占し続けています。
Yahoo！もGoogleもＭＳＮでも、横浜 HP制作で検索をすると、すべて一位です。
それぞれ上位表示をさせるルールが微妙に違うので、全てで一位ということは、なかなかの仕事です。
驚異の顧客ホイホイホームページ
ただのホームページ制作会社ではない！？
横浜のホームページ制作会社アイエムシーのホームページ作成には、大きな特徴があるんです。
それは・・・
お客様が、向こうから手を挙げて頂けるという特徴があるんです。
名づけて、顧客ホイホイ（笑）
この仕組みを閃いたとき社長は、興奮していました。
社長はイケルと喜んでいましたが、
本当に問い合わせが来るのかは、誰にも分かりませんでした。
いざリリースをしてみると、翌日から問い合わせが続き、大成功！
この仕組みが回りだすと面白いですね。
横浜のホームページ制作会社のアイエムシーでは、常に効果的な仕組みを実験し、反応が高いものを洗練させ、お客様にご提供しています。
イノベーション・フォー・ウェブマーケティングです。
CSSの話：条件付コメント（まとめ）
HTMLのコメントを使った条件分岐の方法は、前回までで一通りご紹介できたかと思います。
プログラミングで使われる「if文」と呼ばれる方法に近いものなので、プログラムをご存じの方には使いやすいかも知れません。この方法で、IEのさまざまなバージョンと、それ以外のブラウザを振り分けることが可能です。
IE以外のブラウザについては、CSSハックを使って振り分けを行いますが、W3C準拠の書式を守りつつ、全部の振り分けを行うのは非常に難しいです。
実際には、全てのブラウザを振り分けて違いを吸収しようと考えるより、多くのブラウザで「概ね問題無く見られる」スタイルを目指す方が現実的でしょう。
CSSの話：条件付コメント（その7）
引き続き、コメントを使ってインターネットエクスプローラー（IE）で条件分岐を行う方法についてです。
前回は、「ある数字より上のバージョン」に、HTML文を適用させましたが、以下のように変更すれば、「ある数字以上（その数字を含む）のバージョンに適用させる」ことができます。
以下のようにHTMLファイルに書き込みます。IE5以上（IE5を含む）のバージョンで、ie5.cssというCSSファイルを読み込みます。
<!--[if gte IE 5.0]>
<link rel="stylesheet" href="ie5.css" type="text/css" />
<![endif]-->
前回の「gt」をを「gte」に変更するだけです。「lt」と「lte」の関係と同じですね。
