IE6・IE7でできちゃうチェックボックスの周りにできる余白を消す方法

こんにちは。
先日、フォームを作っていて「ぬ？」と思ったので記事にします。
お問い合わせや登録フォームなどで使うことのあるチェックボックス。
普通に作ると、こういうソースになりますよね。

<form method="" action="">
<input type="checkbox" id="c1" /><label for="c1">チェックボックス</label>
</form>

で、分かりやすいように、cssでこのように装飾するとします。

input { 
vertical-align:middle;
margin:0;
padding:0;
background-color:#F90;
}

form {
	background:#cccccc; 
	border:1px solid #666666;
	margin:0;
	padding:0;
}

こうすると、以下のような表示になります。

IE6とIE7にオレンジ色の背景色が現れました。
cssでつけた背景色なので、色を消してしまえばいいのですが、そのぶんだけ余白ができることになります。
さて、この余白、どうやったら消せるのでしょうか。

ざっとググってみてもなかなか良い解決方法が見つからず、Twitterで、@web_deikoさんに聞いてみました。

すると「IEだけmarginマイナスにしてみたら〜」とのお答えが。
おぉ。マイナスとは気づかなかったとさっそく試してみたのですが、何故か右と下の余白は消えぬまま。
paddingをマイナスにしても一緒。。
ぐぐぐg。
と悩んでいたところ、またも@web_deikoさんよりこちらのブログを紹介していただきました。

チェックボックスとラジオボタンの余白【IE】
http://hry164.blog76.fc2.com/blog-entry-4.html

これは！と思い、cssを以下のように変更。

input { 
vertical-align:middle;
margin:0;
padding:0;
background-color:#F90;
width:1em;
height:1em;
}

form {
	background:#cccccc; 
	border:1px solid #666666;
	margin:0;
	padding:0;
}

すると、このようにオレンジの背景色がなくなりました！

が、IE6だけline-heightが無視されてしまいます。
これはIEのバグのようで、置換要素を含む行の前後では行間がきかないそうです。
詳しくはこちらのブログをお読み下さい。

IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる
http://css-happylife.com/archives/2006/1018_0035.php

ということなので、IE6だけのハックをつけてみました。

input { 
vertical-align:middle;
margin:0;
padding:0;
background-color:#F90;
width:1em;
height:1em;
}

* html input {
	margin:3px 0;
}

form {
	background:#cccccc; 
	border:1px solid #666666;
	margin:0;
	padding:0;
}

これでなんとか整った感じです。

ブラウザによって見た目が違うのは、もう周知のことで、ここまできたら「すべて同じように見える」ということにどれほどの価値があるのだろうかと思ってしまいますが、デザイナーが作ったデザインがブラウザ上できちんと再現されるとコーディングした者としてはホクホクするものです。

ですが、ブラウザごとに見た目が変わるのはそういうものですという考え方もあって。
これからの動向が気になるところではありますね。

使いどころはないかもだけど、「レイヤースタイル」「グラデーション」「マスク」で、はかないゴージャス的なグラフィックを作ってみた

こんにちは。更新が２週間も滞ってしまい、自分的に「かっこわるーい」とか思ってましたが、仕事の方も一段落し、気分的にも上がってきたので、またブログの更新でもしようと思います。

で、今回は「はかないゴージャス」。「はかない」と「ゴージャス」が並ぶとは思いもしませんでしたが、作ってみたらそう表現するのがいいかなと思いました。これ。

このグラフィック、簡単につくれちゃいます。では作り方を。

背景を黒で塗りつぶす

みて分かる通り、背景を黒で塗りつぶします。
で、質感を出すためにベタで塗るのではなく、微妙なグラデーションをつけています。

000000→2b2b2へのグラデーションを円形につけています。あとはデフォルト値のまま。

文字を書く

今回使用したフォントは「Charlemagne Std」のBold。なんだかこれだけでも少しゴージャスな感じがでてきますね。

レイヤースタイルを付ける

今回のレイヤースタイルは「ドロップシャドウ」と「光彩（外側）」の２つ。

ドロップシャドウは「#ab9710」で、描画モードは「通常」。不透明度が「100%」で、ノイズを「100%」にしています。
サイズ、スプレッドも含めていろいろ試せますね。

光彩は「#ffe9b5」で上記のような設定。こちらもいろいろ変えてみると、おもしろいかもしれません。
この光彩は文字の縁どりの役割をしています。
効果をかけた結果はこんな感じ。

文字レイヤーの塗りを0にする

