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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

Q&A

解決済

4回答

1079閲覧

ホームページ制作:1つの画像のみをトップページに表示させたいがレスポンシブ対応のやり方がわからない

RyoheiSugahara

総合スコア8

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

0グッド

0クリップ

投稿2018/07/08 03:04

編集2018/07/08 10:03

一部にリンクを貼った画像をホームページのトップページに置きたいのですが、サイドに余白ができてしまいます。

**パソコン、スマートフォン、タブレットなどあらゆる端末で、余白ができないようにフルスクリーン表示させる方法を教えてください。**下にスクロールする分には構いません。

初心者なので、わからないことだらけで申し訳ないですがよろしくお願いします。

HTML

1<p> 2 <img src="https://placehold.jp/1500x3500.png" usemap="#ImageMap" alt="" /> 3<map name="ImageMap"> 4 <area shape="rect" coords="195,209,989,737" href="#" alt="" /> 5</map> 6</p> 7

CSS

1p img { 2 max-width: 100%; 3}

完成イメージは「ホームページのトップページに画像が全画面表示される。」です。

イメージ説明

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

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

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

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

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

CHERRY

2018/07/08 05:59

現在、どのようにHTML , css を記載しているのかを 質問に追記してください。
----------

2018/07/08 08:01

どのようにHTML , css を記載しているのかを <code>ボタンを押して、質問に追記してください。そうすれば回答される率が上がります。
----------

2018/07/08 14:54

