先日からＣＭで見かけたことがあると思いますが、
道玄坂方面の109横にユニクロがオープンしました。
出勤前に行列をみかけて、なんの行列かと思いましたが
たくさんの人が並び、びっくりしました。

写真は、仕事帰りに撮ったお店の入り口です。
白色の電灯で、店内がとても明るいのが印象的でした。

さすがオープンだけあって、お得なものがたくさん
あるようですよ♪

渋谷校周辺は、去年Ｈ＆Ｍもオープンし、
今年はユニクロがオープンして綺麗なビルが増えましたね。

今度は何か出来ていくのか楽しみです☆

お店のオープンのほかにも、
テレビの天気予報の中継や街頭アンケートなど、
渋谷は何かと話題の多い街ですよね。
ちなみに、以前ココ調のアンケート現場に遭遇しました（＾＾）

また何か出来ましたら、ブログに載せて行きたいと思います。

ＩＳＡパソコンスクール渋谷校/ＫＩＭＵＲＡ

あけましておめでとうございます。

今年も皆様のお手伝いが出来るよう

インストラクター一同授業をさせていただきます。

どうぞ、よろしくお願い致します。

また、今回、初めての投稿となります　oikawaです。

ブログ更新がなかなか出来ず、申し訳ありません。。

今年もさらに様々な情報をお送りさせていただきたいと思います。

 よろしくお願いいたします。

本日から仕事始めという方もたくさんいらっしゃると思いますが、

渋谷校も本日より21時まで通常開校しております。

お買い物やお仕事の帰りにぜひ、ご受講ください。

お待ちしております。

今年も皆さんにとってHappyで素敵な一年となりますように。

インストラクタ　oikawa

本日は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

パソコンスクールISA渋谷校の反対側、道玄坂沿いにある
ａｍ．ｐｍにお昼ご飯を買いにいったところ、“くまさんの肉まん”なる
変な・・・、じゃなくて面白い商品を見つけました。

ちなみに店頭の但し書きの札には「くまの肉ではありません」
いやいや、それは分かってます（笑）

ビジュアル的に興味がある方はぜひどうぞ。
お味の方は普通の肉まん並みに美味しいようです。

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