本日はIllustratorのスポイトツールで画面上のどの色でも
吸い取ることができる方法をご紹介します。
なおOS：Windows、バージョン：CS2で行なっています。

まず色を設定したいオブジェクトを選択しておいて
スポイトツールを選択します。

デスクトップのIllustratorアイコンのオレンジ色を吸い取ってみます。
Shiftキー＋マウス左ボタンを押したままドラッグをします。
ドラッグ開始地点はIllustratorのドキュメント上からです。

吸い取りたい色の上でマウス左ボタンを離すと下図のように
見事に色を適用することができました。

これなら拾いたい色のある画像を配置しなくても大丈夫ですね。
例えばインターネットで気に入った色があった時など便利じゃないでしょうか。

パソコンスクールISA渋谷校/INOUE

こんにちは。

いきなりですが、例えば下図のような左右のカラムが固定で、

中央のカラムが可変というような3カラムのレイアウトを作りたい場合、通常CSSではfloatを使います。

ただしカラムレイアウトはdisplay: table-cellでも表現できます。
display: table-cellとは、テーブルの構造を表現できるCSSプロパティで
IE8から対応しています。今回はこの2つの方法を比較してみたいと思います。

まず最初にfloatで3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

【HTML】
<div id=”warrper”>
 <div id=”l_navi”>ナビゲーション</div>
 <div id=”content”>
  <div id=”content_inner”>コンテンツ</div>
 </div> 
 <div id=”r_side”>右サイドバー</div>
</div>

【CSS】
#l_navi {
 float: left;
 width: 200px;
 margin-right: -200px;
 background-color: #ff0000;
}

#content {
 float: left;
 width: 100%;
}

#content_inner {
 margin: 0 200px;
 background-color: #ffffff;
}

#r_side{
 float: left;
 width: 200px;
 margin-left: -200px;
 background-color: #009900;
}

上記のようにマイナスマージンを使ったり、真ん中のカラムをdiv要素で余分に囲ったりなど、
結構複雑な記述になります。floatを使っているので、clearも必要になります。
一方、display: table-cellで3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

【HTML】
<div id=”warrper”>
 <div id=”l_navi”>ナビゲーション</div>
 <div id=”content”>コンテンツ</div>
 <div id=”sidebar”>右サイドバー</div>
</div>

【CSS】
#warrper {
 width: 100%;
 display: table;
}

#l_navi, #content, #sidebar {
 display: table-cell;
}

#l_navi {
 width: 200px;
 background-color: #ff0000;
}

#content {
 background-color: #ffffff;
}

#r_side {
 width: 200px;
 background-color: #009900;
}

CSSソースの長さ自体は大して変わりませんが、非常にシンプルな記述になります。
floatを使っている場合に必要だったclearも不要です。

いままではfloatを使って行っていたカラムレイアウトが、このdisplay: table-cellを
使うことによって、よりシンプルに表現できます。
その他、display: table-cellは文字通りtableですので、
カラム内での縦方向の位置vertical-alignも思った通りに作用してくれます。

しかし、残念なのはこのdisplay:table-cell、IE8からしか対応していません。
FirefoxやSafariなど、IE以外の主要なブラウザはこのdisplay: table-cellに
ちゃんと対応しているのですが、現在でもIE6を使っているユーザーが大半なので・・・惜しいですね。

パソコンスクールISA渋谷校/INOUE

こんにちは。

前回、HTMLでリストを使用した際に空いてしまう隙間を
埋める方法をご紹介しましたが、今日はその続きです。

画像でナビゲーションバーを作った場合に出来るこの隙間。
vertical-align:top か bottomを指定する以外にも、
いくつか方法があります。

例えばフォントサイズを小さくしたりline-heightを無くしてしまう。

li {
font-size:1px;
line-height:0;
}

あるいは、IE6ではリスト内のaなどインライン要素を
display:block;などでブロック化した場合、
line-heightの解釈がおかしくなるようです。その対処法として、

li a {
display:block;
line-height:normal;
}

など試してみて下さい。これで隙間はきれいに埋まるはずです。

パソコンスクールISA渋谷校/INOUE

こんにちは。

今回はHTMLで画像を使用する時のCSS設定方法をご紹介します。

画像を見出しタグ、ul や ol のリスト形式で
マークアップする機会って、結構多いと思います。
グローバルナビゲーションや写真のサムネイルなど。

そういうときに画像の下に小さな隙間が空くことがあります。
これはIE6.0でよく見られる現象です。

IEで画像の下に隙間が空くのは、IEで画像の元々の設定が
baselineになっているからです。

baselineというのは、アルファベット小文字のg j p yといった
通常のベースライン（下線）より下にはみ出る部分が
隙間となって現れる状態です。

CSSで画像の下の隙間を消すには
画像に対してbaselineの設定を別のものにしてあげればよいのです。

つまりは、topかbottom。

img {vertical-align: bottom;}

このように設定してあげれば画像の下の隙間は消えるはずです。

パソコンスクールISA渋谷校/INOUE

こんにちは。

久しぶりにWEBネタをUPします。
ホームページでボタンにマウスをのせるとボタンの色や
形状が変わったりする効果を見たことがありますでしょうか？

こちらをクリック↓

これはロールオーバーという設定でHP制作に使うDreamweaverと
いうソフトを使えばカンタンに作成できます。

が、その方法だとJavascriptという言語が自動的にhtmlソースに
記述されてしまいます。今まではメニューバーなどをロールオーバーさせたい場合は
Javascriptを使うのが一般的でしたがJavascriptをhtmlに組み込んでしまうと
htmlが複雑になってしまうだけでなく、ページの表示が遅くなります。
出来ればCSS仕様で作った方がベターです。

今日はそのCSSを使ってロールオーバーを作る方法を紹介したいと思います。

まずはPhotoshopやIllustratorなどグラフィックソフトを使って
以下のようなマウスを乗せる前用と乗せた時用、2つのボタンを用意します。
（サイズは同じにしてください。ここでは100px×30pxで作成しています）
ボタン名は通常表示用の【a.jpg】、ロールオーバー時の【a_over.jpg】
以下それぞれ【i.jpg】【u.jpg】【e.jpg】【o.jpg】としています。

continue reading "デザインtips – 4．CSSでロールオーバーを作る"