ピンデザイナーのWebサイト構築技法

スパイウエア対策機能を搭載！！

アメリカネットスケープコミュニケーションズ社は「Netscape8.1」をサイトで公開しました。もちろん無無料ダウンロード可能な状況です。
ダウンロードはこちら
目玉機能はスパイウエア対策機能が搭載されていることです。

今日ダウンロードしてなんとかインストールしてみました。当然ですが英語です。コンピュータ用語を理解出来ればインストールは自力で出来ます。
面白いと感じたのは、「セキュリティーボート」と呼ばれるブラウザ右下にボタンを押すと出てくるボード。ここで、スパイウエアをガードするかとか？の設定をする。

複数のユーザーが使い分けられるように、プロファイルの管理機能なんかも付いています。（起動時にユーザ選択が出来ます。）
仕事用Webページ閲覧、プライベートWeb閲覧などと分けて使用すると便利かもしれない。

このサイトのＦＣ２ブログランキングは？⇒こちらをクリック
もしかして1ヶ月ぶりに１位になれるかも…
さらなる応援お願いしますm(__)m

ボーダーの種類、色、太さを個別に

ボーダーを設定するプロパティのうち、線の種類や色、太さを個別に設定することができます。前回までは、個別に指定するのではなく、同一種類、色、太さという設定を行ってきましたが…。

border-top,border-right,border-bottom,border-leftというように個々に設定することができます。

線の種類、色、太さを個別に設定することが出来ます。線の太さなどをうまく組み合わせれば画像を使わなくてもいろいろな表現が出来ると思います。

<p style="border-top:dotted 5px #ff0000;border-left:solid 10px #000000;border-bottom:outset 1px #ccffcc;border-right: solid 1px #cc99cc;">線の種類、色、太さを個別に設定することが出来ます。線の太さなどをうまく組み合わせれば画像を使わなくてもいろいろな表現が出来ると思います。</p>

ＦＣ２ブログランキングに参加しています。
１日１回お願いします。⇒こちらをクリック
あなたのクリックが管理人を救いますm(__)m

[PR]ディズニーのアイコン登場
ダウンロード無料。メールやブログ,メッセンジャーに
お気に入りのキャラクターを貼ろう!

正しいWebデザインとは？

ＣＳＳ、レイアウト、配色、サイト構築についてまで書かれています。ビギナーももちろん中級者や上級者も全てこの一冊でＷｅｂデザイナーとして恥ずかしくない知識とたしなみを身につけることができます。

プロとして恥ずかしくないWEBデザインの大原則―正しいWEBデザインのルールを知っていますか?

セブンアンドワイで購入 アマゾンで購入

今日は時間がなくて…。久しぶりに講師業でした。

このサイトのＦＣ２ブログランキングは？←クリックm(__)m

購入方法の違いで…

よく見に行くサイトなんですがWebデザイナー辞典というすばらしいサイトがあります。多分このサイトご覧の方は、ご存知だとは思います。書き込みさせていただきましたが、ソフトの格安？購入方法をもう少し解説します。この記事をご覧になれたあなたはラッキーかも…。

価格についての過去記事はこちらです。

• 方法１
  通信講座を受講し、技術とソフトをゲットする！！

  詳しくは「無料資料」⇒デジタルハリウッド株式会社 が1番いいと思います。就職サポートもしてくれますしね！デジタルデザイン専攻で総額￥370,000

  ちょっと高い？ソフトは選択して出来るそうですが…。

• 方法２
  もし離職中であれば…職業訓練学校へ通う！

  職業能力開発校(都道府県立の職業訓練校)
  職業能力開発短期大学校
  職業能力開発大学校（職業能力開発総合大学校を含む）
  職業能力開発促進センター（ポリテクセンター）
  障害者職業能力開発校
  といった感じです。

  ここで学習している間に在学証明書をもらいソフトを購入します。若干書類を記述しなければなりませんが…。この購入は絶対できます。なぜならば実際に私の教える生徒はみなこの方法で購入していますから（笑）

そして究極の技…

とその前に

続きを読む前にＦＣ２ブログランキングは？m(__)m

ボーダー領域が見える表現

