CSSの話：条件付コメント（その6）
引き続き、インターネットエクスプローラー（IE）で条件分岐を行う方法です。
今回は、「ある数字より上のバージョン」に、HTML文を適用させる方法です。以下のようにHTML文書内に書き込みます。
以下のようにHTMLファイルに書き込みます。IE5より上のバージョンで、gtie5.cssというCSSファイルを読み込みます（IE5およびそれより古いバージョンでは読み込みません）。
<!--[if gt IE 5.0]>
<link rel="stylesheet" href="gtie5.css" type="text/css" />
<![endif]-->
今回は、「gt」を使いました。「gt」は「greater than」の略で「～より大きい」という意味です。
CSSの話：条件付コメント（その5）
インターネットエクスプローラー（IE）の独自拡張である、コメントによる条件分岐についてです。
前回は「ある数字より下のバージョン（数字は含まない）」でしたが、今回は「ある数字以下のバージョン（その数字を含む）」という条件の書き方です。
以下のようにHTMLファイルに書き込みます。
<!--[if lte IE 6.0]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
これで、「バージョン6以下」のIEに、ie6.cssというCSSファイルが適用されます。前回と違うのは、「lt」が、「lte」になっているところだけです。
CSSの話：条件付コメント（その4）
インターネットエクスプローラー（IE）の独自仕様で、コメントを使って条件分岐を行う方法です。
今回は、バージョンが、ある数字より小さい場合にのみ適用する書式で、「ｌｔ」を使います。「ｌｔ」は「less than」の略で、「～～より小さい」という意味です。
例えば、以下のようにHTMLファイルに書き込みます。
<!--[if lt IE 6.0]>
<link rel="stylesheet" href="ltie6.css" type="text/css" />
<![endif]-->
するとIEの、6より低いバージョンのものだけに、ltie6.cssというCSSファイルの内容が適用されます。ここで、IE6は含まないことに注意してください。
CSSの話：条件付コメント（その3）
インターネットエクスプローラー（IE）限定の、コメントで条件分岐をする方法です。
今回は、IEのバージョンによって振り分けを行う方法です。新しいバージョンと古いバージョンでは、表示が違うことがよくあるので、こういった振り分けを使ってズレを回避します。
書き方は、前回の、IEだけにスタイル適用の場合とあまり変わりません。バージョンの数字を書き入れます。
<!--[if IE 7.0]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
上記のように書くと、IE7にのみ、スタイルシートを読み込ませることができます。
このとき、数字は7.0や5.5のように、二桁以上で書かないと、正しく認識されないことがあるようです。
うちの社長・・・最近、営業をサボっています。
最近、横浜のホームページ制作会社アイエムシーは、営業をサボっています。
むしろ、「ホームページを作ってくれー」というお客様に
「ゴメンナサーイ」のパターンが多いのです・・・・
なぜなら、手前味噌ながら、アイエムシーのホームページは、ただのホームページとは違い、閲覧者に好反応で、高反応なホームページの仕掛けと、ノウハウの塊りなので、作れば良いに決まっています。
公開した後に、費用対効果がこんなに良いとは、と驚かれるわけです。
もちろん、ローマは一日にしてならず。で、それまで相当な勉強代と、汗と涙、そして多くの皆様のお知恵と、体験から築き上げられた、ウェブマーケティング理論がなせる技です。
このノウハウは中小企業に特化して磨かれたノウハウなので、忙しい経営者や、ウェブ担当者様にはまさにピッタリなサービスです。
やはり「満足ホームページ」はダテじゃないなぁと、日々、問い合わせメールの山を見ながら実感しています。
社長の口癖
「人間ならもっと他にやる事が有るのではないか？」
単調な作業の繰り返しや、非効率的な処理を見かけると、必ず言っていますｗ
多くの中小企業の業務には、この無駄無駄無駄が並んでいます。
大森のコンサルティングを受けられた方の中には、聞かれた経験をお持ちの方もいらっしゃるかもしれませんね。
無料コンサルティングを利用されるだけでも、効果が出る事が多々ありますので、
ウェブ活用をお考えの方は、ぜひ活用して欲しいなと思います。
何がなんでも、アイエムシーにホームページ制作を依頼しようと、しなくても結構ですので、
無駄なお金をホームページ制作業者に払わないように、知識を身につけてください。
マーケティングがビシっと決まると、営業が必要無くなるので、最近、社長は営業をサボっています。
その仕組みは、近くセミナーで公開する予定なので、ご興味のある方は参加をお勧めします。
CSSの話：条件付コメント（その2）
HTMLに書き込むことで、インターネットエクスプローラー（IE）のバージョンごとに違う表示をさせることができるのが、条件付コメントです。
今回からは、実際の使い方を書いていきます。
例えば、IEにのみスタイルを適用したい場合には、例えば以下のようにできます。
まず、IE専用のie.cssというCSSファイルを作成します。そして、HTMLファイルのheadタグ内に下のように書きます
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
こうすると、<!--[if IE]>から<![endif]-->までは、IE以外のブラウザでは読み込まないため、IEのみに特別なスタイルを適用することができます。
CSSの話：条件付コメント（その1）
インターネットエクスプローラーでは、HTML文の中に、条件付コメントというものを書き込むことで、適用させるスタイルを選ぶことができます。
振り分け用のCSSファイルを複数作成しておき、IEのバージョンごとに、条件付コメントで振り分けるのが一般的な使い方です。
条件付コメントの基本的な書き方は以下の通りです。プログラム言語などで使う「IF文」の形式によく似ています。
1.条件に合致した場合、中のHTMLを適用する
<!--[if 条件]>HTML<![endif]-->
2.条件に合致しない場合、中のHTMLを適用する
<!--[if !条件]><![IGNORE[--><![IGNORE[]]>HTML<!--<![endif]-->
これを利用して、CSSファイルへのリンクを書き込みます。
条件付コメントは、一般のHTML文では、コメントとして扱われ、IE以外のブラウザでは読み込まれません。
CSSの話：HTMLのコメントで条件分岐
インターネットエクスプローラーでは、HTML文書にコメントを書き込むことで、特定のバージョンにだけスタイルを指定することができます。
一例としては、以下のように書きます。
<!--[if lt IE6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
これで、バージョン6以下のインターネットエクスプローラー限定のCSSファイルを読み込ませることができます。
上記は、CSSファイルではなくHTMLファイルに書き込むHTMLの書式であることに注意して下さい。
インターフェイスの設計とは
ユーザーインターフェースの設計には、いくつかのパターンが有ります。
どのパターンが良いのかは、作成するウェブサイトの目的により変わります。
見た目重視か、反応重視か？
研究データを載せるのか、商品データを載せるのか？
会社案内をしたいのか、キャンペーンのお知らせをしたいのか？
ホームページ制作の上で、ここのポイントをしっかりと把握しないまま、
制作をすると、思ったような結果が得られないという事につながります。
横浜のホームページ制作会社アイエムシーでは、最適なインターフェースをご提案していますので、
まずは、お気軽にご相談いただけたらと思います。
効果的なHP制作をするには、目的の把握は必須項目です。
CSSの話：IE7を除くモダンブラウザに適用
今回は、インターネットエクスプローラー7以外のモダンブラウザ（CSSなど、W3Cの規格に対応しているブラウザ）にのみスタイルを適用させる方法です。スタイル指定する要素の前に「html>/**/body 」を追加します。
具体的には以下のような書き方になります。
html>/**/body .class{color:#ff0000;}（IE7以外のモダンブラウザで文字色を赤に）
この書き方は、W3Cで定められた書式に合っていないので、注意してください。
CSSの話：Hollyハック（MacIE5のみ適用／除外）
Macintosh版インターネットエクスプローラ5のみにスタイルを適用、もしくは除外する書式です。以下のように書きます。
MacIE5のみ適用する場合：
/* ここからMacIE5に適用 \*//*/
p { color:#FF0000; }
/* これ以降他のブラウザにも適用 */
MacIE5のみ除外する場合：
/* これ以降MacIE5には適用されない \*/
p { color:#FF0000; }
/* これ以降MacIE5にも適用 */
この書き方は、バックスラッシュ（＼）を使うので、バックスラッシュハックとも呼ばれます。
文字コードがShift JIS等の場合、バックスラッシュの代わりに、半角の「￥」記号を使ってください。
W3Cの規格に反しない書き方です。
CSSの話：Safariのみに適用
Appleのブラウザ、Safariにのみスタイルを適用することができるCSSの書き方です。
スタイル指定をする要素の前に「html[xmlns*=""] body:last-child 」と書き加えます。
具体的には、以下のようになります。
html[xmlns*=""] body:last-child .class{margin:10px;}
この書き方は、W3Cの規格に合っていないので、W3C準拠のCSSでは使えません。
CSSの話：IE6を除外するハック
スタイルを指定する時に、インターネットエクスプローラー6には適用させないようにする書き方です。
プロパティの後、値を指定する前に、半角スペースと「/**/」を挿入します。すると、このプロパティはIE6では適用されなくなります。
例えば、以下のように書きます。
.class{
color : /**/ #ff0000;
}
こうすると、IE6以外では、文字の色が赤くなります。IE6では適用されません。
この書き方は、W3C標準に反しない書式です。
CSSの話：IE7とモダンブラウザのみ適応
インターネットエクスプローラー7と、モダンブラウザ（W3Cの基準に対応した、最近のブラウザ）にのみスタイルを対応させる書き方です。適用させたい要素の前に「html>body 」を付け加えます。
これは、書式としてもW3Cの基準に合っているので、W3C準拠の頁でも使えます。
CSSの話：IE7ハック
今回は、インターネットエクスプローラーのバージョン7にのみスタイルを指定する方法です。
要素の前に「*:first-child+html」という文字列を書き加えます。すると、そこで指定されたスタイルは、IE7だけに適用され、他のブラウザでは適用されません。
この書き方は、W3Cの書式に違反していないので、このハックを利用しても、W3Cの基準では正しい書式のCSSとみなされます。
CSSの話：アンダースコアハック
前回の「スターハック」と同様に、インターネットエクスプローラー6以下にのみスタイルを適用する書き方です。「スターハック」の名前は「*」の記号を使うところから来ていますが、「アンダースコアハック」は「_」の記号（アンダースコア）を使います。
プロパティの前に「_」記号を付けてスタイルを記述すると、IEのバージョン6以下にのみそのスタイルを適用させることができます。
ただし、この書式はW3Cの基準に沿わない書き方なので、正しいCSSの書式で書く場合にはスターハックの方をおすすめします。
CSSの話：スターハック
CSSハックの中で、もっとも有名なのが、この「スターハック」と呼ばれる方法かも知れません。インターネットエクスプローラー4〜6と、それ以外のブラウザを区別してスタイル指定する時に使います。
スタイルを指定したい要素名の前に「* html 」を付け加えて記述すると、IE4〜6にのみ、そのスタイルが適用されます。他のブラウザではそのスタイルを読み込みません。
この書き方は、W3Cの基準に合っているので、WEB標準に気を配る場合も有効です。
ホームページ制作に定額給付金
タイトルに意味はありません。
流行りのキーワードにのってみたかっただけです。
定額給付金は総額２兆に及ぶ景気対策なわけですが、実施については異論反論ですね。
もしかしたら、これが当たって景気回復の糸口になるかもしれないし。
レジャー系、旅行会社の株価が上がるかもしれません。
正直なところ、お偉い先生方が、インフレになるだとか、いろいろと言ってますが、
そんな規模の大きい対策は、何十年とやったことがないのだから、
やってみなければ分からないのでは？
横浜のホームページ制作会社アイエムシーは、世の不況とは全く逆行して、顧客増大、売上アップ。
まさに増収増益の真っ最中です。
同業他社がヒーヒー言っているのに、なぜ、アイエムシーのHP制作が受けるのか。
一言で言うと、本物のホームページだから。
という事になりますが、なにが本物なのか。
ビジネスの原理原則、人間心理の原理原則、マーケティングの原理原則から外れないウェブサイト作りにポイントがあるのですね。
もうひとつが、「運の引きよせ」もありますが、これは理屈を超えているため、信じる人信じない人もいるので、別トピックにて。
横浜のホームページ制作会社アイエムシーのウェブサイト作りは、有効性が証明済みのノウハウを組み合わせ、好景気・不景気にとらわれず収益を上げる、素晴らしいモデルを提供しています。
HP制作にまよった方は、お気軽にご相談いただければと思います。
３クリックルール
見やすいホームページと見づらいホームページの違いに、「クリック数」もあります。
見たい情報にたどり着くまでに、何度もクリックしなければならないサイトでは大変ですよね。
ホームページを作る時、目先の部分だけにこだわってしまうと、「じゃあここをクリックすると、画面が出て」
となりがちです。
するとあっという間に、５階層くらいの深い部分に重要な情報を置いてしまったりします。
そのサイトでなければ読めない様な、情報に読む価値が無ければ、他のサイトにすぐ飛んでいってしまします。
ポイントは３クリック以内で、たどり着きたい情報に到達させる事。
これが３クリックルールです。
サイト構成図を作ってみると、階層的にどの様なホームページ構造になているのかを把握できるので、一度、自分のサイト構成図を見て、深すぎる階層が無いかチェックしてみると良いでしょう。
横浜のホームページ制作会社アイエムシーが制作するWEBサイトの場合、この３クリックルールに従い必要な情報にすぐ到達できる様に心がけています。
WEBマーケティング講座がスタートします。
マーケティングの話をいよいよ社長がします。
ずっと、沈黙を守っていましたが、本当は話したくて仕方がなかった様です。
レスポンス率が確実にアップする数々のアイデアがあるのですが、
そのマーケティング理論とノウハウは、自社と、アイエムシーのクライアントのみに使っていました。
高い授業料を払って手に入れた方法を公開するのは、
既に次の理論に着手している為、もう、追いついてこれないだろうという事とです。
ホームページ制作をする上で、マーケティングは欠かせませんね。
影響力の強いメディアですが、用い方を間違えると、なーんにも反応のないネット上のチリになります。
今回のセミナーはそこら辺の問題にスポットライトをあてて、お送りするようです。
乞うご期待！
CSSハックについて
CSSへの対応や実際の表示は、ブラウザによってかなり違います。
なので、同じ画面表示を実現させるためには、ブラウザごとに少しずつ違うスタイル指定をしなければならない場合があります。その際に、ブラウザごとの対応の違いを逆手に取って、特定のブラウザだけにスタイルを適用させたり、特定のブラウザを除外したりする便利な書き方があります。
そういった、ある意味「裏技」的な方法をCSSハックと呼んでいます。
これから数回、特によく使われるCSSハックをピックアップしていきます。
恵方巻きで縁起かつぎ
恵方巻きって、関東では食べる習慣無かったですよね。
ここ数年、TVで紹介されて知った人も多いのでは？
日本の食べ物は色々、知っているつもりなのに、まだまだ知らない事だらけです。
まして海外の食べ物となると、もうぜーんぜんですね。
ミーハーな私は、とりあえず恵方巻きを食べました。
買ってから、どっち向いたらよいのか分からなくなり、適当にあっちこっち向きました。
横浜のホームページ制作会社アイエムシーのウェブサイト制作は、高い反応を得る為に様々なものを利用しています。インターネット・マーケティング、心理学等を駆使しています。更に効果的になる様にツールを使っています。HP制作にここまで力を入れるか？というこだわりが、アイエムシーのホームページ作成を支えています。
地震が増えてますが
静かにしている事が多いせいか、夜に地震が多い気がします。
地震が起こると、一瞬、「大きいのが来るかな？」と考えますが、
即座に覚悟を決めます（笑）
もうひとつが、小さな地震が来ている間は、細かくプレートが割れるので、
大地震にはならないという話を聞いた事があるので、まぁ良かったと思います。
とはいえ、いつか来る事が決まっているので、こればかりは仕方がないですね。
横浜のホームページ制作会社アイエムシー内は、うず高く本や資料が積み上げてあるので、
地震が起きたら埋まってしまいますね。
それもこれも効果的なウェブ制作の為、命がけ？の努力です。
日々、ホームページ制作やSEO対策、ECサイト、デザインの流行など、
情報収集を欠かさずにいます。
この貯めているパワーが効いてきます。横浜のホームページ制作会社アイエムシーの、地震が来ても揺るがない自信のホームページ作成をお試しあれ。
CSSの話：outline-width
outline-widthは、アウトラインの太さを指定します。これも、borderでの指定と変わりません。数値で指定するか、thick（太い）、thin（細い）、medium（普通）から選びます。borderとは違い、上下左右を個別に指定することはできません。
borderが常に四角い枠を作るのに対して、outlineは形状に沿った縁取りをすると定義されています。outlineを設定した箇所が丸ければ、丸い縁取りになるということです。
しかし、現状では、実際にブラウザで表示すると、だいたい四角い縁取りになってしまう様子です。