レイヤーパレットの「塗り」を0%にして文字色を透明にします。
こうすることによって、ノイズの中でくりぬいたような効果がでます。この方法だと、バックにどんな色を入れても、複雑なグラデーションやパターンを入れても、対応できます。
結果はこんな感じ。

マスクを使って効果をぼかす

文字につけた効果をマスクを使って少しぼかして落ち着かせます。

私がやった方法は、マスクを追加して一旦黒で塗りつぶして全部を隠します。その後にボケ足の長い白のブラシで見せたいところを塗りつぶしていきました。
不透明度を下げて、ポンポンとたたく感じで徐々に白をのせていった感じです。
結果がこちら。

「レイヤースタイル」「グラデーション」「マスク」この３つを使って作るグラフィックでした。
簡単ですので、ぜひお試しください。

....どこで使えるのかは、、微妙ですけどね。。

HTML5はアウトラインが重要みたい

こんばんは。
コーディングをするときに、意識することっていろいろあると思いますが、やはり文書構造を意識してマークアップするのが重要なのではないかと思います。

HTML5を勉強すると必ず出てくる「アウトラインを意識する」ということも、上記の延長線上にあるのではないかなと思います。

今回は、「アウトライン」と「セクショニング・コンテンツ」のことについてのお話です。

セクショニング・コンテンツって何？

「アウトラインを意識したマークアップ」とは、中身の意味を意識したマークアップをするということ。
もちろん、今までも「これは段落だからpで」「これは見出しだからh3」とか考えながらマークアップしてきたと思いますが、HTML5ではこれらを内包する範囲そのものにも意味を持たせます。
今まで、divで囲んできたものが、違う要素に置き換わっていきます。
では、セクショニング・コンテンツの要素を見てみましょう。

section要素

sectionの意味を調べたところ、「区切り」「節」ということらしいです。
その意味の通り、「区切り」を意味するところに使うもの、それがsection要素です。
こちらのブログにも書かれている通り、
http://another-step.com/2010/08/22/70/

見出しが書けない固まりにsectionは使いません。もちろん、divの代わりにもなりません。

aside要素

単体で独立した情報になれるものを、これで囲みます。
ブログの個別記事、ある商品の詳細ページ、レビュー記事なんかもこれで囲みます。
新聞や雑誌の記事、1個と同じように考えるとわかりやすいかなと思います。

nav要素

主なナビゲーションはこれで囲みます。今まで、div id=”gnavi”とかで囲っていた部分ってことになります。ここで重要なのは「主な」ナビゲーションということ。ですので、フッターについてるナビゲーションやサイドバーに入ってる関連リンクなどへのナビゲーションはこれで囲みません。

いろいろ書いたけど、実際にマークアップしてみる

では、説明文ばかりじゃなんなんで、仮のワイヤーフレームを使ってマークアップしてみましょう。

「Moi」という名の会社サイトのトップページです。「Moi」には特に理由はありません。なんとなくです。

これをHTML5でマークアップすると、

<header>
 <h1>Moi</h1>
 <nav>
  <ul><li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li></ul>
 </nav>
</header>
<div id="contentsbox">
 <section>
 <h1>News</h1>
 <dl><dt>2011/04/04<dt><dd>会員制のスペシャルコンテンツ公開！</dd></dl>
 </section>
<section>
<h1>contents1</h1>
<p>コンテンツ１の説明です</p>
</section>
<section>
<h1>contents2</h1>
<p>コンテンツ2の説明です</p>
</section>
<section>
<h1>contents3</h1>
<p>コンテンツ3の説明です</p>
</section>
<section>
<h1>contents4</h1>
<p>コンテンツ4の説明です</p>
</section>
</div>
<aside>
<ul><li>リンク先もみてね</li></ul>
</aside>
<footer><ul><li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li></ul>
<ul><li>link1</li><li>link2</li><li>link3</li><li>link4</li></ul>
<img src="images/flogo.gif" />
</footer>

というような感じでしょうか。
これをみて、今までのマークアップと明らかに違うところがありますよね。

divが少ない

今までどんなものでもdivで囲っていたものが、sectionやasideで囲えるようになりました。今回のマークアップでdivを使った箇所は１カ所。
左エリアを区別するために使った、id=contentsboxのところだけです。
この区別になぜsectionを使わなかったのかというと、自然な見出しがつけられないからです。Newsと４つのコンテンツの短い紹介エリアを囲むのは、あくまでも見た目として左側に位置しているということを示したいからです。後々CSSでレイアウトする時に、この左エリア全体をfloatするでしょう。そのレイアウトのために囲いたいのでsectionではなくdivが妥当だと判断しました。
もし、Newsと４つのコンテンツを代表した見出し（例えば「初めての方へのおすすめ」など）がついていたとしたら、sectionで囲むのが妥当だと思います。

