Q&A
ソースはテキストで書いて、ほしい結果の絵を手書きでいいのでアップしてください
現在、CSSを学んでいる初心者です。
昨日から positionについて学んでいるのですが、画像が思った位置に動いてくれません。
何が問題かご教示いただけませんでしょうか。
やりたいことはとてもシンプルで、.cover（ただの色をつけたボックス）のなかで、.coverphoto（Jpg写真）をtop200px, left100pxに移動させたいです。現在、jpg写真は左上にあって、topやleftの数字を変えても微動だにしません（泣）
ぱっと試しましたが、問題なく動きました。
細かい不備（？）があるのでその影響かとも考えましたが、問題の動作にはなさそうです。
他の何かあったりしますか？
後、yambejpさんも仰ってますがテキストで書いて下さると有り難いです。
回答に記載しました、class属性前に全角スペースでドンピシャでした。
見事に効かないです。
やはり画像だと細かい原因わからん。
みなさんがおっしゃるように、コードは画像ではなくテキストで提示してください。
その際、質問が見やすくなるようにコードブロックで囲ってほしいのですが、わかりづらければ質問にコードを文字で貼り付ける→コードの部分を選択する→<code>というボタンを押す→「ここに言語を入力」という部分をHTMLにする。つまり、以下のような形にしてください。
```html
ここにコードの中身
```
あああ、ご指摘ありがとうございます。
以下、コードを記載します。お手間とらせてしまい申し訳ございません。。。
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<meta charset="UTF-8">
</head>
<style type="text/css">
.cover
{
background-color: #e2d1c3;
height:500px;
width:300px;
position:relative;
}
.coverphoto
{
position:absolute;
top:200px;
left:100px;
}
</style>
<body>
<div class="cover">
<img src="img/Alfie_logo.jpg" width="100px" height="100px" class="coverphoto">
</div>
</body>
この欄ではなく質問を編集してほしかったのですが…
何度もすみません。質問修正しました！
回答3件
0
ソースコードでいただいてないので、細かく修正を回答することはできませんが、
何点かエラーの原因になっていると思われる事項を回答します。
- <style>要素が、head要素の外側に記載されている。
head要素の中に移してください。おそらく、色をつけるのも、うまく付いていないのではないでしょうか？
- html要素の終了タグがない。
一番最後の行に</html>をつけてください。
CSSの効く効かないには影響しないかもしれませんが、別の部分で、エラーの元になります。
正しく記載するよう心がけると、自然と動作不都合などが無くなっていきます。
- エラーと直接関係ありませんが、width・height属性では、単位の記載（px）はできません。数値のみです。
（挙動はピクセル単位）
上記をまず直してみてください。
それでもダメであれば、もう画像をみた限りでの回答は不可能です。
ソースコードを質問文に記載してください。
なんとなくですが、
html
1<img src="img/Alfile_logo.jpg" width="100px" height="100px" class="coverphoto">
の部分、これのように、height="100px"とclassの間、全角スペースになってませんか？
これだと、imgのクラスが有効にならないので、
当然、CSSは効きません。
投稿2019/05/22 06:14
編集2019/05/22 06:45総合スコア9528
コードはテキストで書くべきでしたね。。。すみません。。。指摘いただいた通りに修正をしてみたのですが、やはり、jpg画像は動いてくれません（泣）
また、単位にpx を記入しないと、色付きのボックスが横長になってしまう謎の現象が起こってしまいます。。。
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<meta charset="UTF-8">
<style type="text/css">
.cover{background-color: #e2d1c3;
height:500;
width:300;
position:relative}
.coverphoto{position:absolute;
top:300;
left:200}
</style>
</head>
<body>
<div class="cover">
<img src="img/Alfie_logo.jpg" width="100" height="100" class="coverphoto">
</div>
</body>
</html>
<img src="img/Alfie_logo.jpg" width="100" height="100" class="coverphoto"> には単位pxは要らないけれど、<style>で囲まれた方には必要です。
そうなんですね！指摘ありがとうございます！
CSSの方には必要なのは書くべきでした。
すみません。
dit.さん>補足大変にありがとうございますます！
left:200の行末に;がなくなってますが、それつけてもだめですか？
（ブロックの最後なので、影響しないとは思いますが）
あと、コードを書くときは、<code>ボタンを押して、出現した文字列（バッククォート三つの間）の中に書きましょう。
他の方に指摘していただいたのですが、複数箇所全角が混ざっており、それが原因動かなかったようです。一旦全てクリアにして、書き直したところ、動くようになりました。
初心者の要領の得ない質問に対し、たくさんご教示いただき本当にありがとうございました。感謝申し上げます。
やはり、全角でしたか。
全角スペースって、日本語なので、
英語が基準のプログラムには、解釈できないものです。
CSS、HTMLのタグの属性の間部分、いずれのコメントアウト以外には、全角はダメなんですよね。
ベストアンサー
ありがとうございます。全く同じコードに見えるのに、再現いただいたURLのコードに、自分のJPEG画像を放り込むと、自分の希望通りにJEPGが動きました。
他の方の指摘を受けて、細かな不備を改善したのですが、やっぱり自分の書いたコードだとダメです。一体何故なんでしょうか。。。
↓自分の書いたコード（JPEG画像は動きません）。
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<meta charset="UTF-8">
<style type="text/css">
.cover{background-color: #e2d1c3;
height:500;
width:300;
position:relative}
.coverphoto{position:absolute;
top:300;
left:200}
</style>
</head>
<body>
<div class="cover">
<img src="img/Alfie_logo.jpg" width="100" height="100" class="coverphoto">
</div>
</body>
</html>
↓再現いただいたコードに、自分の画像を貼り付け（画像は希望通り動きます）↓
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<meta charset="UTF-8">
</head>
<style type="text/css">
.cover {
background-color: #e2d1c3;
height: 500px;
width: 300px;
position:relative;
}
.coverphoto {
position:absolute;
top: 300px;
left: 200px;
}
</style>
<body>
<div class="cover">
<img src="img/Alfie_logo.jpg" width="100px" height="100px" class="coverphoto">
</div>
</body>
差異を確認してみたのですが、動かなくなるような違いはなかったですね。
ただ、ツールのせいか、コメントのコードをコピーしたせいか分かりませんが、動かないコード内に全角スペースが2個ほど入ってるように見えました。
実際のコードには全角スペース混じってませんか？
もし無いのであれば申し訳ないのですが、私はお手上げですね。。
大変大変大変ありがとうございました。全角が混ざっていたみたいです。無事に動くようになりました。まる二日間試行錯誤してダメだったので、本当にグッタリしてしまいましたが、ちょっとの全角もダメなんですね。学びました。ありがとうございました。
解決できたようで良かったです！
全角スペースが全く使えないわけでも使う方法がないわけでもありませんが
基本的にタブーと頭の片隅にでも入れておいてもらえればと思います。
今後コードは問題ないのに動かない！って時にでも思い出してくださいな。
0
画像に直接classをつけるのではなく、relativeをお盆、absoluteをお皿、画像をご飯、ってイメージで組むとわかり安いかもしれませんよ〜！！
投稿2019/05/22 06:17
総合スコア83
今回の質問は、そもそもCSSが効いていないという質問となりますので、
別の、コード上での不都合です。
組み方やイメージの仕方、classのつける位置などの話は不適切な回答かと思います。
わざわざご指摘ありがとうございます。terateil初心者なのでダメ出ししていただいて助かりました。
positionのcssが効いていない＝きっちりご飯が配膳されていないってイメージでいつも組んでるのでそのままに回答していましたね。
以後気をつけますね！
質問にソースコードの記載がないので、勘違いしやすい状態ですよね 汗
イメージは大事だと思うので、そのやり方は賛成です。
私も、変数なりセマンティクスなマークアップのイメージにはよく箱とかで例えてイメージしてます。
私自身、いまだにとんちんかんな回答してしまったりするので、お互い気をつけてよくなっていきたいですね。
あなたの回答
tips
プレビュー