前回の囲み技の応用で、ボーダーを白い点線にして、ボーダー部分の背景が見える例題です。画像を使わないで表現するので、とても簡単で、見栄えがいいです。但しあまり濃い色を使うと…。

ブログの背景色とボーダーの色を同一にするとこのような表現が可能です。

<p style="padding:20px;border:10px dotted #ffffff;color:#ffffff;background-color:#336699;">ブログの背景色とボーダーの色を同一にするとこのような表現が可能です。</p>

ここでpaddingとは、ボーダーと文字列との距離を指します。例題では4方向（上、右、下、左）に20pxスペースを入れています。お分かりにならない場合は、ソースをコピペして数字をいじってみてください。

ところで、このサイトのＦＣ２ブログランキングは？⇒こちらをぽちっと
クリック応援お願いします。m(__)m

囲み枠の装飾

文字列の囲みを変更するだけでだいぶ見やすくなりますよ！ブログで是非つかってみてください。

使い方は

<p style="border:1px solid #33ccff;">表示する文字列</p>

例題見本の”から”の間を置き換えてください。表示する文字列にはご自分の表示したい文字列を入力してください。

border:1px solid #336699

border:1px dashed #336699

border:4px dotted #336699

border:4px double #336699

border:6px outset #336699

border:6px inset #336699

border:6px ridge #336699

ＦＣ２ブログランキングに投票を！！m(__)m

テーブルタグによる角丸表現

ちょっと装飾が寂しいときそんな場合、角丸で文字を囲んだらいかがでしょうか？やり方は、そんなに難しくありません。最悪はコピペしてください。完成品は下のようになります。

	ここに文章を入力します。 このようにすれば角丸の表現ができます。

まず最初に画像処理ソフトで円を下記のように作成します。その後1/4に分割して任意のフォルダーにGIF画像で保存しておきます。

そして3行3列のテーブルを作成し角にそれぞれ画像を挿入します。下記テーブルはわかりやすいようにborer="1"にして表示してあります。

	ここに文章を入力します。 このようにすれば角丸の表現ができます。

中央の枠に文章を入力すれば完成です。もちろん文章が長くても平気です。この技を応用すると角丸Webページをつくることができます。

このサイトのＦＣ２ブログランキングは？
ランキング登録お願いします。m(__)m

絶対必要なレイアウト教本

レイアウトデザインの法則
毎日コミュニケーションズ 価格：3,675円	セブンアンドワイで購入 アマゾンで購入

学校へ通っても…だれも教えてくれないレイアウトの法則。見やすくきれいなレイアウト作成では絶対必要な基礎知識が凝縮されています。

他のブログを見ていても紹介されていないのは？なぜでしょうか？

こんな人におススメです。

• 自己流デザイナー
• デザイナーになりたい人
• 基本に戻りたいデザイナー

本を買っても買わなくても…

ランキングクリック投票をm(__)m

テキストを発光させる？

text-shadowプロパティーやfilterプロパティーを使えばドロップシャドウ以外のテキスト装飾をすることが出来ます。しかし前回同様ブラウザ固有のものであるので注意が必要です。

Safariテキスト発光

<p style="font-size:18px; font-weight:bold; color:#ffccff; text-shadow:#ff0000 0px 0px 10px;" >Safariテキスト </p>

水平方向、垂直方向の移動を「０」でぼかしの色と距離だけ設定すればOKです。

IEテキスト発光

<p style="font-size:18px; font-weight:bold; color:#ffccff; filter:Glow(Color=#ff0000,strength=7); width:180px; height:25px;"> IEテキスト発光 </p>

Color=色指定、Strenght=発光強度のように指定します。発光強度は数字を大きくすると強くなります。

ご覧になったらここをクリックm(__)mランキングに参加しています

画像を使わないドロップシャドウの表現

この表現方法は、ブラウザ特有の表現です。 MacのsafariとWindowsIE5.0以降のブラウザのみです。また両ブラウザの互換性もないので、注意が必要ですが。。。。

ドロップシャドウ

<p style="color:#FF0000; text-shadow:#999999 5px 5px 10px; font-size:18px;">ドロップシャドウ</p>

