- ベストアンサー
ホームページのTOP中央にイメージ画像を表示する方法
- ホームページのTOP中央にイメージ画像を表示するには、CSSのスタイルを使用する方法があります。
- 具体的には、pタグにクラス名を指定し、そのクラスに対して幅と高さを設定し、背景画像を指定します。
- さらに、テキストの位置を設定するために、positionプロパティやtext-alignプロパティを使用します。
- papion0525
- お礼率58% (14/24)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
はじめまして。 text-valignは、テーブルセルにしか適応されないようです。昔、自分も似たような事をしたくて調べた記憶があります。text-alignとスペルは似ていますが、確か意味合いは全く違ったはずです。text-align:right;と同じような感覚で上下方向の指定が出来ると考えがちですが。vertical-alignも同様です。ネットで調べても、この辺をきちんと説明しているサイトはほとんど無いと思います。 で、どうするの?なのですが、私だったら(あくまでも私だったら、です)そのp要素の中のテキストをspanで囲い、positionプロパティで位置を調整します。こんな感じかな。 <html> <head> <style type="text/css"> <!-- p.sample{ width: 400px; height: 288px; text-indent: none; font-size: 10px; /* background-image: url(画像名.jpg); */ background-repeat: no-repeat; background-color: #cccccc; position: relative; left: 100px; top: 15px; text-align: right; } span.sample_span{ border: solid 1px #999999; position: relative; top: 268px; } --> </style> </head> <body> <h1>サンプル</h1> <p class="sample"> <span class="sample_span">ぎにゃー<br />くけー</span> </p> </body> </html> あまりスマートな感じがしないのですが…。書店でwebデザイン系の雑誌を見てみると、なにかあるかもしれません。ここまでくると、cssの文法云々というより、デザインのテクニックですね。 参考になりましたら幸いです。
お礼
大変ありがとうございました。修正後、改善されました。<span>タグも勉強してみます！
補足
別のタグ（span）でclassでくくって、上下関係のみrelativeで操作するという事ですね。やってみて連絡させていただきます。ありがとうございます。