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

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

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

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

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

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

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

<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

テキストを発光させる？

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】Ｗｅｂエンジニアの転職なら　【ウェブキャリア】

このブログでも使用している文字装飾を少し解説してみたいと思います。このやり方は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