text-shadowプロパティーを指定することでドロップシャドウの効果をあたっることが出来ます。例題では、「ドロップシャドウ」という文字列の段落を作り、その段落に対して、フォントの色#ff0000、シャドウの色#999999、その後ろの３数字はそれぞれ、水平方向の距離、垂直方向の距離、ぼかしの距離を入力しています。WinIEではそのように確認できませんよね！Mac Safariで見てください。

ドロップシャドウ

<p style="color:#ff0000; filter:DropShadow(Color=#999999,OffX=2,OffY=2,Positive=1); width:180px; height:20px; font-size:18px; font-weight:bold;">ドロップシャドウ</P>

これはほとんどの方、シャドウ付きで閲覧できるはずです！filterプロパティーは「ビジュアルフィルタ」と呼ばれWindowsIEの拡張機能として用意されたものです。したがってWindows　IE　5.0以降でないと表示することができません。 ここで、width(幅)を指定していますが例題だと18(px)X8（文字）。なので単純計算して18X10=180とし、height(高さ)は単純に文字サイズと同じ18pxとしてみました。

このエフェクトは幅もしくは高さを記述しないと効果が現れないので注意です。

ご覧になったらブログランキングに投票お願いします。⇒こちらです。
おかげ様で2位なんですが…どうしても1位になりたいです。
応援よろしくお願いしますm(__)m

【PR】Ｗｅｂエンジニアの転職なら　【ウェブキャリア】

社会人からWebデザイナーへ

異業種からの転職は、どの業種でも難しいと思います。とにかく独学では人脈もできないし、腕も「井の中の蛙」になってしまいます。
「無料」の学校へ通うのもいいかも知れませんが、やはり「タダ」のものはそれなりのレベルになってしまいます。周りの人間は、自分と同じ道を歩むわけでもありませんので、雰囲気がいまいちだと思います。

Webデザイナーになるための学校

自分のスキルを上げるためには、やはり「有料講座」。でもしかし…。お金が…。なんて自分への投資できないならそれは、無理なこと。日本にはあまり考え方がありませんが、外国では５年働いたら、スキルアップの為に、会社を辞めて学校へ通ってまた再就職というように常に自分を高めることをしている人がいるそうだ。

でも有料講座学費が高い。

しかし、しかし。。。ある条件が満たされていれば、学費割引に！！

厚生労働省「教育訓練給付制度」

○会社が雇用保険を自分にかけてあり３年以上５年未満
講座の20％の代金（上限10万円）

○上記５年以上
４０％（上限20万）

ただし、受講終了後（卒業しないとだめ）書類を提出するとキャッシュバックされる。おススメの学校は⇒
ヒューマン・アカデミーのWebデザイナー養成講座。

ヒューマン・アカデミーWebデザイナー養成講座では、HTMLの基本、DreamWeaver、Flash、Photoshop、Illustratorとアプリ操作だけに終わらず、作品制作・個人指導まであります。
詳しくはこちらから無料資料請求できます。

FC2ブログランキング今何位？
⇒ここをクリックm(__)m
ランキング投票お願いしますね！

DreamWeaverのサイトの定義

DreamWeaverにおけるサイトの定義がまず１番最初にしなければならない作業です。そしていちばん理解に時間がかかるところです。
ここが理解できないと新規サイトを作成することが出来ません。ということで操作を動画で紹介してみます。
この操作はサイトを新規に作成するとき１回だけ行います。
たとえば、花屋の紹介サイト、中華料理屋のサイトを作ろうとするならば別にフォルダーを作成して、各フォルダーにサイトの定義を行うということです。（Dreamweaverにサイトを作成するフォルダーを教えると言う意味です。）
なおバージョンによっては、ルートに日本語が入ると、挿入した画像がブラウザでプレビューすると表示されないと言う現象が起こります。いずれにしても、フォルダー名、ファイル名は英数半角文字で入力してください。

動画解説は⇒こちらです。

FC2ブログランキング今日は何位？⇒ここをクリックm(__)m

Webサイト作成に役立つ本

この２冊の本はWeb作成時にとても役に立ちます。どちらかと言えば実務的なレベルではないかな？と思います。特にプロフェッショナルＷｅｂプロデュースは（古い本ですが）絶対に購入し一度は読む必要があると思います。

