初心者向き手順書  --3--

ここでは初心者向きに解説していますので、全てを網羅してはいません。ご了承下さい。

 [メインメニュー]

[ぴあにしも][初心者向き手順書][オリジナルスクリプト集][オリジナルスクリプト2集][追加TIPS紹介][ソフト紹介][ソース表示はこれ][WEB用に変換][Lhaplus圧縮][ひな形配布][パスの考え方][ひな形用設定][Exma4][EML編集][ヘルプ][サンプルトップ][更新状況他][リンク][タグ掲示板][物置小屋]

 [手順書メニュー]

[初心者向き手順書2][初心者向き手順書3][初心者向き手順書4][初心者向き手順書5][初心者向き手順書6][初心者向き手順書7]

 


基本設定を理解しよう。

・【基本設定】タブに移りましょう。ここでは主にBODY部の設定を行います。

【基本中の基本】を設定しましょう。下の画面の部分の説明から。

ページタイトル】はメールでは表示に影響しませんが、ブラウザではタイトルバーに表示されます。ひな形のテーマに合ったタイトルをつけるといいでしょう。つけなくても構いません。

「タイトルを入力してね」のところは文字が直接入力できるテキストボックスといいます。クリックして書き換えが出来ます。

基本色設定】とは?

BODYはHTMLドキュメントでは一番親に当たるコンテンツです。親要素の中に子要素がある場合、子要素は親要素の影響を受けます。
例えば子要素に文字色の指定がされていない場合、親要素の文字色が子要素にも及びます。と難しくなるのでこれは置いて・・・
手っ取り早く言えば、BODYは表示上一番下にある特殊なレイヤーで、一番親にあたる要素です(というとそれは違うと言われそう・・・)。

背景色・・・乱暴な言い方ですが、表示部全体の背景の色を設定します。

テキスト・・・文字の色です。

未表示・・・ハイパーリンクされた文字列がまだ未訪問のリンク先である場合に、この色で表示されます。

表示中・・・ハイパーリンクされた文字列が現在表示中である場合に、この色で表示されます。

表示済・・・ハイパーリンクされた文字列がしでに訪問済のリンク先である場合に、この色で表示されます。

さて、色設定方法を学びましょう。ぴあにしもではおよそほとんどの色設定で、赤く囲んだ部分のように、設定する色の説明と色つきの四角いボックスのペアになっており、次の二通りの方法で設定が出来ます。

説明文字をクリックしてカラーコードで入力する方法---色の設定方法1

設定したい部分の説明文字をクリックしてください(上記画像ので囲んだ部分)。

