Feb. 25, 2005 update by satosi ukai

CSS・デザイン・オンライン ヘルプ

"CSS・デザイン・オンライン"はスタイルシートによるページのデザインをHTML上でやってしまおうというページです。

last update : 2005.2.25

概要

ページデザインに使うスタイルシート（cascading style sheet）を入力フォームとjavascriptで生成し、
プレビューとスタイルシートのソースを新しいウィンドウに開きます。
"CSS・デザイン・オンライン"は実行ファイル形式のソフトではありません。あくまでjavascriptを使ったページです。
ちなみにこのヘルプページもこのCSS・デザイン・オンラインを使ってデザインしました；

標準版は要素名、プロパティ、値を日本語で書いています。
初めての人、文法がわからない人などはこちらをお勧めします。
ソースバージョンは、要素名、プロパティ、値をスタイルシートの文法そのもので表してあります。
日本語訳がうっとおしいと思う方はこちらを使ってください。
また、要素もソース表記になっているので要素を探すときこっちの方がキーボードで移動できるので楽です。
現在、管理人の異動により連絡先変更中。ちょっとまってね。

OS・ブラウザ対応

Opera「が」対応したみたいですｗ
(うちは触ってませーん)
よしよし。いい子だ。

どうやらIE5以外は「表示」ボタンを押しても新しいウィンドウがでてこないようです。＞バグ参照。

このページの目次

使い方

というか、スタイルシートを知ってる人なら適当に触ってみた方が分かりやすいです；
まず触ってみてください。あとポイントは読んでおいて欲しいですが。

  1. 要素の選択…[要素]リストボックスの中から操作したい要素を選びます。
  2. スタイルの編集…下のフレームで変更したいスタイルだけ編集します。
  3. プレビューとソースの表示…[表示]ボタンを押すとスタイルシートのソースとプレビュー画面が出てきます。
  4. 編集続行／ソースのコピー・貼り付け…編集をやり直すときは元のウインドウで再び編集を続行し、
    完成ならソースウィンドウからコピーペーストしてください。
スタイルの編集
スタイルの編集は下の入力フレームにより行います。
主にテキストボックス（色・マージンなど）による入力とラジオボタン（行揃え・カーソルなど）による入力になります。
テキストボックスによる入力では、値を入れるとそのスタイル設定が追加されます。
何も入力しなかったり、消したりするとスタイルは生成されず、ブラウザのデフォルトに設定されます。
ラジオボタンによる入力では、「デフォルト」以外を選択するとそのスタイルが追加されます。
「デフォルト」を選択するとスタイルは生成されず、ブラウザのデフォルトの設定になります。
バグあり。
プレビューウィンドウ
[表示]ボタンを押すとプレビューウィンドウとソースウィンドウが新しく開きます。
プレビューウインドウには作ったスタイルシートを適応させた標準的なページのデザインの例が表示されます。
フォントに関しては若干違うデザインになることがあります。＞＞バグ参照
ソースウィンドウ
ソースウィンドウには作ったスタイルシートのソースが表示されます。下に例を書きます。

<link rel="stylesheet" href="" type="text/css">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type=text/css><!--
body{color:003333;background-color:cccccc;}
p{margin-left:10;margin-right:10;}
--></style>

緑の文字 は外部スタイルシート用の記述です。
黒の文字 はスタイルシート定義のための記述です。
青の文字 はスタイルシート本体です。

ページに新しくＣＳＳを埋め込む場合
黒の文字 、青の文字 の部分をコピー・ペーストしてください。
ＣＳＳを使ったページにさらにスタイルを付け加える場合
青の文字 の部分をコピー・ペーストしてください。
外部ＣＳＳを作る場合
緑の文字 をＣＳＳを適応させるＨＴＭＬにコピー・ペーストし、
青の文字 を新しく作成した拡張子「.css」のファイルにコピー・ペーストしてください。
ユーザ定義クラスを設定した場合
ユーザ定義クラス（.user1、.user2、.user3）を設定した場合は次のようになります。

<link rel="stylesheet" href="" type="text/css">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type=text/css><!--
body{color:003333;background-color:cccccc;}
p{margin-left:10;margin-right:10;}
.user1{color:ff0000;}
.user2{font-size:larger;}
--></style>

ピンクの文字 がユーザー定義クラス名の仮文字です。
そのまま使ってもいいですが自分の好きなクラス名に変更するといいでしょう。

その他ポイント

ソース生成のスクリプトは、単純に、設定したプロパティを並べて記述するだけのものです。

そのためフォントサイズなどを数値で設定したり、marginなどで順に並べて値を書いて上下左右の設定を個別で行うなどの機能はありません。バージョンアップは考えていますが。

また、テキストボックスに入力した値は基本的にそのままスタイルシートに組み込まれます。よって色の設定などは"#ff0000"などとするとソースにも"#ff0000"、 "ff0000"とするとソースにも"ff0000"と出力されます。

ひとつ例外は、背景画像（background-imageプロパティ）だけはURL()という文字を挿入した形で出力されます。

プレビューウィンドウ・ソースウィンドウは再編集後も同じウィンドウで開きます。
つまり、以前の設定のプレビュー・ソースは破棄されます。
また、編集中ソースバージョンに変更すると設定は全てリセットされてしまいます。気をつけてください。

設定をクリアしたいときはブラウザを再読み込みするか、それでもクリアされない場合はＵＲＬを再度入力するとクリアされます。

バグなど

現在見つかっている異常動作は次の通り。

今後の課題

予定とまでは言い切れない予定たち。

更新履歴

2005.2.25管理人連絡先移行中...
2001.11.2管理人メールアドレス変更
2001.11.2ミラーサイト設置
2001.3.14ヘルプファイルの更新
2001.3.7公開

連絡事項

[CSS・デザイン・オンライン]はsatosiによるページです。メールアドレスはこちら。

バグレポート・アドバイス・要請などありましたらご遠慮なく。
管理者としてはかなり助けて欲しいです（爆）特にバグフィックス…。
リンクフリーです。ＵＲＬは以下の通り。

CSS・デザイン・オンライン1 : http://cssdesign.ukaibutton.com/
CSS・デザイン・オンライン help（ここ）1 : http://cssdesign.ukaibutton.com/help.html

二次配布などの時には上記メールアドレスに連絡ください。

リンク

________ CSS Design Online _________
ver 1.0 beta Help update 2005.2.25
body

copyright (C) satosi 2005