標準Ｗｅｂデザイン講座基礎編 第２版

	セブンアンドワイで購入 boopleで購入 アマゾンで購入
おススメ★★★★★ Web制作のワークフローWebサイト制作の概念に加え、XHTMLやCSS、さらにCMSなど技術の話題まで、わかりやすく紹介しています。第１版 よりも見やすく読みやすくなっています。来年教科書にしようか？と考えています。

プロフェッショナルＷｅｂプロデュース
プロとしてのＷｅｂサイト制作の基礎

	セブンアンドワイで購入 boopleで購入 アマゾンで購入
おススメ★★★★★ ただWebサイト制作について概論を記述するのではなく、実際のクライアントとのやりとりをどうするのか？企画書にはどんなことを記述するのか？実例で解説しています。少しレベルが高いですが、サイト制作をしていると意味がだんだん分かってくると思います。

FC2ブログランキングに参加しています。ご覧になったら⇒ここをクリック
今日は何位でしたか？派手なFLASHでもやらないとだめなのかな〜

colspanの復習練習問題

またまたこの表を作成してください。

1	2	3	4
5	6	7	8

そして6と7のセルを結合してください。

1	2	3	4
5	6		8

さてだいぶ時間が経ってしまったのでお忘れになってしまいましたか？
まずは手順の確認です。

1. 指定のテーブルを作成し、<td>〜</td>の間に順番に番号を入力しておく。

2. 結合するセル番号を把握する。

3. colspanを入れるセル番号を考える。例題で考えると「６番のセルが先頭になるので６番のセルのtdにcolspanを指定する。

4. 結合する数を考える。いくつのセルを1つにするのか？のいくつのの数を入れる。）0や列数以上の数字は入らない。
ポイントはいくつのセル？そう今回は「２」個のセルなので２です。

5.表示に必要がなくなった<td></td>をコメントする。

上記の方法はもちろんWebクリエイター能力試験上級対策の合格技の一つですよ！

ところで…ランキング投票していただきましたか？

まだのあなたは⇒ここをクリック

なぜ追いつけない？管理人かなり落ち込み中

このブログでも使用している文字装飾を少し解説してみたいと思います。このやり方はFC2ブログだけではなく他のブログやご自分のWebサイトにももちろん使うことが出来ます。

手っ取り早く↓を作ってみましょう。

CSSによる表現その１

私の場合こういった見出しを作成する際は、HTML見出しタグを必ず使用します。これは最近騒がれて？いる常識？のSEOと言う概念に基づいているからです。

