CSS初心者の人にも親切な、スタイルシートエディタです

スタイルシート（CSS）のソースを書いてくれるエディタがあるページ

◆ 好みの位置に文字や画像を配置する解説

このスタイルシートは、ヘッダーという親要素を基準に、その中にある子要素の位置を決めるものです。サンプルの中には、５つの子要素が入っています。

基準になるヘッダーに指定するスタイルシートは、「position:relative;」です。ソースは、

div#header{ width: 750px; height: 500px; position: relative;}

基準になる位置は、ヘッダーの左上です。子要素の配置位置は、ここから下へ「**px」、右へ「**px」となります。親要素との位置関係を指定する「position:absolute;」も書き加えます。また、親要素には、高さも必ず記入してください。

.koyouso{ position: absolute; top: 50px; left: 100px;}

これで、子要素の指定はできました。文字を配置するときは、

<p class="koyouso">子要素の内容</p>

となり、画像を配置するときは、

<img src="画像名.jpg" alt="代替テキスト" class="koyouso" width="***" height="***" >

となります。但し、５つ配置するのでしたら、５つの指定が必要になります。

1回目は、親要素と子要素の指定をします。親要素の指定は、何度も指定する必要がないので、2回目以降は子要素だけ指定します。

◆ ページトップデザイン作成エディタ

「カラーピッカー」（別ウィンドウ）で色を調べられます。

入力例
id名＝「header」　幅＝「750」px　高さ＝「150」px。
画像クラス名＝「koyouso」　上から＝「20」px　左から＝「30」px。（配置位置）
画像名＝「images/gazo.jpg」　幅＝「65」px　高さ＝「60」px。（画像サイズ）
文字サイズ＝「18」px　文字色＝#「990000」　上から＝「30」px　左から＝「120」px。
親要素と、指定する子要素は、全て入力してからボタンを押してください。（親要素なしボタンは、2回目以降）

「ページレイアウト」作成エディタでソースを書いた場合、その中に「#header」がありますので、差し替えてください。初めての「id名」でしたら、そのまま使えます。