h1が何個も出てくる

今までのマークアップだとh1は１回しか使えませんでした。ですので、ヘッダー内のロゴにつけるのが一般的だったと思います。
HTML5では、セクションごとにh1を使うことができます。もちろん、今まで通りに見出しレベルを継承することもできます。これはどちらでも良いようですが、どちらかに統一した方がいいようです。
個人的にはセクションごとにh1から始める方がいいかなと思いました。その方が迷いがなくマークアップできるかなと思いました。

headerとかfooterとか

いきなり出てきたheaderとかfooterのタグ。これもHTML5で使えるようになったものです。いままでid="header"とかid="footer"とかつけていたエリアに相当するものです。

なんとなく、HTML5のことがわかってきたような？という感じです。
やってみてわかったのは、今までと同じで、やはり文書構造を意識してマークアップしていくことを心がけるということでしょうか。

きれいなコードを書いていきたいなと思います。

今回参考にした記事

HTML5ことはじめ
http://another-step.com/2010/08/22/70/

HTML5についてのおさらい
http://w3g.jp/blog/studies/html5report

噂のHTML5にとっかかってみた

さて、今回はHTMLのお話。
巷では、HTML5という言葉を本当によく目にしますし、聞きます。
とあるセミナーへ行った時も、必須技術の１つにHTML5が含まれていました。
HTML5とセットで言われているのが、CSS3。
この2つは間違いなく使いこなしていくことになるでしょう。

といっている私も、まだまだ勉強しきれていないのですが、まとまった時間がとれたのでとっかかってみました。

新規ドキュメント作成の基本

まず、現状のHTMLとの差異を確認してみましょう。
Dreamweaverなどで新規のhtml文書を作成するとき、デフォルトでこんなコードが生成されると思います。（選んだ文字エンコードやDOCTYPE宣言によっては、以下とまったく同じものが生成されない場合もあります。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
 content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

なんの手も加えていない、空っぽのままです。
これが、HTML5バージョンでは、

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css">
    <title>無題ドキュメント</title>
    <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8" />
  </head>
  <body>

  </body>
</html>

となります。
DOCTYPE宣言の呪文とか、文字エンコードの呪文とか、いろいろ省略できるようになりました。
HTML5コードの方が、HTMLを知らない人に説明しやすそうなほどですね。

さらに、HTML5とは仲良くないIE兄弟たちに、「だからー、HTML5なんだってー。もう！」と軽く「め！！」って怒るためのjavascriptを内に埋め込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css">
    <title>無題ドキュメント</title>
    <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8" />
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
  </head>
  <body>

  </body>
</html>

こちら、作ってくれたRemy SharpさんがGoogle codeで公開してくれています。

Remy Sharpさんのサイト
http://remysharp.com/2009/01/07/html5-enabling-script/

Google Code
http://code.google.com/p/html5shiv/

とてもありがたい。これでIE兄弟でもレイアウト可能になりました。

まず、とっかかりとして、この文書を作れば、内にどんどんコードを書いていけば良いということです。

CSSリセットコード

CSSレイアウトを行う時、まず書く要素が持つデフォルト値をリセットしますよね。
Richard Clarkさんが、CSS3バージョンを作って公開しています。

公開記事
http://html5doctor.com/html-5-reset-stylesheet/

Richard Clarkさんのサイト
http://richclarkdesign.com

CSSファイルの先頭に、適宜に付け加えていくと良いと思います。

以上で準備は整った。次回は今までのコードをどのようにHTML5に変換し、CSS3を絡めていくかのお話です。ではー！

＜今回参考にしたサイト＞

Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報
http://e0166.blog89.fc2.com/blog-entry-870.html

結局どうすればいいの？
http://hail2u.net/documents/diveintohtml5-semantics.html

HTML5+CSS3入門
http://yoppa.org/taumedia10/1695.html

どれもすごく良い記事でした。細かい部分までお話を読みたい方は、ぜひリンク先を読んでみてください！

文字の組み合わせを考えてより美しく仕上げる（バナー制作編４）

こんばんは。バナー制作編も４回目となりました。
１つのバナーを作る工程を記していますが、正直、こんなにたくさん書くことがあるとは思っていませんでした。

では、さっそく。続きです。

和文フォントと欧文フォントを組み合わせる

今回入れる文言は、「抽選で50名様に当たる！」です。
この文言をリボンのところに入れてみましょう。