定義方法	.midashi { color:#000000; background-color:#ffffff; font-size:12px; font-weight:bold; border-left:10px solid #254A00; border-bottom:1px solid #254A00; width:300px; margin: 2px 0px 5px 0px; padding:2px; }

使用方法	<h5 class="midashi">CSSによる表現その１</h5>

定義方法のところは、FC2ブログで言うと「ツール」⇒「環境設定」⇒テンプレートの設定で画面を開きCSSを記述してある、一番最後のところに上記の様に定義してください。

次に使用方法…これはいつも文章を打つ画面に同じ様に入力してください。

とりあえずコピペでやってみましょう〜

ランキング投票していただきましたか？
まだのあなたは ⇒ここをクリック
ランキング今日も…↓(T_T)/~~~なのでm(__)m

今日はちょっと暇？いつもか！なので時間制限100分で、どのくらいアイデアが浮かぶのか挑戦してみました。先日リンク先のWebサイト見ていたら面白い企画があり作成してみようと思ったのです。
課題の規定内容はこちらのサイトです。
課題は９月に募集していたけれど…いまさらなので、応募はやめておきます。なんて自信がないと言うのが、一番の理由ですかね（笑）

アイデアを導くために

制限時間を自発的に設けたのは、「きり」がないからです。ちょうど100分位集中して考えられる時間が取れたからです。まして売り物にはならないのですから。
まず最初に…。右脳を使いましょう。イマジネーションです。
お題のキーワード？
「大地や自然の美しさを盛り込んだ風景写真の販売サイト」
さて、ここで
「大地、自然」と言ったら何を思い出しますか？
１つや２つでは駄目です。多少関係なくても言葉を考えるのです。
目標1分で20個です。

空、雲、新緑、雨、霧、露、川、海、虹、蝶、山、森、竹林、木、昆虫、石、サンゴ礁、花、島、葉、青、太陽
などと考えます。そしてさらにもっと細かく考えます。
たとえば、「昆虫」⇒蝶、カブトムシ、トンボ、てんとう虫
この「連想ゲーム」からヒントを導いていくのです。

次に、フリーハンドでイメージを描きます。もちろん「絵」は適当でもいいし、「〜の絵」と描いておくのも一つです。
多少雑ですけど…。（画像をクリックすると実物大画像をご覧になれます。）



⇒次の作品を見る前に今日のランキングは？今日も…↓(T_T)/~~~
応援よろしくおねがいします。読んだらクリック↑ね！m(__)m

いきなりリニューアルしてしまいました。（*^_^*）

さて今回はツールの選択？です。
結構このネタは論議になるのです。
私の知っているWeb会社では、個人に任されています。
だからAさんはPhotoshopでBさんはFireworks使っています。
結局最後はWebページにレイアウトするために、書き出しまたは、Web用に保存すれば同じことですから…。

Fireworksに思うこと

私の感覚でFireworksは、IllustratorとPhotoshopを足して割ったような感じがします。ソフト１本で済んでしまうってのがお気に入り。しかもお値段が安い。
でも複雑な図形描くのはやりたくないです。（笑）小回りが利かないように思います。バージョン８では少し改善されたけど、たとえば６角形を変形させて…と言う作業した時ものすごくやりづらかった記憶がある。（習熟度によりますけど。）
ライブラリ機能これいいですよね！

Photoshopに思うこと

やはり印刷⇒Webと言う流れがあります。広告で使ったグラフィックを流用するということが多いのでは…。なのでPhotoshop。
値段は高いけど、ユーザーが多いのでグラフィックの参考書が多い。山ほどあります。フィルターのプラグインも多い。（有料が多いけど）
しかし、アニーメーションGIFが作れない。ImageReadyで作成しなければならないので面倒。

結論（Pinの個人的）

どちらを使ってもあり。なんでもあり。
事実私は、Fireworksで四角形を描き、塗りのパターンに木目を指定し、PhotoShopファイルに貼り付け、フローリングを再現したことがある。
もしPhotoShopだけで作ろうと思うならば、白黒グラデーションを描き、極座標フィルターで木目のように変形し、色調補正で色をつけ…とかなりの工程を必要とする。
なので、使うツールは自分が使いやすい方を選択するべきであると思う。もしラッキーにも両ソフトを所持しているならば、両方のおいしいところをいただいて、生産性をあげるほうが良い！と思います。大切なのは「お客様」の要望にどう答えるか？だと思います。

⇒今日のランキングは？ついに２週間連続が…↓(T_T)/~~~
応援よろしくおねがいします。読んだらクリック↑ね！m(__)m

Webクリエイター能力試験テキスト

Ｗｅｂクリエイター能力認定試験〈上級〉対策テキスト＆問題集 ←ご購入はセブンアンドワイで会社帰りにお引取り が確実。 現在のところ、このテキストが１番分かりやすいです。Webクリエイター能力認定試験上級は絶対にテキストがないと合格はありえません。

セルの結合colspan

セルの結合をするにはcolspan（列結合）およびrowspan（行結合）属性を使って指定します。多分この属性を聞いただけで、嫌になる。苦手意識に陥るってことありませんか？でも逃げることは、出来ません。これがあるからDreamWeaverを使用してしまうと言う方いらっしゃいませんか？Webクリエイター能力認定試験上級では、100%出題されるものの一つです。このブログを読めば理解できるはずです。

まずは、こんな表を作成してみてください。

1	2	3	4
5	6	7	8

そしてセル番号「1,2,3,4」のセルを一つにしてみてください。さていかがですか？

まず上記のテーブルを作成するコードです。

<table border="1" width="250"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table>

そしてcolspan属性を記述してこうなります。

続きを見る前に今日のランキングは？