こんにちは。

久しぶりに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でロールオーバーを作る"

まずは昨日の”生徒さんからの御礼”の続きです。
いただいた焼き菓子がこちらです。

本当にありがとうございました！！

さて、話は変わりますが「初めてWEBのサイトを制作する」、となった時に
「色はどうすればいいの？」「デザインは？」という風にどこからどう手をつけて
いったらいいのか全く見当がつかない・・・なんていうことないですか？
そんな方にはこちらのWEBサイトがおすすめ

Web Site Color Index

ここではカラー別、イメージ別で色々なサンプルサイトが紹介されています。
あとはこちらのWEBサイトもおすすめ

ikesai.com -いけてるサイト ドットコム

ここではサイトカテゴリー別で色々なサンプルを見ることができます。

上記いずれのサイトもWEBデザイナーが制作したあらゆるカテゴリの
ページが沢山掲載されていますので”初めてWEBサイト制作にチャレンジする”、
という方には指標が見えて取り掛かりやすくなると思います。

これからサイトを作ってみる、という方はこちらを参考にぜひ頑張ってみてください！！

パソコンスクールISA渋谷校デザイナー/INOUE

今日はPhotoshopを使用したメニューボタンの作り方をご紹介です。

まず横のガイド線を1本入れます。
その後新規レイヤーを1枚作成し、ガイドに重なる位置に[長方形選択ツール]で
適当な大きさ範囲選択を作りお好きな色で塗りつぶしをかけます。 

[選択範囲]メニュー→[選択範囲を変更]→[滑らかに]で3pxかけた後
Shift+Ctrl+Iキーで範囲選択を反転し、Deleteキーで背面を削除します。
角が取れた丸みのある四角が出来ます。 

continue reading "デザインtips – 3．シンプルなメニューボタン"

今日はリストとCSSを使ってナビゲーション用のタブを作ってみます。
少々長くなりますので興味の無い方はスルーしてください（笑）

まず最初にxhtmlファイルを作成します。
<div>タグでナビゲーションのボックスを作りますが記述は以下のようになります。
***************************************************************************
<div id=”navi”>
 <ul>
 <li><a href=”#”>Home</a></li>
 <li><a href=”#”>Company</a></li>
 <li><a href=”#” class=”active”>Business</a></li>
 <li><a href=”#”>Careers</a></li>
 <li><a href=”#”>Information</a></li>
 </ul>
</div>
<div id=”main”>CSSでタブナビゲーションを作る</div>
***************************************************************************
ナビゲーション部分のボックスはID：navi　本文部分のボックスはID：mainとしました。
現在アクティブになっているページ（Business）のliはclass名：activeにしていますが
これは各ページごとに変わってきます。例えばHomeのページではHomeのliに
class=”active”を設定するわけです。
リンクはダミーリンクで#を入れていますが実際はリンク先のアドレスを入れてください。

ただしこれではリスト形式で以下のように文字が表示されるだけです。

continue reading "デザインtips – 2．CSSでタブナビゲーションを作る"

渋谷ブログがスタートして1ヶ月ほど経ちましたが、
そろそろデザインネタが欲しい！と店長から要望がありました。
渋谷校ではWEB・DTP分野をメインに担当しておりますが
実際のホームページ制作で使える本格的なテクニックは
ブログで載せますと大変な量になってしまいますので（＾＾；）
小技tips系などをシリーズで少しずつUPしていきたいと思います。

1回目の今日はPhotoshopを使ってのおすすめAQUA風ボタンの
作り方をご紹介します。

まず最初に、[角丸長方形ツール]（シェイプレイヤー）で
適当な大きさの角の丸い四角を描きます。角丸の半径の値は16pxにしました。

この時自動的に作られたレイヤーをダブルクリックして、
レイヤースタイルの[光彩（内側）]をオンにします。
描画モードは[乗算]で、不透明度は40%程度、色は黒にします。

continue reading "デザインtips – 1．AQUA風ボタンの作り方"