FC2ブログ
九州熊本に住むパソコンインストラクターごりがお気楽に綴る日記です。PC初心者にとって役に立つことあるかもよぉ!

2020/081234567891011121314151617181920212223242526272829302020/10

こんばんは、ごりですm(__)m

今日は、スクロールしても背景の画像が動かない設定についてお話しをしたいと思うのですが....

簡単に説明をすることができません^^;

HTMLのBODYタグ内で記述もできるのですが、より詳細な設定をしたい場合は、CSSカスケーディングスタイルシート)を使ってWebページのデザインをします。

CSSはホームページのスタイル(書体やレイアウトなど見栄えに関するもの)をまとめて記述します。
ホームページを記述するHTML言語でも、ある程度スタイルを記述することができますが、スタイルシートを使えばより効率よく詳細な設定ができるということです。

つまり、
「HTMLで文書構造を記述し、CSSで体裁を整える」ということです。

ごりがお気楽でないときに、少しずつ、ちょっとずつわかりやすくお話しができればなぁ??と思っています。


このページの珈琲カップを変更すると、せっかく作成してくださった方のデザインを壊してしまうので、別のページで、ちょっとだけ遊んで見ました。
ていうかぁ~~~ぁ、せっかくのテンプレートをいじりまわして壊れたら恐いのです^^;
ごりも勉強、勉強です^^;

以前紹介したマウスの使い方のページを覗いてみてください。
↓  ↓  ↓
マウスの使い方

このページを開いたら、ブラウザの表示メニュー~ソースをクリックします。
すると、表示されているページのソース表示を見る事ができます。

<STYLE type="text/css">から、</STYLE>までの記述にあります。
画像の固定の設定は、
background-color : #ffffff ;  ← 背景の色
background-image :url("image/mouse0.gif"); ← 画像のありか
background-repeat : no-repeat; ← 背景画像を繰り返しさせない
background-attachment: fixed; ← 固定の設定
background-position : 70% 25%; } ← 画像の位置(水平、垂直)

の5行です。

あらかじめ画像イメージは画像処理ソフトなどで、少し透明にしておくと、上にテキスト(文字)がのっても、見やすくなります。
色々な手法がありますが、あまり濃い色の画像は好ましくないと思いますよ!


『ビックリマン20th ANNIVERSARYアンコール版』発売までのカウントダウンをごりと一緒に楽しみましょう!
↓   ↓   ↓   ↓   ↓
『ビックリマン20th ANNIVERSARYアンコール版』発売まであと何日?



ごり:麦子ぉ~~、ビックリマンチョコ発売まであと30日やでぇ~(^_^)v
麦子だからあたいは、いらないわよ(ーー;)
ごり:( ̄Д ̄;) ガーン



ブログランキングに参加しています。
なんだか、今日はちょっと難しいと思った方、
ポチッと押して、清き1クリックをお願いしますm(__)m
↓   ↓   ↓
人気blogランキングへ

コメント
この記事へのコメント
ごり様、こんばんは。
“マウスの使い方”を読んでいると、遠~い昔(?)ごり様に「手取り足取り塵取り…」しごかれていた頃を思い出しますv-13
2005/10/16(日) 03:15 | URL | 紫薔薇 #FoYA9zFI[ 編集]
>紫薔薇さんへ
こんばんは、つーかぁ、おはようございますかな^^;
もう寝ないと明日起きれないなぁ~と思いつつおきてます^^;
しごかれたぁ~??
そんな昔のことは全然記憶にございましぇーん!!
2005/10/16(日) 03:23 | URL | 管理人お気楽ごり #ZFPdhQVM[ 編集]
またまた、興味深いお話です。
以前、わけがわからずいじくっていたら、ページがぶっ壊れちゃって、修正に悪戦苦闘しました。
だから、触りたくても、怖くて触れないのです(><;)
2005/10/16(日) 08:18 | URL | サマンサ #-[ 編集]
ちょっと私にはわからなかったです。でもこのコーヒーカップおもしろいですね。スクロールしても背景の画像が動かない設定ってこのことですか?
2005/10/16(日) 09:24 | URL | イヴォンヌ #XVgCdbeE[ 編集]
この固定化って良し悪しなんですよね~。

作る側にとっては、
デザインを見せれる喜びがあるけど、
見る側にしたら、みにくいと言われることもありますからねぇ^^;

