質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

3回答

6581閲覧

画面配置を固定したい。常に中央に来るように

tomo39-.

総合スコア27

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2017/03/14 06:32

編集2017/03/14 06:33

イメージ説明

テキストテンプレートがウィンドウのサイズを縮めた時に移動して、
画像の上に勝手に来てしまいます。

また、画像が中央に常に設置されているにも関わらず、テキストテンプレート導入後には、ウィンドウの幅を広げる時には中央に来なくなってしまいました。

誰か、ウェブ系で要素の配置に関して詳しい方がいらっしゃれば
ご教授いただきたいです。どうぞよろしくお願いいたします。

HTML

1<body> 2<div id="spdayo"> 3<a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="601" height="585"> 4</a> 5<div id="coolsright"> 6<a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460"> 7</a></div> 8</div> 9 10<br/> 11<div id="box"> 12<img class="shadow" src="template1.jpg" width="150" height="50"> 13<p class="boxtext"> "Welcome to TokyoHill"</p> 14<p class="denen">Den-enCho-fu, 2013</p>

CSS

1body { 2 font-family: Times New Roman, sans-serif; 3 color: #333; 4} 5 6#spdayo{ 7position: absolute; 8top: 25%; 9left: 50%; 10-webkit-transform: translate(-50%,-50%); 11-moz-transform: translate(-50%,-50%); 12-ms-transform: translate(-50%,-50%); 13-o-transform: translate(-50%,-50%); 14transform: translate(-50%,-50%); 15} 16 17#coolsright { 18 position: absolute; 19 top: 63px; 20 left:75px; 21 22} 23 24#box { 25 position: absolute; 26 top: 50%; 27 left: 51%; 28 -webkit-transform: translate(-50%,-50%); 29 -moz-transform: translate(-50%,-50%); 30 -ms-transform: translate(-50%,-50%); 31 -o-transform: translate(-50%,-50%); 32 transform: translate(-50%,-50%); 33} 34 35.shadow{ 36 box-shadow:1px 1px 5px 5px #ccc; 37} 38 39.boxtext{ 40 text-align: center; 41 position:absolute; 42 font-size: 8px; 43 margin: 0; 44 top: 10px; 45 padding: 0; 46 bottom: 4px; 47 width: 100%; 48 background: rgba(0,0,0,0,0); 49} 50 51.denen{ 52 text-align: center; 53 position:absolute; 54 font-size: 6px; 55 margin: 0; 56 top: 39px; 57 padding: 0; 58 bottom: 4px; 59 width: 100%; 60 background: rgba(0,0,0,0,0); 61}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gin

2017/03/14 06:39

stackoverflowへも投稿しているようですが、下のヘルプにもあるようにマルチポストは推奨されていません。ご一読ください。
guest

回答3

0

ベストアンサー

「テキストテンプレートがウィンドウのサイズを縮めた時に移動して、画像の上に勝手に来てしまいます。」の理由は、下記の様に、"spdayo"のdivの外に"box"があるためかと思います。
なので、下記の様に書き換えてみては如何でしょうか?

html

1<body> 2 <div id="spdayo"> 3 <a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="601" height="585"></a> 4 <div id="coolsright"> 5 <a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460"></a> 6 </div> 7 <div id="box"> 8 <img class="shadow" src="template1.jpg" width="150" height="50"> 9 <p class="boxtext"> "Welcome to TokyoHill"</p> 10 <p class="denen">Den-enCho-fu, 2013</p> 11 </div> 12 </div> 13</body>

CSSの"#box"については、topを110%とかにして離したい分だけ指定してあげてみて下さい。
(以下、抜粋)

css

1 #box { 2 position: absolute; 3 top: 110%; /*ここ*/ 4 left: 51%; 5 -webkit-transform: translate(-50%,-50%); 6 -moz-transform: translate(-50%,-50%); 7 -ms-transform: translate(-50%,-50%); 8 -o-transform: translate(-50%,-50%); 9 transform: translate(-50%,-50%); 10 }

投稿2017/03/14 09:14

motuo

総合スコア3027

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomo39-.

2017/03/14 10:17

ご親切に回答いただき、ありがとうございました。
guest

0

質問文のような動作はこちらでは再現しませんでしたが、一度キャッシュの消去を行ってみては?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 body { 13 font-family: Times New Roman, sans-serif; 14 color: #333; 15 } 16 17 #spdayo { 18 position: absolute; 19 top: 25%; 20 left: 50%; 21 -webkit-transform: translate(-50%, -50%); 22 -moz-transform: translate(-50%, -50%); 23 -ms-transform: translate(-50%, -50%); 24 -o-transform: translate(-50%, -50%); 25 transform: translate(-50%, -50%); 26 } 27 28 #coolsright { 29 position: absolute; 30 top: 63px; 31 left: 75px; 32 33 } 34 35 #box { 36 position: absolute; 37 top: 50%; 38 left: 51%; 39 -webkit-transform: translate(-50%, -50%); 40 -moz-transform: translate(-50%, -50%); 41 -ms-transform: translate(-50%, -50%); 42 -o-transform: translate(-50%, -50%); 43 transform: translate(-50%, -50%); 44 } 45 46 .shadow { 47 box-shadow: 1px 1px 5px 5px #ccc; 48 } 49 50 .boxtext { 51 text-align: center; 52 position: absolute; 53 font-size: 8px; 54 margin: 0; 55 top: 10px; 56 padding: 0; 57 bottom: 4px; 58 width: 100%; 59 background: rgba(0, 0, 0, 0); 60 } 61 62 .denen { 63 text-align: center; 64 position: absolute; 65 font-size: 6px; 66 margin: 0; 67 top: 39px; 68 padding: 0; 69 bottom: 4px; 70 width: 100%; 71 background: rgba(0, 0, 0, 0); 72 } 73 </style> 74</head> 75<body> 76<div id="spdayo"> 77 <a href="index.html"><img src="https://placehold.jp/3d4070/ffffff/601x585.png?text=image" alt="ginzagakubuchi" 78 width="601" height="585"> 79 </a> 80 <div id="coolsright"> 81 <a href="index.html"><img src="https://placehold.jp/3d4070/ffffff/450x460.png?text=image" 82 alt="Denencho-fu,田園調布2014" width="450" height="460"> 83 </a></div> 84</div> 85 86<br/> 87<div id="box"> 88 <img class="shadow" src="https://placehold.jp/ffcf30/ffffff/150x50.png?text=%20" width="150" height="50"> 89 <p class="boxtext"> "Welcome to TokyoHill"</p> 90 <p class="denen">Den-enCho-fu, 2013</p> 91</div> 92</body> 93</html>

投稿2017/03/14 08:42

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomo39-.

2017/03/14 08:47

コメントいただき、ありがとうございました。 キャッシュ削除のサジェスチョンいただき、ありがとうございました。 只今サファリで開発モードオンにして削除して見ました。。 が、やはり、ウィンドウを下から上に小さくしてみると、 テキストテンプレートが画像の前に被さるようになりました。
tomo39-.

2017/03/14 08:49

あとキャッシュを削除して初めてわかったのですが。。 初表示の画面がすごく大きくなることに気がづきました。 こちらも治したいです。><
guest

0

全部作り直しになりますが…

CSS

1#box { 2 position:relative; 3 width:100vw; 4 height:100vh; 5 text-align:center; 6} 7 8#box dl { 9 position:absolute; 10 left:50%; 11 top:50%; 12 transform:translate(-50%,-50%); 13 width:601px; 14} 15 16#box dl dt a { 17 display:block; 18 position:relative; 19 background:url(sp01.jpg) center top no-repeat; 20 width:601px; 21 height:585px; 22} 23 24#box dl dt a img { 25 position:absolute; 26 left:75px; 27 top:63px; 28} 29 30#box dl dd { 31 padding-top:60px; 32 padding-bottom:5px; 33 text-align:center; 34} 35 36#box dl dd div { 37 margin:0 auto; 38 background:url(template1.jpg) center top no-repeat; 39 width:150px; 40 min-height:50px; 41 box-shadow:1px 1px 5px 5px #ccc; 42} 43 44#box dl dd div h1 { 45 padding-top:10px; 46 line-height:10px; 47 font-size:8px; 48 font-weight:normal; 49} 50 51#box dl dd div p { 52 padding-top:15px; 53 line-height:6px; 54 font-size:6px; 55}

HTML

1<div id="box"> 2 <dl> 3 <dt><a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014"></a></dt> 4 <dd> 5 <div> 6 <h1>"Welcome to TokyoHill"</h1> 7 <p>Den-enCho-fu, 2013</p> 8 </div> 9 </dd> 10 </dl> 11</div>

投稿2017/03/14 09:05

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomo39-.

2017/03/14 10:17

ありがとうございます。 次回より、記載いただきたのを参考に、 dl dt ddで配置していきたいと思います。 今回はいただいたコードを書き換えて試したのですが、 やはりspdayoやcoolsrightも作り直しになることから、シンプルな手法を取らせていただきました。 お手数をおかけしました、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問