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

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

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

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

CSS

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

Q&A

解決済

2回答

4128閲覧

画像を画面中央に持っていき固定したい、テキストテンプレートにテキストを記入したい。

tomo39-.

総合スコア27

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/03/14 02:26

編集2017/03/14 04:37

現状態になっています。
はめ込むことができました。

###前提・実現したいこと
画像をフレーム(額)で取り囲みたいです。
Macのウィンドウの幅を広げた時に画像が一致(グループ)して一緒に動く状態にしたいです。固定したいです。

###発生している問題・エラーメッセージ

ウィンドウの幅を広げると額だけが移動せずに、
画像が移動してしまいます。

###該当のソースコード
Coolsrightは画像、spdayoが画像の額縁、
boxはメッセージテンプレート額です。

ーーー

CSS

1CSSソース 2 3#spdayo{ 4 margin:0 auto; 5 position: relative; 6} 7 8 9#coolsright { 10 position: absolute; 11 top: 55px; 12 left:60px; 13 14} 15 16#box { 17 margin-left: auto; 18 margin-right: auto; 19 position: relative; 20 top: 290px; 21} 22 23#boxtext{ 24 position:absolute; 25 top:100px; 26 left:100px; 27} 28 29

ーーーーーーーーーーーーー
HTMLソース

HTML

1<div id="spdayo"> 2<a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="585" height="585"> 3</a> 4<div id="coolsright"> 5<a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460"> 6</a></div> 7</div> 8 9<br/><br/><br/> 10<div id="box"> 11<img src="template1.jpg" width="150" height="50"> 12<!--#boxtextを入力--> 13<div id="boxtext"> 14<p>Welcome to Tokyo Hill </p> 15</div> 16</div>

プレート画像にテキストを入力したいです。
spdayo額縁に画像を入れたいです。

画像を真ん中に持っていき、固定したいです。

###試したこと
どのように書けばいいのかご教授ください。
何卒、よろしくお願いいたします。

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

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

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

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

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

kei344

2017/03/14 02:36

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
kei344

2017/03/14 03:00

書かれているコードを動かしてみましたが、完成像がつかめません。https://jsfiddle.net/h0jcbxnz/ 「理想的に合わせた」物のスクリーンショットか、図にするとか何かもう少し情報をください。
tomo39-.

2017/03/14 03:04

コードを再度編集して、アップロードしてみました。 hightouch1.tokyo よりイメージをご覧ください。
kei344

2017/03/14 03:05

アップロードとは?teratailには画像を貼り付ける機能があるので、それを利用されては?
tomo39-.

2017/03/14 03:09

失礼しました。teratailは初めてなのもので、、、画像を追加しました。よろしくお願いします。
kei344

2017/03/14 03:10

https://teratail.com/questions/69041 こちらの内容も、同じ用件について質問されています。重複投稿は歓迎されませんよ。(内容が違うと思われるでしょうが同じことについて質問されています)
tomo39-.

2017/03/14 03:11

わかりました。統一します。
tomo39-.

2017/03/14 03:22

文字のテンプレートの記載と、写真と枠の一致で違う質問だと捉えた方から返答がきましたので、、解決するまで統一は控えたいと思います。
guest

回答2

0

ベストアンサー

(html)

<div id="box"><!--額がおおもとの方がいいです。--> <img src="template1.jpg" width="150" height="50"> div id="coolsright"> <a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460"> </a></div> </div>

(css)
#box{
margin:0 auto;
position:relative;
}
#coolsright{
position:absolute;
top:50px;/額縁上面の縦幅/
left:50px;/額縁左面の横幅/
}

background:url(sp1.jpg)が表示されない理由は以下のような感じだと思います。
・最後に;がないから
・divに十分な高さ、幅がないから
・上の書き方だとcssとsp1.jpgが同じ階層内にある事が前提ですが、そうなっていない。
・background:url(sp1.jpg) no-repeat center center; としてみる。
どうでしょうか?

投稿2017/03/14 03:24

Samson818

総合スコア162

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

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

tomo39-.

2017/03/14 03:46

失礼しました。額縁のコードが記入忘れておりました。 テキストテンプレートの額と混乱させてしまい、申しわけありませんでした。
tomo39-.

2017/03/14 03:55

コードを記入してみると、、 左画面によってしまいました。これらを真ん中の位置にばしっつと決めたいです。(固定して、ウィンドウが移動しても固定されたままにしたいです。 同じく、テキストプレートも文字が記入された状態で、真ん中にバシッと決めたいです、同じく固定された状態にしたいです。 アップロード先、とリフレッシュはうまく更新されているみたいですが、 margin left autoが効いていません。 ご教授ください。。何卒、よろしくお願いします。
shi_ue

2017/03/14 04:15 編集

せっかく良い回答なので、```(バッククォート三つ)で囲って、コードとして見やすくした方がいいですね。 ```css ~ ``` とするとcssのコード表示に、 ```html ~ ``` とするとhtmlのコード表示になります。 試してみてください!(コメントにコードは書けません)
tomo39-.

2017/03/14 04:32

ありがとうございます。只今真ん中の位置まで持っていくのを試しています。
Samson818

2017/03/14 04:39

このページ初心者(初心者なのを言い訳に出来ないくらい説明を読んでいない)のですみません^^; (バッククォート三つ)試してみます!
guest

0

CSS

1#box { 2 position: relative; 3 top: 50%; 4 left: 52%; 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 }

こちらで解決しました。
youknow WEB製作さん、ありがとうございました。

投稿2017/03/14 05:52

tomo39-.

総合スコア27

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問