【新着情報】 「ファンシーナビゲーション作成エディタ」が新しくアップされました（2010/03/14）

◆ スタイルシート（CSS）エディタ入力例

好みの数値を入力するだけで、2段組み（2カラム）のページレイアウトソースを書いてくれます。

head部ソースをコピー＆ペーストしてから、body部ソースをコピー＆ペーストしてください。

サンプルムービーのエディタは、「クールなデザイン」作成エディタです。

「エディタ一覧表」のページを利用すると便利です。

◆ XHTMLでページを作成する

XHTMLでページを作るには、「XHTML＋CSSでページを作る」エディタを利用してください。

◆ エディタの利用方法

  • これから出てくるエディタへの入力は、「半角英数字」で入力します。
  • 例外として、「ドロップシャドウ」での文字入力などがあります。
  • 指定するアイテムの緑ボタンは必ずクリックして赤くしてください。
  • 色指定のところは、「#」を付けずに、入力します。
  • 「Name」とある枠には、「半角英数字」で好みの名前を付けます。
  • 必要事項を入力したら、「CSS Source Stage」ボタンをクリック。
  • head部と、body部の各ボタンをクリック（ソース選択）して、「Ctrl」＋「C」→「Ctrl」＋「V」で貼り付けます。（Firefox、Mozilla、Opera用のフラッシュプレーヤーでは、「Ctrl」+「C」でコピーが出来ないときがあります。その場合は、選択したソースの上で右クリックして、「コピー」を選んでください）

◆ スタイルシート入門

これからスタイルシートを使ってページを作りたい初心者の方は、「スタイルシート入門」のページを最初にご覧ください。それからエディタを利用して、書かれたスタイルシート（CSS）を見ると、短期間でCSSをマスターすることができます。それには、「エディタ一覧表」のページをご覧ください。各エディタで何ができるのか、簡単な説明とそのページが別ウィンドウ（タブ）で開きます。

◆ 代表的なエディタ

スタイルシート（CSS）を使うことによって、これまでHTMLだけでは表現できなかったことが可能になります。このサイトにある、「エディタ一覧表」をご覧になると、CSSで表現できるであろう素敵なページを、お望みの数値を入力するだけで作ってくれるエディタが数多く揃っています。その中の代表的なエディタを以下にご紹介します。

MENU

◆ Page Menu

トップページ

スタイルシート入門

エディタ一覧表

テンプレート

スタイルシート問題集

サイトマップ


【CSSをマスターするページ】


素敵なフリーソフト

ホームページエディタ

詳細設定

上級者用エディタ

【最初に指定するエディタ】


【レイアウト関係エディタ】


【リンク関係エディタ】

【お勧めのエディタ】

- Close - 

◆ リンクボタン・レイヤー表示非表示作成エディタ

左のボタンは、「リンクボタン」ページで、画像を使わずに作ることができます。また、ボタンをクリックすると、メニューレイヤーが表示されます。レイヤー下部にマウスが載るとレイヤーが消えます。これは、「レイヤー表示・非表示」ページでソースを書いてくれます。

- Design Table -
1-11-21-3
2-12-22-3
3-13-23-3

◆ テーブルデザイン作成エディタ

味気ないテーブルを、スタイルシート（CSS）で魅力あるテーブルに変身させます。

このサイトのエディタの中では、最も指定方法が複雑ですが、その分思い通りのデザインが可能になります。

「テーブルデザイン」作成エディタ

これがサンプルスクロールバーボックスです。

長文をそのまま表示すると、ページの作り方としては問題がある時に、スクロールバーを使います。

文章量と、ページレイアウトのバランスをスクロールバーを使って調整します。

ここまでがスクロールバーボックスです。

◆ スクロールバー作成エディタ

使われる頻度は、それ程多くないのですが、多くのサイトの何処かで利用されています。

新着情報（What's New）や利用規約等に使われます。上手に使えば、面白い手法だと思われます。

人気エディタベスト10に入るエディタです。「スクロールバー」作成エディタ。

◆ タブ型ナビゲーション(5)作成エディタ

タブ型ナビゲーションは、全部で5種類ありますが、これはアコーデオンタイプです。

このスタイルは、JavaScriptとCSSの組み合わせで作られています。

タブの数は、幾つでも簡単に追加できます。

「タブ型ナビゲーション(5)」作成エディタ


◆ ドロップダウンメニュー作成エディタ

リンクスタイルの中では、最も人気のあるエディタです。JavaScriptをほとんど使っていませんので、軽いソースでできています。

ある程度ページ数が増えてきたときや、カテゴリー別に表示したいときなどに使うとよいでしょう。

「ドロップダウンメニュー」作成エディタ

 

◆ ロールオーバーボタン作成エディタ

JavaScriptを使わず、100%CSSでソースが書かれているので、ソースが軽くシンプルです。

サンプルボタンは、クリックしてもリンクしませんので、確認してみてください。オンマウスオーバー、アクティブ画像を1枚の画像にして作られています。

「ロールオーバーボタン」作成エディタ

◆ エディタで書かれたCSSの利用方法

◆ 外部スタイルシートファイルを作成する

これから利用するエディタの「CSS Head Source」ボタンをクリックして、書かれたソースを選択します。「Ctrl」＋「C」（コピー）または、選択されたソースの上で「右クリック」して「コピー」を選びます。

「メモ帳」または、「ホームページ作成ソフト」を開いて、コピーしたソースを貼り付けます。「mystyle.css」（好みの名前を付けて、拡張子は「.css」）で、ページと同じフォルダに保存します。

そして、作成中のページに「mystyle.css」を読み込むには、head部内に以下の1行を書き込みます。

<link href="mystyle.css" rel="stylesheet" type="text/css">

「XHTML」で作成している人は、最後に「 /」を追加してください。

body部ソースは、<body>部内の配置したいところに貼り付けます。2回目以降は、「CSS Head Source」を「mystyle.css」に書き加え、「CSS Body Source」をbody部内に貼り付けます。