無料ブログ＆アクセスアップ 関連広告
キーワード上位表示させる為のブログテンプレート カスタマイズの方法
無料SEO対策ツールを利用し、検索エンジン最適化&アクセスアップ
無料ピング一斉送信サービス「PinGoo!」でアクセスアップ
継続的なアクセスアップとサイトジャンル考慮の無料クリック保証型広告！「cbist」
ブログで商品を紹介、宣伝して報酬(広告原稿料)を貰い小遣い稼ぎしよう！
ブログをつないで話題や製品を知る Ｕｎｏｗ？サービス 参加者募集！
無料でホバーウィンドウ（ドロップインウィンドウ）が設置できます！
▼ リンクスタッフ各社への新規登録で、全員に3000円キャッシュバック中！▼
検索エンジン登録代行・検索エンジン上位表示でアクセスアップ！ 1980円〜！
HTMLタグやスタイルシート(CSS)がよくわからないという、初心者の方のために、「HTMLタグ＆スタイルシート(CSS)自動生成システム」なるものを作ってみました。
文字の大きさ、文字色、太さ、斜体など、文字装飾の為の基本的なスタイルシート(CSS)とHTMLタグのみ、変換可能です。
各種文字設定をするだけで、簡単にスタイルシート(CSS)のソースを表示できるので、スタイルシートを理解している上級者の方でも、いちいちスタイルシートを書き込むのが面倒くさいと考えている方は、よろしければ試してみてください。
⇒ HTMLタグ＆スタイルシート(CSS)自動作成
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング 
FC2ブログランキング 
人気blogランキング！
文字の大きさ、文字色、太さ、斜体など、文字装飾の為の基本的なスタイルシート(CSS)とHTMLタグのみ、変換可能です。
各種文字設定をするだけで、簡単にスタイルシート(CSS)のソースを表示できるので、スタイルシートを理解している上級者の方でも、いちいちスタイルシートを書き込むのが面倒くさいと考えている方は、よろしければ試してみてください。
⇒ HTMLタグ＆スタイルシート(CSS)自動作成
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
◎マウスをあわせたときだけ背景色が表示される透明なボタン
▼ソース
<input type="button" value="無料ブログ" style="font-size:15pt;background-color:transparent;" onmouseover="this.style.backgroundColor='#ff8040'" onmouseout="this.style.backgroundColor='transparent'" />◎上記のボタンをリンクさせる
▼ソース
<input type="button" value="FC2ブログ" style="font-size:15pt;background-color:transparent;cursor:hand;" onclick="document.location='URL'" onmouseover="this.style.backgroundColor='#f79de0'" onmouseout="this.style.backgroundColor='transparent'" />
◎ 写真（画像）の周辺をぼかすスタイルシート （IE4以降のみ）
「Internet Explorer」のフィルター効果（alpha効果）を利用すれば、写真（画像）の周辺をぼかして表示することができます。
● 西洋醤油（ソース）
<img src="画像へのパス"
alt="猫" border="0" style="filter:alpha(style=2,opacity=100,finlshopacity=0)">
表示例 ⇒
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
「Internet Explorer」のフィルター効果（alpha効果）を利用すれば、写真（画像）の周辺をぼかして表示することができます。
| ← 元画像 <img> タグに、フィルター効果（alpha）のスタイルシートを追加します。 ※注意； IE以外のプラウザでは、alpha効果は得られません。 |
● 西洋醤油（ソース）
<img src="画像へのパス"
alt="猫" border="0" style="filter:alpha(style=2,opacity=100,finlshopacity=0)">
| style=2, opacity=100, finlshopacity=0 | グラデーションの形状を「1（線形）」「2（円形）」「3（長方形）」の値で指定 グラデーションの開始点の透明度を、0（透明）〜100（不透明）の数値で指定 グラデーションの終了点の透明度を、0（透明）〜100（不透明）の数値で指定 |
表示例 ⇒
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
◎ 余白の設定：padding（パディング） & margin（マージン）
余白を設定するスタイルシート（CSS）として、「margin」と「padding」があります。
※余白を利用することで、任意の位置にコンテンツを配置させることができます。
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
さすが!と言わせる FC2ブログ徹底攻略術
HTML&スタイルシート レイアウトブック
余白を設定するスタイルシート（CSS）として、「margin」と「padding」があります。
| ■ margin（マージン）について 「margin」は、コンテンツの外側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 ・auto ：自動調整（プラウザの設定に依存） ※マイナス指定可能 |
padding （パディング） サンプル padding:10px | ■ padding（パディング）について 「padding」は、コンテンツの内側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 ※マージンと異なりマイナス指定はできない |
※余白を利用することで、任意の位置にコンテンツを配置させることができます。
|
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！ さすが!と言わせる FC2ブログ徹底攻略術 HTML&スタイルシート レイアウトブック段落の先頭1字だけの文字表示形式（スタイル）を変えて表示します。
<HEAD>〜</HEAD>に以下のスタイルシート（CSS）を記述して下さい。
<style type="text/css">
<!--
.First {
font-weight:bold;
margin:0px 0px 5px 0px;
}
.First:first-letter {
font-style : italic; //先頭1字の文字を斜体に
font-size : 150%; //先頭1字の文字サイズ
color : blue; //先頭1字の文字の色
}
-->
</style>
※記載例 ⇒ <p class="First">段落の先頭1字だけスタイル変更</p>
※表示例（サンプルページ） ⇒ 段落の先頭1字だけのスタイル変更
記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
<HEAD>〜</HEAD>に以下のスタイルシート（CSS）を記述して下さい。
<style type="text/css">
<!--
.First {
font-weight:bold;
margin:0px 0px 5px 0px;
}
.First:first-letter {
font-style : italic; //先頭1字の文字を斜体に
font-size : 150%; //先頭1字の文字サイズ
color : blue; //先頭1字の文字の色
}
-->
</style>
※記載例 ⇒ <p class="First">段落の先頭1字だけスタイル変更</p>
※表示例（サンプルページ） ⇒ 段落の先頭1字だけのスタイル変更
記事の内容にご満足戴けましたならクリックをお願いします ↓ ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！
代替文字とは画像がうまく表示されないときのために画像（IMGタグ）の「alt属性」に記述する文字の事を言います。（下部参照）
しかし、下記のように背景色が代替文字と同じような色の場合、代替文字が認識しずらくなってしまいます。
このような場合の対処方法として代替文字に対して文字色を指定する方法があります。
■代替文字に対して文字色を指定する方法（スタイルシート）
<div style="color:#fff;">
<img src="画像.gif"
alt="代替文字" width="100" height="30" border="0">
</div>
※上記のソースでは、文字色として白色を指定しています。
■表示例
背景色に濃い色を使っている場合などは、代替文字に文字色を指定すると良いでしょう。
記事にご満足頂けましたら、クリックをお願い致します
人気blogランキング！ 人気ブログ検索-ブログフリーク FC2ブログランキング
● スタイルシート（CSS）解説本
※ Webテクニック スタイルシート 上級レイアウト
※ HTML&スタイルシート レイアウトブック
※ スタイルシート（CSS）サンプルブック
※ ホームページスタイルシート（CSS）入門
※ HTML+スタイルシート Webデザインブック
しかし、下記のように背景色が代替文字と同じような色の場合、代替文字が認識しずらくなってしまいます。
このような場合の対処方法として代替文字に対して文字色を指定する方法があります。
■代替文字に対して文字色を指定する方法（スタイルシート）
<div style="color:#fff;">
<img src="画像.gif"
alt="代替文字" width="100" height="30" border="0">
</div>
※上記のソースでは、文字色として白色を指定しています。
■表示例
背景色に濃い色を使っている場合などは、代替文字に文字色を指定すると良いでしょう。
記事にご満足頂けましたら、クリックをお願い致します 人気blogランキング！ 人気ブログ検索-ブログフリーク FC2ブログランキング● スタイルシート（CSS）解説本
※ Webテクニック スタイルシート 上級レイアウト
※ HTML&スタイルシート レイアウトブック
※ スタイルシート（CSS）サンプルブック
※ ホームページスタイルシート（CSS）入門
※ HTML+スタイルシート Webデザインブック
| 無料ブログ テンプレート カスタマイズ |
Next
Copyright © 2006 無料ブログ テンプレート カスタマイズ All rights reserved.
ドメイン SEO対策カウンター
Template by 無料ホームページ作成講座ブログ
Copyright © 2006 無料ブログ テンプレート カスタマイズ All rights reserved.
ドメイン SEO対策カウンター
Template by 無料ホームページ作成講座ブログ
