- 締切済み
HP制作での質問です。
HP制作に関しての質問です。 全体の背景色を単色指定し、横センターに画像を配置したいと思っています。 横幅サイズの指定はしていないのですが、windowを横にのばした時に画像が常にセンター表示されるようにするにはどうしたらよいでしょう？
- komarinkoara
- お礼率50% (2/4)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HPではなくて、ウェブページだとして。 HPはヒューレッドパッカードの略号です、ホームページはブラウザを起動したときに表示されるHOME(出発点・故郷)ページです。派出してサイトのトップページをホームページと言うこともあります。読者のうちは、他の意味としても問題ないですが作者の立場となると、混乱して通じなくなります。ホームページへ戻る??ってどのページからどのページへ?? HTMLで書かれたウェブページの背景ですが、まずデザインする前に文書構造に従っっ正しく書かれたHTMLがあったとして、スタイルシートでデザインを決めます。HTMLでかかれたウェブ標準のくかもりがあるとして、 スタイルシートは body{ background:rgb(255,255,0) url([画像へのパス] center top no-repeat;} } と書くと簡単です。分けて書くと body{ background-color:rgb(255,255,0); background-repeat:no-repeat; background-position:center top; } となります。 HTMLの<head></head>内に書くときは、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"><!-- スタイル言語の宣言は必須 --> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css" media="screen"><!-- typeの記述は必須 --> <!-- /* 古いブラウザから隠すため */ body{ background:rgb(255,255,0) url([画像へのパス] center top no-repeat;} } --> </style> </head> となります。 外部に置く場合は、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta name="author" content="IRUKA"> <meta http-equiv="Content-Style-Type" content="text/css"><!-- 必須 --> <link rev="made" href="mailto:shizuka@ichiya.com" title="send a mail" > <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css"> <link rel="NEXT" href="./page1.html"> </head> と言う風に書きます。 media記述は、screen端末(パソコン用のブラウザ)に限って適用させるという意味です。あまり凝ったことしないときはなくても良い。これを書いておくと携帯電話でアクセスしたときには素のHTMLとして表示される。 なお、<center>タグは、非推奨です。また、内容的に意味のない画像を<img>で指定するのは誤りです。また、内容に直接関係しない背景の場合はHTML内に記述するのではなく、スタイルシートで指定します。 いずれにしても、いきなりその質問をする前に はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) などで、正しいHTMLを身に着けないと、結局スタート地点に戻って全部直さなきゃならなくなります。
- rei_and_rei
- ベストアンサー率32% (145/444)
まず背景色から CSSを外付けする場合は… ・htmlファイルに下記のように記述 <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="スタイルシートの相対パス"> ・CSSファイルに下記のように記述 body { background-color: #ここで色指定; } ※両方正しく記述しないと機能しません。 htmlファイルに直接書き込む場合は… ・<body>に直接書き込む方法 <body style="background-color:#ここで色指定"> ・<head>内に書き込む方法 <style> body{ background-color:#ここで色指定; } </style> 次に、画像のセンター配置 ・一番簡単な方法 <center><img src="画像の相対パス"></center> ※画像やテキストの配置方法はいろいろあって、どの方法を選択するかは他のコンテンツとの兼ね合いで決まってくるので、一番簡単な方法だけにしました。
