1. 無料アクセス解析

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HP作成テク 背景編(1)

昨日は、無事企画ページ「愛の部屋」オープンしました♪

いやー、このページ。
実は瑞喜のHP作成の小枝が随所に埋め込まれています。
 →動作確認は、IE Ver8.  と FF Ver63.6 のみ。
  この2つがOKであればあとはたいていいける… ハズ

久々にサイト編成のHTMLをご紹介しましょう!  久々? 久々!?

今回は背景です。
1.ページ内の大きなイラストを固定する方法
  美しい、素材通りさまのバレンタイン用の絵が1まい。
  マウスがスクロールしても、動きません。
  これは、HTMLのhead節に以下のスタイルシートを埋め込んでいるんです。
HP小枝 「愛の部屋」背景HTML
 例) 愛の部屋 繰り返しなし、左・上、固定 を指定した状態

  ①background-repeat  背景の絵を繰り返すかどうか
     no-repeat くりかえさない。 repeat 埋め尽くす(要するに繰り返す)
     repeat-x X軸(つまり左右に)繰り返す repeat-y Y軸(つまり上下)に繰り返す
  ②background-position    背景の位置
     TOP BOTTOM LEFT RIGHT
  ③background-image  背景のイメージ(絵)保存場所指定
     url('xxx.jpg') 別フォルダにあるものも「相対リンク」で指定できます。
       「相対リンク」の意味がわからなければ、HTMLと同じ場所に絵を保存しておけばOK 
  ④background-attachment マウスを動かしたとき絵をどうしたいか
     fixed  固定。マウスが動いても絵は動かない
     scroll マウスが動くと絵は動く。

  ②④は、①で「repeat指定」の場合不要…っちゃー不要なんですが
  実は、background-attachmentは見た目に影響大です。
  というのも、瑞喜のように三半規管の弱いやつは、スクロールして、文字を動かしているのに
  背後の絵も動くと… はっきり言って酔います。

   できれば、fixed指定してほしいところです。 ←酔いやすい瑞喜の希望
  
背景の指定は、上記以外に、
2.簡単に背景を指定する方法として、HTMLのbody節にそのまま指定があります。(ちゅーか、フツーこっちをさきに説明するんちゃうんか? ←まぁまぁ。)

 body background="xxx.gif"
  これは、上記で言う「repat」埋め尽くし とおんなじなんですが、
  残念ながら「fixed」(固定)指定ができないので
  画面スクロールすると絵も動くので、目がちかちかしますね。

 例) 星花繚乱~「初恋」
   元の絵が横幅のある絵ですので、Y軸上下方向への繰り返しにみえますが、
   実はこれ。「埋め尽くし」なんです。
(X軸左右方向繰り返しにみえるのもあります)
 例) 星花繚乱~「雨のしずく」  
   典型的な「繰り返し」 背景としてはウザいので、
   文字の書き込む場合は背景を無地にした方がよいでしょう。

コメント

NoTitle

・・・現在FF3.6.13(NOT63.6)にて閲覧中なれど、
 背景が全画面表示&固定、かつ、文字の背景が透過になっていない所も”GOOD★JOB!”でござい魔する。
 なお、Chrome&Safariでは、ここブログの文字背景も「透過」されますので、CHOCOLATEと混ざって・・・。

 愛の部屋・・・によるブラウザ評価編。
 本文は、全て「合格」かと。
 但し、末尾の瑞喜コメント(水色)に注目しますと、差がありましたっす。
 Opera:コメント全体右寄せ&コメント中身も右揃え(問題点)。
 Safari/FF:コメント全体右寄せ&コメント中身は左揃え。
 Chrome:コメント全体は中央寄せ&コメント中身は左寄せ。

Re: NoTitle

v-254Tackeさま
チェックありがとうございます。
ま、FFとIE(Ver.8)で違和感ないというチェックだけ。それでOKかと。
(だってー。各個人のPCのモニタの大きさや、携帯画面からのアクセス。それにブラウザの設定(文字の大きさとかも)に寄るところも大きいので、あまり気にしません)
それと、昔に作ったHTML。ミスも多いので、あまり深入りは… あるがままの自分を受け入れたい!

コメントの投稿

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。