画像の位置を調整したいです。

こんにちは、プログラミング初心者です。
現在Monaca(HTML5+JavaScriptのアプリ開発プラットフォーム)を使用してアプリ開発に取り組んでおります。

JPEGの画像にタップで音を付けています。下記のコードをデバッガーで確認するとステータスバー分の空きが出来てしまいます、ステータスバーは消せたので、厳密には上部に一行空白がある形です。画像を画面上部いっぱいまで表示したいのですが、何か解決策や具体的なコードなどご存知の方がいらっしゃれば、よろしくお願いします。

<body>

<audio id="kokokara" preload="auto" class="aaa">
<source src="se/baku2.mp3" type="audio/mp3">
</audio>

<p><a onClick="sound()"><img src="pic/sin.jpg"width="235" height="400" id="img-1" class="img-x lazy" data-width="300" data-height="300" data-src="pic/sin.jpg" data-aspect="0.748">
</a></p>

</body> 


※bodyタグ内一部抜粋

行動規範の内容に同意します

回答4件

もしかして、onsen UIを使われていませんか？
onsen UIにはステータスバー部分の高さを自動的に埋める機能がついています。
もしそうなら、

javascript
1ons.disableAutoStatusBarFill();

でその空白が消えます。

投稿2017/07/19 04:30

zohnam

総合スコア1441

anopurihana

2017/07/20 13:25

zohnamさんご回答ありがとうございます。上記のご提案いただいたコードを追加してみましたが、反映されませんでした。ちなみに、使っているのはOnsen UI V2 JS Minimumです。なにか既存のコードが邪魔をしているのでしょうか・・・。

namimon

2017/07/21 00:02

ons.ready(function(){ }) の中にコードを書かれましたか？

anopurihana

2017/07/21 13:02

namimonさんはい、そのコードで試してみましたが、反映されませんでした。他の方への返事でも書いているのですが、デバッグビルド後に確認した時、ステータスバーの時刻と充電時にはバッテリーの緑色が現れるので、恐らくステータスバー自体を上手く消せていない可能性があります。ステータスバー自体が消えていれば皆さんの仰っている方法でうまく反映できると思うのですが、、

行動規範の内容に同意します

cloudの編集画面かLocalkitでは編集画面でプレビュー表示がされていると思いますが、
そこで開発者ツールなどを使うと要素のスタイルがわかります（画面から別ウィンドウに切り離すと、わかりやすいです）。

その画面で、imgタグを選択して、margin-topなどの数値を確認してみてください。

投稿2017/07/24 09:27

namimon

総合スコア726

ベストアンサー

ｃｓｓで余白を消せます。
コードは、

<style>
.img {
position: relative;
top: 0;
margin-top: 0;
width: auto;
height: auto;
}
</style>
<body>
<audio></audio>
<div class="img"><img src="" width="" height="" oncontextmenu="return false" alt="" /></div>
</body>

トップの開始位置：0、トップのマージン：0になります。

投稿2017/07/20 02:55

grandcross_info

総合スコア130

anopurihana

2017/07/20 13:35

grandcross_infoさんご回答ありがとうございます。他の回答者の方も仰っていたので試してみましたが、上手く反映されませんでした。恐らくステータスバーがしっかり消えていればご提案いただいた方法でしっかり反映されるはずなのですが。デバッグビルドをして実際に確認してみると、ステータスバーの時刻と充電時などにはバッテリーの緑色も見えている状態です。これが完全には消えていないのが原因でしょうか？

grandcross_info

2017/07/24 07:54

marigin-top: -20px; などマイナス数値のマージンは試しましたか？

anopurihana

2017/07/26 05:57

grandcross_infoさんご指摘いただいたようにマイナス数値を試してみたところ、余白を詰めることができました！ご協力ありがとうございました。

行動規範の内容に同意します

CSSで
margin:0;
を付与してあげるとブラウザの枠に自動で合わせてくれますが
これでいかがでしょうか？
参考ページ

投稿2017/07/19 04:15

elz4m

総合スコア69

anopurihana

2017/07/20 13:32

elz4mさんご回答ありがとうございます。他の回答者の方も仰っていたので試してみましたが、上手く反映されませんでした。デバッグビルド後に確認した時、ステータスバーの時刻とバッテリーの緑色だけ残っている状態で、恐らくステータスバー自体を上手く消せていない可能性があります。ステータスバー自体が消えていればelz4mさんの方法で成功するはずですよね。

行動規範の内容に同意します

あなたの回答