これはこれでおもしろいですけどね♪ぽちっ
2005/10/16(日) 13:01 | URL | 笑顔整体の院長 #-[ 編集]
ちょび助もワンコもこれ前勉強しましたが忘れました(w

最近PCの勉強いっぱいされてますねぇ♪
ちょび助もせっかくFC2のサーバ借りて放置してるからHPでもつくろうかな・・・・・
2005/10/16(日) 19:42 | URL | ちょび助 #-[ 編集]
[玄関]・▽・)ノ おじゃまします♪
あたしもこの固定、
HPで使ってますよ~
便利ですよね~ヾ(@⌒▽⌒@)ノ


ポチ凸
2005/10/16(日) 19:48 | URL | Sarhto #z8Ev11P6[ 編集]
ごりさん こんばんは

動かないコーヒーカップのお話は
む、む、難しーい!パソコンのプロの、ごりさんでも、勉強、勉強なんですね。
うさぎは、美しいコーヒーカップを眺めて満足かな、なにしろまだまだ
勉強する事がいっぱいだー。


2005/10/16(日) 21:29 | URL | うさぎ #-[ 編集]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
2005/10/16(日) 22:43 | | #[ 編集]
変にさわって修正できないと恐いので、なかなか触れません。
こういう画面を見ると、PCのできる人なんだと尊敬してしまいます。
2005/10/16(日) 22:47 | URL | ひまわり #-[ 編集]
ごりさんこんにちは♪
今日のお話は・・・難しい(ーー;)
スタイルシートってヤツをほんの少~しさわってみた事はありますが、だんだん訳がわからなくなって・・・という事を繰り返してます。
ちょっと腰据えてお勉強しなきゃ~!
2005/10/17(月) 10:47 | URL | かえる #-[ 編集]
おはようございます♪るるです♪
おはよ~ございます! るるです!
説明でも 文章での説明は本当に難しいですね><
るるは サイト作ってたとき ここに
 これを貼り付ける!!! ッていう方法が一番たすかりました;^_^A
でも ゴリさんの説明で なるほど、 と思いました。
これからも いろいろおしえてくださいね~ よろしくです!
CSSで、HP 1ページ 作るのは 大変ですか?CSSの方が なにかと いいようなこと書いてた記事があったので。。見当違いなことかいてたら ごめんなさ~いε=ε=┏( >_<)┛
2005/10/17(月) 11:00 | URL | るる #hiG9K2Pw[ 編集]
コメント&応援ありがとうございますm(__)m
★サマンサさんへ
そうですよね。
思わぬアクシデントが起こって、どう元に戻してよいやらパニックになることがあります^^;

★イヴォンヌさんへ
そうです。スクロールしてもバック(背景)にあるカップ(画像)が動かないでしょう。
このことです。

★笑顔整体の院長さんへ
そうですね。
使い方を間違えると、きちっと内容を読んでいただきたいページには不向きかもしれませんね。
デザイン重視の自己満足にならないよう気をつけないといけません。
Webは難しい!!
が、効果的に使うと面白いですもんね。

★ちょび助さんへ
是非是非HP作って下さいよ。
ごりも制作中???つーかぁ、何もかもストップ状態で進歩ないんですが...
頑張りましょうよぉ~~。
ブログのページでスペース足りないときに、ちょこっと利用するとか...

★Sarhtoさんへ
なかなかうまく利用できないでいるごりでした。
いろいろ利用されていて感動です。
久々にHPもゆっくりお邪魔させていただく枡ね。

★うさぎさんへ
本当に勉強勉強です。
だから、ごりもわからないことだらけですよ。
仕事では、質問されてわからないことは、調べてお答えしているような毎日です^^;

★ひまわりさんへ
慣れてしまえば簡単なんでしょうけど、ごりもまだまだわからないことだらけですよ。
記述を間違えてエラーになったり、表示されなかったり...
本当にWebの世界って奥が深いですね^^;

★かえるさんへ
ごりも見よう見まねですよ。
書いてあることをコピーしたり、真似して書いて、部分的に修正したり...
なのにうまくいかなくてエラーだったり^^;

★るる♪さんへ
たくさんのページを有するサイトであればCSSが便利です。各ページ共通の設定が可能だからです。
編集する際の手間が省けます。
が、1ページのみであればあえて使用しなくても大丈夫では???



2005/10/18(火) 16:32 | URL | 管理人お気楽ごり #ZFPdhQVM[ 編集]
こんばんは
コメントありがとうございました。
このコーヒーカップ動かないんだなと思いながら降りてきたらこの記事を見つけました。
以前こんなのを作って見たいと思った事がありましたがその時にこの記事読んでたら出来てたかも(?)
2005/10/21(金) 02:07 | URL | gori #eBcs6aYE[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://gori3.blog13.fc2.com/tb.php/161-484130e4
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
SEO対策:熊本 SEO対策:パソコン SEO対策:インストラクター SEO対策:グルメ SEO対策:お菓子 SEO対策:激辛