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

現役のピンWebデザイナー?が「売れる」Webサイトの構築技法やWebクリエイター能力試験の虎の巻を公開します。

ピンデザイナーより

高いソフトを格安?で購入する裏技

購入方法の違いで…

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

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

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

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

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

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

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

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

そして究極の技

とその前に

続きを読む前にFC2ブログランキングは?m(__)m

テーマ:WEB系勉強中 - ジャンル:コンピュータ

アフィリエイト囲みにいかが?

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

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

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

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

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

ところで、このサイトのFC2ブログランキングは?⇒こちらをぽちっと
クリック応援お願いします。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

FC2ブログランキングに投票を!!m(__)m

テーマ:HP作成 - ジャンル:コンピュータ

ブログのアクセントにいかが??

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

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

ここに文章を入力します。

このようにすれば角丸の表現ができます。

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

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

ここに文章を入力します。

このようにすれば角丸の表現ができます。

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

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

テーマ:HP作成 - ジャンル:コンピュータ

Webレイアウトデザイン

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

レイアウトデザインの法則

iconicon毎日コミュニケーションズ

価格:3,675円

セブンアンドワイで購入icon

アマゾンで購入

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

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

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

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

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

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

テーマ:初心者のために・・・ - ジャンル:コンピュータ

CSSでテキストを装飾(5)

テキストを発光させる?

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


Safariテキスト発光

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

水平方向、垂直方向の移動を「0」でぼかしの色と距離だけ設定すれば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ランキングに参加しています

テーマ:HP作成 - ジャンル:コンピュータ

CSSでテキストを装飾(4)

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

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

ドロップシャドウ

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

text-shadowプロパティーを指定することでドロップシャドウの効果をあたっることが出来ます。例題では、「ドロップシャドウ」という文字列の段落を作り、その段落に対して、フォントの色#ff0000、シャドウの色#999999、その後ろの3数字はそれぞれ、水平方向の距離、垂直方向の距離、ぼかしの距離を入力しています。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エンジニアの転職なら 【ウェブキャリア】

テーマ:HP作成 - ジャンル:コンピュータ

copyright © 2005 ピンデザイナーのWebサイト構築技法 all rights reserved.
Powered by FC2ブログ.
無料ホームページ アフィリエイト レンタルサーバー FC2ブログ 一戸建て