「50名様」のあたり、なんだかぎこちないですよね。
この和文フォントの特徴で、数字は少し小さく表示されます。この数字だけを選択して2pt大きくしたのが、こちら。

違和感が少し減ってきました。
更に、数字のみ欧文フォントを使ってみましょう。

なんだか、間延びしていた「50名様」が整ってきました。
和文フォントでの数字は、デフォルトでは少し小さく表示され、１文字の縦横比率が正方形に近いので、数字だけを見るとなんだか野暮ったい感じになります。
そこで、よくやる方法として、数字だけ欧文フォントを使うというもの。今回は、Calibriというフォントを使って、縦長の数字にしました。
すっきりした上に読みやすくなったと思います。

テキストをシェイプ化する

最後にテキストをシェイプ化しましょう。テキストレイヤーを右クリックすれば「シェイプに変換」メニューが現れるので、それを選ぶだけです。
こうすることによって、「50名様」の「様」が少し上にズレていたものが、丁度良くおさまりました。
テキストをシェイプ化するのは、文字の滲みを軽減することにも使います。

もう、文言変更なし！って時には使えるワザですね。シェイプになっているので、拡大縮小は十分できますよ。

さて、後は「詳しくはこちら」を右したに入れたら完成です。
文言だけでなく以前にやった丸矢印を入れて、クリックしやすいように見せましょう。
以上で、バナー制作編は終わりになります。

いかがでしたか？細かい部分は説明不足になっているので申し訳ありませんが、こちらの記事をヒントにいろいろ試してみていただけると嬉しいです。

今回、作例として作ったバナー、実は作るのに２時間ほどかかっています。
記事として書きたいポイントをふまえつつ作っていたら、それくらい時間がたっていました。
以前は、バナー制作に30分使うのがMAXで、それ以上は時間かけないと思っていましたが、今はやれるところまでやるというのが持論です。
もちろん、制作物には納期というものがあるので、スピードは重要ですが、考えて作ることをあきらめないようにしています。
写真選びも、色も、フォントも、レイアウトも・・・いろいろ悩むところはたくさん。何度もフォントや配色を選び直した結果でてきた制作物は、時間をかけた分、考えた分がちゃんと表にでています。

デザインに正解はないけれど、「これ、いいと思うんです！」と自信を持って出せるデザインをしていきたいと思います。
「もっといいのができたかも・・・」と後で思ったりするんですけどね。。。（´(ｪ)｀）

では、このへんで。

文字に気を配ってわかり易くする（バナー制作編３）

こんばんは。今回の地震によって被災された皆様、お見舞申し上げます。私にできることを考えた結果、「アウトプットを止めない」ことだと思いましたので、このブログ更新も再開したいと思います。今、大変な状況に置かれている方へのエールとして、稚拙ではありますが私なりの「作って喜ばれること」を続けていきたいと思います。

では、バナー制作の続きを。

文言に優先順位をつける

今回のバナーに入れる文言は、

１．予約受付中！
２．天使が届ける
３．フラワーボックス
４．先着50名様プレゼント
５．詳しくはこちら

の５つです。

この中で一番伝えたい文言は、さてどれでしょう？悩みますねー。

１.「予約受付中！」
確かに重要。「今」感を伝える文言ですが、でかでかと「予約受付中！」としても、「何が？」となります。
バナー等は、入口として設置されますので、クリックした先に何かしらの説明ページがあります。それを読んで「予約」というアクションを起こしますので、
説明ページで「予約はこちら」という文言を大きく扱うのはアリですが、入口のバナーでは「ほどほどに目立つ」程度で良いと判断。

２.「天使が届ける」
この５つの中で一番意味がわからない文言です。天使って。。。本当に天使がいるわけでもないですし。。
（サービスとして天使のコスチュームを着た美少女が届けてくれるのかもしれません。。ないか。）
しかし、キャッチーな言葉ではあります。「どういうことだろう？」と疑問を持ってクリックしてくれるかもしれません。なので、そこそこ重要。

３.「フラワーボックス」
商品名（サービス名）になりますので、いわゆる「看板」です。もしかしたら、このサービスがウケて、母の日などに「フラワーボックス」と検索してくれるかもしれません。つまり、「覚えて欲しい」言葉です。ですので、これが一番印象強くしたいので、一番重要。

４.「先着50名様プレゼント」
フックになる言葉です。「何かもらえる」と思ってもらってクリックしてほしい。ですので、こちらもそこそこ重要。

５.「詳しくはこちら」
バナー制作では欠かせない文言ですね。そして、大体右下にあるのが定石です。