ソース中に、イメージマップ(例:https://allabout.co.jp/gm/gc/23823/)の箇所がありますが、リンクは設定されていませんね…。イメージマップは必ず必要ですか?それとも、画像さえ表示できればそれでいいですか?(イメージマップ消していいんですか?)
----------

2018/07/08 14:55

「↑に追記」<code>ないに記入されているソースはご自分で理解されていますか?それともとりあえずコピペされたやつですか?
RyoheiSugahara

2018/07/09 05:04

イメージマップは必要です。そのソースは理解してます。でもとりあえずコピペです。
----------

2018/07/09 12:33

わかりました。こちらも初心者ですが考えてみます…。(タグに「javascript」もつけるとちゃんとした技術のあるまともな人からの回答率が上がるかもしれません…。)
guest

回答4

0

「画像の一部にリンクを貼る」というものは「クリッカブルマップ」と呼ばれます。
画像をレスポンシブ化することは簡単ですが、クリッカブルマップをレスポンシブ化するには
jQueryのプラグイン等を利用する必要があります。

・クリッカブルマップをレスポンシブ対応する方法
・イメージマップを使ってレスポンシブな画像内の好きな箇所にだけ、属性やクラスを与えたりする

さて、クリッカブルマップの画像をレスポンシブ化することは上記のようにプラグインを使えばできるのですが、
さらにそれを「全画面表示」しようとすると難易度が一気に跳ね上がります。

まず「全画面表示」とはブラウザウィンドウを常に画像で覆う状態をキープする必要があります。
これ自体は背景画像使ってbackground-size: coverを指定してやれば簡単に実現できますが、
背景画像にしてしまうとクリッカブルマップが使えません。
img要素を使って背景画像のbackground-size: coverと同じことをするには、img要素に対してobject-fit: coverを指定する必要があるのですが、このプロパティはIE11で使えません。(※polyfillスクリプト使えば可)

更に何らかの方法で1つのimg画像をブラウザに対して全画面表示させたとして、
ブラウザウィンドウはサイズを自由に変えられますので、用意した画像の縦横比と異なる比率で
表示している時、必ず画像のどこかがマスクされて非表示となります。
その非表示エリアにクリッカブル領域があった場合、当然ですがそこはクリックできませんので
機能不全に陥ります。

ほんとうの意味での「全画面表示」ではなく、
単純に「ウィンドウの横幅いっぱいに広がる画像を配置して、高さは成り行き(場合によっては余白が出ても可)」でよければ

  1. クリッカブルマップを指定する
  2. img{width: 100%; height: auto;}
  3. プラグインでクリッカブルマップをレスポンシブ化

の3ステップで実現可能かと思われます。

あ、ちなみにリセットCSS読み込んでる前提なので、読み込んでないなら* {margin: 0; padding: 0;}とでもして全ての要素から余分な余白を削除しておいてくださいね。

投稿2018/07/10 03:00

aKusano

総合スコア3763

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

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

0

超初心者ですが回答させていただきます。

#①の方法
画像のみを表示したかったら、
(http://は全角にしています・・・。)
https://placehold.jp/500x800.png
のようなアドレスを

HTML

1<html> 2<head> 3</head> 4<body> 5<a href="https://placehold.jp/500x800.png">○○についてこちらを参照</a> 6</body> 7</html>

的な感じでやれば画像が表示されるところに行けます。(ソース中のHTML宣言や文字コードなどの記載は省略しています。)

#②の方法
○○.htmlというようなページにレスポンシブで画像を表示することに関しては、ググればいろいろ出てきます。
CSSやHTMLにいろいろ書く必要が出てきますが、質問者様が求めているのはたぶんこちらではないのかなぁの思います。
参考になりそうなサイトをいくつか列挙しておきます。

参考になりそうなサイト1

参考になりそうなサイト2

参考になりそうなサイト3

参考になりそうなサイト4

投稿2018/07/08 08:10

編集2018/07/08 14:48
----------

総合スコア20

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

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

kei344

2018/07/08 08:16

ダミー画像を入れるなら、いくつかサービスがありますよ。(たまにサービス終了したりしますが) 【Placehold.jp|ダミー画像生成 モック用画像作成】 https://placehold.jp/
----------

2018/07/08 08:26

ダミー画像って画像を保存させないため以外にも使えるものなんでしょうか?(初心者ゆえの無知ですみません。)(興味があるので詳しく教えていただきたいです♪)
kei344

2018/07/08 08:31

すみません、「画像を保存させないため」とはなんでしょう。「http://は全角に」とするくらいならダミー画像でも入れておけばよいと思っただけなのですが・・・。
----------

2018/07/08 08:42 編集

この前まで、画像を扱って遊んでたので…。 僕の中では、 画像を保存させたくない=画像の上にダミー画像(1×1ピクセル)を重ねる みたいな認識でした。すみません。 https://placehold.jp/500x800.png こういうことですね…。 自前で公開できるサーバーがないのと、初心者だもんで、思いつかなかったです・・・。 あと、掲示板系だとhttp://だけ全角の時が多いので(個人の感想です)……。 (・o・) 修正させていただきました。 この度はお手を煩わせてしまい、大変申し訳ございませんでした。 お詫びして訂正いたします。
kei344

2018/07/08 08:45

> あと、掲示板系だと それは多分URLが自動的にリンクに変換されるサービス上で、リンクにしないためにそうされているのだと思います。teratailは自動で変換する機能は回答文には使用されていないため、そういったことはしなくても大丈夫ですよ。
----------

2018/07/08 08:48

すいません、teratailを始めるまでにMarkdown記法を1日かけて理解したはずなのに…。 まだまだでした。もっとできるように頑張ります。 !(^^)!
guest

0

画像をbodyタグのBackgroundにしてaタグをposition:absoluteかmarginで位置固定させたらだめなんですかね?

投稿2018/07/10 06:21

i_sugiyama_tomo

総合スコア85

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

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

0

ベストアンサー

あくまでも方法のひとつですが、レスポンシブのフレームワークを使ってみたらどうでしょうか?
いろいろなフレームワークがありますが、私は「Bootstrap」というものを使っています。CSSとJavascriptを置くだけで、あとはCSSのClassでかなり便利に使え、また「Pingendo」というBootstrapのプロトタイプが作成出来るツールがあります。

https://pingendo.com/

WEB上にPlay Groundがあり(Chromeのみ)、ツールとしてダウンロードも可能です。すみません、使い方等は調べて下さい。

クリティカルマップについては、先の回答の通り、jQueryプラグインで可能と思います。

参考になれば幸いです。

投稿2018/07/10 03:49

SaintKnowledge

総合スコア368

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問