上のようなカラーコード入力ダイアログが出ます。必ず#をつけた6桁の16進数で入力してボタンを押します。
無効な入力(全角文字や#がない場合、16進数6桁になっていない場合、カラー名入力した場合)はエラーが表示され反映しません。
エラーは「間違っていますよ」という警告ですので、再設定してくださいね。

CSSの色指定はいくつかの記述形式があるのですが、ここでは赤・緑・青のそれぞれに16進数二桁の数値で指定するものです。
例えば#FF00AAなどのカラーコードで指定します。赤がFF、緑が00、青がAAという強さ(段階)になります。
Fは十進数の15を表します.。16進数では0〜15まで桁上がりせず、16で一桁上がります。
#9→9、#a→10、#b→11、#c→12、#d→13、#e→14、#f→15、#10→16、#11→17・・・のようになります。
二桁目は16の位になるわけです。#FFは16×15+1×15なので、赤は255という強さ(一番赤くなる)になります。#00は色の度合いが最小つまりその色は出ないことになります。Aは10ですから#AAは16×10+1×10=170という階調で青を指定していることになります。
これらの色を光の3原色として混ぜ合わせたものが表示カラーになります。#000000は黒に#FFFFFFは白になります。
黒は完全な影で色がないということですね。太陽光は白く見えますが、太陽がすべての色を含んでいると考えられます(目に見えない色として紫外線や赤外線なども含んでいますが)。虹が七色に見えるのは太陽光が屈折されて含まれている色の屈折率が違うために七色に分散されて見えるためです。
尚、小文字(#ff00aaなど)でも構いません。

赤・緑・青各色を0〜255(#00〜#FF)の256階調で光の3原色として混ぜ合わせた色として設定することになります。

・色のついたボックスをクリックして色を選ぶウィンドウ(カラーダイアログボックスといいます)で選択する方法---色の設定方法2

設定したい部分の色のついたボックスをクリックしてください。このボックスには設定した色で塗りつぶされ、カラー名やカラーコードが表示されます。

上のような色の設定ダイアログが出ますので、色を選んで指定できます。カラーマトリックスと呼ぶ虹のようなところをクリックして自由に色を指定できます。その横のスライダで色の明るさを変更できます。


背景の配置】とは?

BODYの背景画像をどのように配置して表示させるかを設定します。素材登録で[Image1]に画像が登録されていないと意味がありません。

【スクロールする】・・・背景画像を配置し、ページが表示領域に収まらない時にスクロールされると背景画像も一緒にスクロールします。
でもここの設定で【固定する】にするとスクロールしても背景画像は動かなくすることが出来ます。

【ぜ〜んぶにタイル貼り】・・・通常背景画像はタイル状に貼り付けたように表示されます。ここの設定次第で貼り付け方を変更することが出来ます。いろいろ設定を変えて【プレビュー】して試してみて下さいね。

【表示開始位置決め】・・・背景画像は指定しない限り左上を基準とした(0,0)の位置から貼り付けられます。横方向・縦方向とも数値か基準指定でのみ配置設定が出来ます。数値入力の際は、半角数字で入力してずらす分量を設定してください。
「横も縦も数値配置有効」の部分ですが、親要素配置の基準を「左と上」とか「右と下」とか「数値と真ん中」とか指定することができます。この内
数値で指定した場合は、左端または上端基準に必ずなります。

background-positionの設定組み合わせは以下の通り

[left top],[left center],[left bottom],[left 数値],[数値 top],[数値 center],[数値 bottom],[数値 数値],[right top],[right center],[right bottom],[right 数値]・・・[横方向配置設定 縦方向配置設定]の形で、数値の場合必ず横方向ではleftからの距離に、縦方向ではtop空の距離になるためです。

 background-positionではなく、CSSのコンテンツ配置ではRIGHT:**やBOTTOM:**で基準場所に対して数値設定が出来ます。
その反面、CENTERという基準はありません。

【背景使用】・・・登録したImage1の画像を背景画像として表示させるかどうかをチェックよって変更します。素材登録で[Image1]に画像が登録されていないとチェックできません。

【最小ウィンドウサイズ】・・・これは次の【スクロールバーの表示】に関係するのですが、ページのサイズを特定サイズ以下の場合にスクロールバーを表示させたい時にここでそのサイズを指定してください。但し、次の【スクロールバーの表示】で「表示しない」では意味がなくなります。
とりあえず設定しなくても大丈夫です。


スクロールバーの設定

ぴあにしもではスクロールバーが表示されるのはBODYとメッセージボックスです。ここの設定はBODYに対してですが、スクロールバーの色設定はメッセージボックスにも同じ設定が行われます。

【スクロールバーの表示」・・・これはBODYに対してのみ有効です。表示領域に全て表示できないはみ出るコンテンツがある時に、スクロールバーによってスクロールさせて見せることができるようになります。スクロールバーを表示させない設定ではスクロールさせることが出来なくなる代わりに、はみ出る部分を見せたくない時に便利になります。表示領域からはみ出ることをオーバーフローといいます。

「自動でつける」は、はみ出る部分がある場合のみブラウザが自動でスクロールバーを表示してくれます。

「つける」は、はみ出る部分がなくとも常にスクロールバーが表示されます。

「つけない」は、はみ出る部分があってもスクロールバーは表示されません。これは雪降りなど動くことで表示領域外に出てしまうコンテンツがある場合など、とても有効な設定になることがあります。

【スクロールバーのカラー設定】・・・上図の青く囲んだところはスクロールバーの色を設定する部分です。
BODYとメッセージボックスでのスクロールバーに反映します。
設定方法は先の
色設定方法に準じますが、拡大されているスクロールバーの各部分をクリックすることで色選択で指定することもできます。
これはとても便利な機能だと思いますので、活用くださいね。

※スクロールバーを表示しない設定なら、カラー設定をする必要もなくなります。必要な時だけ設定してください。

実はこのページのスクロールバーカラー設定もぴあにしもで設定して、そのソースを貼り付けたものです。


ボーダーとマージンと余白の設定

CSSのボックスでは外から、親要素に対するマージン・ボーダー・余白(パディング)・コンテンツが構成要素となっています。

ボーダー・・・枠線です。色設定や枠線のタイプ、太さを設定できます。枠線のタイプでBODYでは、二重線(doubled)・点線(dotted)・破線(dashed)は無効で実線になります。選択して設置してくださいね。

マージン・・・枠線より外側の親要素との距離ですが、BODYは一番上の親要素のため、マージン設定は内側に働いてしまいます。
設定しないで下さい。

余白・・・枠線の内側からの余白になります。ボックス内にあるコンテンツは余白分内側に表示されます。

枠線の幅やマージン・余白はスライドバーを動かせは数値が変わり設定できます。

基本設定はここまでです。はBODYの背景画像自動スクロールと背景色変化(動きますよ〜)をしてみましょう。

 

 [手順書メニュー]

[初心者向き手順書2][初心者向き手順書3][初心者向き手順書4][初心者向き手順書5][初心者向き手順書6][初心者向き手順書7]

 


 [メインメニュー]

[ぴあにしも][初心者向き手順書][オリジナルスクリプト集][オリジナルスクリプト2集][追加TIPS紹介][ソフト紹介][ソース表示はこれ][WEB用に変換][Lhaplus圧縮][ひな形配布][パスの考え方][ひな形用設定][Exma4][EML編集][ヘルプ][サンプルトップ][更新状況他][リンク][タグ掲示板][物置小屋]

 


 

Copyright(c) 2004 My Software. All rights reserved.