と、以上から考えて「フラワーボックス」＞「天使が届ける」＞「予約受付中！」という優先順位になりました。
この順位で、文字の大きさを変えてレイアウトしてみましょう。

それぞれの文字色については「予約受付中！」は影の色、「天使が届ける」は茎の色、「フラワーボックス」はお花の色から抽出し、文字色を決定しています。
こうすることによって、写真との馴染みがよくなり、変に浮き立つことはなくなります。

さらに、「フラワーボックス」にだけグラデーションを適用して、より目立たせています。
文字を目立たせる方法として太字にすることがありますが、今回の場合はお花の可憐さや華奢な感じから離れてしまうので、
グラデーションをつけることによって目立ち度を調整しています。

文字配置後の処理に気を配る

文字間に気を配ると、より読みやすくなります。私がよくやるのは、文字パレットにある「文字間のカーニングを設定」で「オプティカル」を選んでおくこと。

分かりやすいところだと、「フラワーボックス」の「ク」と「ス」の間が微妙に違っていると思います。
１文字づつ、カーニングを調整した方が良いですが、この「オプティカル」をチェックしておくと、大体きれいに揃うので、後は気になるところを微調整していけばいいと思います。

そして、写真と文字が重なっているところは、可読性を増すために、一工夫します。
文字自体にレイヤー効果の「境界線」や「光彩」をかける時もありますが、今回のイメージにはあいません。
こういうときは、文字の後にボケあしのあるブラシで不透明度を下げた白を軽くポンポンと描いていきます。
私がよく使うブラシはボケあしのある100pxのやつです。

こうすることによって、いかにも「加工した」っぽい感じにならないで、可読性を増すことができます。
ぱっと見、分かるか分らないかのところを見極めて白を置いていきましょう。

では、今回はここらへんで。
次回は、「先着50名様にプレゼント」の部分のお話です。

質感をプラスしてクオリティを上げる（バナー制作編2）

こんばんは。今回はクオリティを上げる方法の１つをご紹介します。
出来上がった制作物を見て、「なんだか垢抜けないんだよね」なんて思うとき、質感をプラスすると良くなる時があります。

文字のバックにも、気を使う

バナーなどで、文字を入れる際、背景は隠れてしまうし、ゴチャゴチャしているよりもスッキリとしている方が可読性が増すと思って、加工しないままではもったいない！
たとえ見えない（正確には見えているので、見え辛いかな？）ところでも、ちゃんと質感をプラスしてあげれば全体のクオリティが上がります。

この２つの画像、下の画像には、地色の黄色よりも薄い黄色を、ボケあしのあるブラシツールでところどころ明るくしています。これがあるのと無いのでは、雰囲気が違ってきます。下の画像の方がより「ふんわり」感が出てきてると思いませんか？

リボンにも質感をプラス

よく、プレゼント系ではリボンのモチーフを使って目立たせます。プレゼント＝リボンのかかった箱というイメージから、ぱっと見でも何かのキャンペーンやプレゼントがもらえる話なのかと分かってもらえるので、使うことが多いです。
今回も「先着50名様にプレゼント！」という文言を入れる場所として、リボンの上に重ねることにしました。
ここでも、大体が文字に隠れて見えなくなってしまうリボンなのですが、グラデーションを使って質感を出すことによってより「プレゼントっぽく」なっていきます。

どうですか？ちょっと手間をかけるだけで仕上がりがぐんと良くなっていきます。まるでお料理みたいですね。
（差し引きを考えてバランスを見る点も、同じだなぁ。）

次回は、いよいよ文字入れです。文字に関してはいろいろ紹介することが多くなるので、長くなりそう。。。

今回の記事の冒頭で「質感をプラスすると良くなる時があります」と言っているのは、必ずしも、そうだってわけではないからです。
これも、「何を伝えたいのか？」に準じていることなのですが、白単色に文字や切り抜き写真が載ってるだけでも、力のあるデザイン、クオリティの高いデザインはあります。この場合、色数も抑えめでより空間を広く取ったデザインに多いタイプですが、そういったものには余計な装飾や質感を足すことは避けた方が良いでしょう。
デザインに決まったケースはありません。１つ１つが、違う意味と役割を持って作られていきます。
何が最善なのか、どうすれば伝わるのか、を隅々まで考えるのがデザイナーのお仕事だと思います。私も考え抜くタフなデザイナーであるように、努力していきたいです。

どうやって締めたらいいかわかんなくなって、感想文みたいになっちゃった。。すみません・・・