
<a>リンクが飛ばない・・
パソコン初心者です 、本を見ながらHTMLで<a>でコードをかいたのですがWebに表示されません、本に書いてある通りにスペルも何度も見直しましたがリンクが飛びません
そして以下の表示が出てました↓
☆【 このコンピューターが差出人に識別されることを予防するため画像がブロックされています画像を表示するには、このアイテムを開いて下さい。】
意味がわからなくて困っています!
対応策をご存知の詳しい方おられましたら教えてください。
よろしくお願いいたします。
No.6ベストアンサー
- 回答日時:
例えばの操作を書かせて頂きます。
Bracketsを起動します。
上部メニューの「ファイル」→「新規作成」をクリックします。
出た画面に、以下の線内のソースをコピー&ペーストします。
―――――――――――――――――
<html>
<head>
</head>
<body>
<a href="https://www.google.com/"><img src="https://www.google.co.jp/favicon.ico"></a>
</body>
</html>
―――――――――――――――――
上部メニューの「ファイル」→「名前を付けて保存」をクリックします。
保存先となる任意の場所やフォルダを開き、「ファイル名」の欄に「index.html」と全て半角で入力し、「保存」をクリックします。
(同名のファイルがある場合は他の名前で結構です。使用する文字は、全て半角で、英数字と「 - _ . 」のみが無難です。)
Google Chromeで、保存したHTMLファイルを開きます。
画像が表示され、それをクリックするとGoogleのサイトへジャンプすれば正常です。
間違えやすいポイントとしましては、以下のようなものがあるかと思います。
・半角で記述すべき所を、半角で記述していない
・拡張子を付けていない
(「index.html」で言えば、「.html」の部分)
・必要な部分の打ち忘れ
(「<a href="https//www.google.com/">Googleへリンクする</a>」は、「https//」に「:」を入れて「https://」にする必要があります。)
こちらで「Windows11」+「Brackets」で検証しても当該のエラーは出ませんでしたので、何かそちらで問題のある操作をされている可能性が高いと思われますが、それはこちらからは分かりませんので、とにかく細かいミスに注意してみてください。
又、画像ファイル等の指定方法は、「絶対パス」「相対パス」「ルート相対パス」(ルートパス)等がありますので、これは押さえておいてください。
「絶対パス 相対パス ルート相対パス」でWEB検索すると、詳しく解説しているサイトが見付かるかと思います。
HTMLファイルと同じ場所に画像ファイルがあるなら、ファイル名を書くだけで認識されます。これは相対パスです。
No.5
- 回答日時:
> このコンピューターが差出人に識別されることを予防するため画像がブロックされています画像を表示するには、このアイテムを開いて下さい。
これは主にメール画面にて出るメッセージのように思いますが、そうではないでしょうか。
一般的なWEBブラウザ(Microsoft Edge、Internet Explorer、Google Chrome、Firefox等)でそのメッセージが表示されたのでしょうか。
あるいは、Windowsからのメッセージでしょうか。
当該のメッセージの意味は、つまり、「その画像を読み込むと、相手方のサーバー(コンピューター)にアクセスする事になり、あなた(あなたのメールアドレス)が生きている事が相手にバレてしまう可能性があるが、それでもいいか」という意味です。
詳しくは、以下が参考になるかと思います。
https://detail.chiebukuro.yahoo.co.jp/qa/questio …
とりあえず、当該のメッセージは、何のソフトで出たメッセージなのか、どういう操作を行った時に出たのかを補足された方が良いかと思います。
出来れば、例えば、以下のような感じで書いてもらうと分かりやすいです。
---------------------
Windows10のパソコンで、メモ帳を使い、HTMLを書いています。
「~」というコードを書いて、Microsoft Edgeで表示すると、「~」というメッセージが出て、正しく表示されません。
どうしたら良いでしょうか。
---------------------
回答ありがとうございます
HTMLを学ぼうと本を見ながらやったのですが
エディターはAdobe社のBracketでGoogle Chrome、Windows11を使用しました
◆コードを書いてWebに表示されるか確認する段階でプログラムから開く→ Google Chrome
と進めました。
教科書通りやったのに訳のわからない結果が出て頭の中は真っ白です・・
アドバイス頂ければとても助かります
よろしくお願いいたします。
No.4
- 回答日時:
では、試しに、以下をコピーしてから、
テキストに貼り付け、Webサーバーにアップして、表示&クリックしてみましょう。
<a href="//google.com">Google</a>
---------
<a>コードと画像は無関係なので、何をやりたいのか、私や他の回答者さんにもわからないです。
環境問題やセキュリティ問題があるのではないでしょうかねぇ・・・
だから、1つ1つ解決していくべきなので、上記のテキストアンカーで、リンクが動作するか?試すだけです。
回答ありがとうございます
表現に問題があり申し訳ございませんでした、リンクには飛ばすことができたので問題は他にあるかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLの条件によって表示方向が切り替わる実装のコードを教えて下さい。 (コードは下記リンクを参照) 1 2022/09/25 14:35
- その他(スマホアプリ・スマホゲーム) アプリをスマホにダウンロード、インストールする方法 3 2022/08/13 11:26
- JavaScript 【GAS】WEBアプリでハイパーリンクを挿入したい 1 2023/03/12 19:20
- ドライブ・ストレージ テレビ録画用の外付けHDDが急に認識されなくなりました。 検索した方法でテレビのコード、USBのコー 4 2022/06/14 00:37
- WordPress(ワードプレス) wordpressでphpを読み込みたい 1 2022/10/30 23:40
- 防犯カメラ・監視カメラ・小型カメラ VHSを高画質な動画ファイルにしたいです。 3 2022/05/06 12:08
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- その他(データベース) Q&Aフォームを作成したいのですが、どう設計してよいか分かりません、アドバイスお願い致します。 1 2023/07/27 19:04
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
拡張子無しで画像を表示したいです
-
HTML上の画像を結合する方法が...
-
画像が読み取れないときに別画...
-
onmouseoverに複数の命令を書き...
-
ポップアップウィンドウを気付...
-
アルバムをめくるように、画像...
-
ボタンを押したままにする。
-
HPビルダーのワイプについて
-
クリックしても、リンクに飛ば...
-
HTML文書 画像の保存の仕方
-
ロゴマークだけを抜き取って貼...
-
PDFの保存ボタンが表示されません
-
アイコンの背景を透過させたい
-
GIFアニメを保存すると、白いふ...
-
画像貼り付け、URLに飛べる軽い...
-
Adobe インデザインに詳しい方...
-
同じ画像 複数回使用
-
vscodeにのcssについて質問です...
-
FireAlpacaの透過、PNG保存の状...
-
cssでボックス内にテーブル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライドショーの上にロゴマー...
-
クリックしても、リンクに飛ば...
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
バナーの貼り方とバナーにリン...
-
form以外でのpostってできますか?
-
背景が透明なリンクボタンで、...
-
クリッカブルMAP領域が分かる様...
-
イメージマップを貼った画像の...
-
タイトルバーに画像を入れるHTM...
-
WEBサイトの一部コンテンツがス...
-
期間ごとに画像表示を切り替え...
-
<area></area> 部分にボーダー...
-
thickboxでcloseボタン右上配置...
-
複数のボタンで1つのエリアに...
-
HTMLだけで画像をクリックして...
-
windowsは画像にマウスオンで画...
-
onmouseoverに複数の命令を書き...
-
マウスオンの画像の切り替え
-
携帯用HPのダウンロードページ...
おすすめ情報