• ベストアンサー

【初心者です】HP作成しています。ヘッド画像をクリックして、トップページへリンクのタグを教えてください。

HTMLとCSSを勉強しながらHP作成している初心者です。 外部CSSを使ってHPを作ってるんですが、　 ヘッド画像（W830px×H390px）をクリックしたら、トップページへ飛べるようにするには、CSS側とHTML側、それぞれどのようなタグにしたらいいのでしょうか？？ 困っています！ どなたか教えてください。よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • salonpath
  • ベストアンサー率48% (194/399)
回答No.3

■index.html ├imgフォルダ │└header.jpg（ヘッダー画像） │ ├cssフォルダ │└外部css.css │ ├他のhtml ： └他のhtml こんな感じの階層でトップページがindex.htmlだったら <a href="index.html" title="トップページへ"><img src="img/header.jpg" width="830" height="390" alt="ヘッダー" /></a> こう書けばいいのかな

opeljackie
質問者

お礼

その通りです！！ 「img/」が抜けてました！ ご丁寧にありがとうございます。 salonpathさん、本当にありがとうございますm_ _m!!!!

その他の回答 (2)

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.2

間違えましたすみません。 ｘ■トップページへのペス ○■トップページへのパス >左上に文字としてリンク ■の部分のパスは自分の環境に合わせて変更してください。 opeljackieさんが、どのようなフォルダ階層でサイトを制作しているのか、どんな名前のhtmlがトップページなのか判らないのでそこは書けないです。 外部cssですが、リンクを設定するのはhtmlなので、この場合関係ないです。 文章を書いたり、ページにリンクを付けたり、画像を挿入したりするのがhtmlの仕事で htmlの文章の色を変えたり、文字の大きさや形を変えたり リンクの下線を消したり追加したり、リンクの色を変えたり 画像の周りに枠を付けたりと 見た目の指定をするのがcssのお仕事になります。

opeljackie
質問者

お礼

>どのようなフォルダ階層でサイトを制作しているのか、どんな名前のhtmlがトップページなのか判らないのでそこは書けないです。 ↑で、わかりました！かなり初歩的なミスでした。 >見た目の指定をするのがcssのお仕事になります。 そうですよね。深く考えすぎていたみたいです。。。 ご教授ありがとうございます！ 助かりました！＾ー＾

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

<a href="■トップページへのペス" title="トップページへ"><img src="■ヘッド画像へのパス" width="830" height="390" alt="ヘッド画像" /></a> ■の部分のパスは自分の環境に合わせてください。 ただのリンクと変わらないですよ

opeljackie
質問者

補足

ご回答ありがとうございます！ このタグを、HTMLファイルに入れるんですよね？？ 外部CSSは何も指示をいれなくてよいのでしょうか？？ ご回答して頂いたタグをHTMLファイルに入れたら、 左上に文字としてリンクが貼られるのですが、、、、。 何度もすみません。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • ホームページを作っていてトップのバナー画像をクリックするとトップページに戻るように設定したい

    いまテンプレートを使ってホームページを作っているのですが、 タイトルの書いたトップのバナー画像をクリックすると トップページに戻るようにしたいのですが、 HTMLとかCSSとかよくわかりません。 どのようなタグなどを入れたらよいでしょうか？ よろしくお願いします。

  • ページのトップへの画像

    ページのトップへの画像をcssにしようと思っています。 現在 ＝＝＝ html ＝＝＝ <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- div.box { width: 90%; height: 20px; color: #ffffff; background-color: #000000; padding: 3px 10px 3px 10px; } .gotop { float: right; padding-top: 3px; } --> </style> <title>Title Box</title> </head> <body> <div class="box"><a href="#top" class="gotop"><img alt="gotop" src="gotop.png"></a>Title Box</div> </body> </html> のようになっているソースを画像を指定してのcssに変えたいと思っていますがうまくできません。 上手にする方法を教えてください。

    • 締切済み
    • CSS
  • ＨＰのトップページをＦＬＡＳＨで作成しようと考えています。

    ＨＰのトップページをＦＬＡＳＨで作成しようと考えています。 画像を２枚使用し、ロゴをクリック時に効果音と共に２枚目の画像へと遷移するという 単純な処理なのですが、ＦＬＡＳＨは初心者なので、どのように作り上げていけばいいのか分かりません。 技術的観点から、教えていただけると助かるのですが、難しいようでしたら、 参考になるサイトや文献等を教えていただけると嬉しいです。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • HTMLでトップページの画像およびリンクのランダム表示について

    どなたかお力を貸して下さい。 現在ＨＰを作成中なのですがそのＨＰのトップページに表示される画像と、 それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。 添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。 HTMLは <h2>New!!新着製品</h2> <div class="itemlist"> <div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div> <h3>機種名</h3> <p>販売ページへ飛ぶ</p> </div> スタイルシートは #main .itemlist { border: 1px solid #CCCCCC; /*１個あたりのボックスのボーダー設定*/ padding: 5px; overflow: hidden; margin-bottom: 0.5em; width: 673px; /*段落タグ（p）の横幅とサイズを合わせる設定です。この下二つのmarginも。*/ margin-right: auto; margin-left: auto; } #main .itemlist h3 { color: #000000; border-bottom: 1px solid #cccccc; border-left: 4px solid #CCCCCC; padding: 0px 0px 0px 5px; margin-bottom: 0.5em; font-size: 100%; } #main .itemlist p { padding: 0px; } #main .itemlist p, #main .itemlist h3 { margin-left: 265px; /*画像の幅に合わせてここは変更する*/ } #main .itemlist a img { padding: 5px; /*写真と外線との余白*/ border: 1px solid #CCCCCC; } #main .itemlist a:hover img { border: 1px solid #999999; } #main .itemlist div.img { float: left; } なのですが相当難しいでしょうか？

    • ベストアンサー
    • HTML
  • CSS　同じページに違う画像を同時に表示させるタグ

    メモ帳を使ってホームページを作成しているのですが、行き詰ったのでお力お貸しください。 現在はこのような（下に表示）タグを使って、背景の画像1を表示させています。 <style type="text/css"> body{ font-size: 12pt; line-height: 200%; margin-left: 0px; padding-left: 0px; background-image: url(画像1); background-position: right top; background-repeat: no-repeat; background-attachment: fixed; } </style> 今回は、画像1（位置：右上）と同じページに画像2（位置：左下）を表示させたいのです。 画像1のみはきちんと右上に表示されるのですが、画像2も一緒に表示させる方法がわかりません。 様々なサイト様を巡らせて頂きましたが載っておりませんでした。 CSSでは二つの画像を同時に載せることが出来ないのでしょうか。 <IMG src="画像の名前">などで表示させることは可能だと思うのですが、このタグだと（私自身が初心者のため）上に書いたCSSに組み込まれた条件を書き直せる自信がありません。 ホームページ作成に関しては全くの初心者です。 上のCSSも、あるサイト様に書かれてあったのを利用させて頂いております(汗） 素人の質問で申し訳ありませんが、教えて頂けると助かります。 宜しくお願いします。 【あるページ】↓　要するにこんな感じです。 「￣￣￣￣￣￣￣￣ 画像1 │　　　　　　　　　　　 　　 　│ │　 ～文字とか～ 　　　　│ │　　　　　　　　　　　 　　　 │ 画像2＿＿＿＿＿＿＿＿」

    • ベストアンサー
    • HTML
  • 画像をトップページに貼り付けるには？

    初心者です。gooの初心者でもできるＨＰを作っています。 質問ですが、デジカメの画像に文字を書き込んでアップロードしたのですが、どこに貼り付ければトップページに画像が貼り付けられるのかわかりません（汗） 片っ端から「ＵＲＬ」って書いてあるとこに貼り付けてみたのですが、どれも違いました。知ってる方がいらっしゃったら教えて下さい！！！

  • 画像クリック時に３種類のページに、ランダムにリンクさせるには？

    こういうことは出来るのでしょうか？お教えください。 トップページに画像を張り、クリックした時に別ウインドウが立ちあがるという設定で… 画像クリックのタイミングによって、別ウインドウの中身が３種類入れ替わるようにするには、どのようなタグを画像に設定すれば出来るのでしょうか。。。

  • HP ページごとにタイトル画像を変えたいです

    以前質問したのですが、解決せず再度質問です。 HPを作成中です。 タイトル部（ヘッダ）の画像をページごとに変えようとしています。 bodyタグにclassを使用して変えようと思ったのですが、エディターでは上手く表示されるものの いざUPすると変更したい部分だけ表示されず背景色（黒）になってしまいます。 作成した外部cssとHTMLは css @charset "shift_jis"; body { font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; font-size: 75%; line-height: 2; color: #ffffff; background-color: #000000; margin: 0px; padding: 0px; text-align: center; } h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; } input,textarea,select { font-size: 1em; } form { margin: 0px; } table { border-collapse:collapse; font-size: 100%; border-spacing: 0; } ---------------------------------------------------------------------------*/ a { color: #ffffff; } a:hover { color: #FF0000; text-decoration: none; } ---------------------------------------------------------------------------*/ #container { width: 910px; text-align: left; margin-right: auto; margin-left: auto; } ---------------------------------------------------------------------------*/ .★★★ #header { background-image: url(images/mainimg.jpg); background-repeat: no-repeat; width: 100%; height: 360px; } .●●● #header { background-image: url(images/mainimg-2.jpg); background-repeat: no-repeat; width: 100%; height: 655px; } .■■■ #header { background-image: url(images/allstars-1.jpg); background-repeat: no-repeat; width: 100%; height: 560px; } .▲▲▲ #header { background-image: url(images/allstars-2.jpg); background-repeat: no-repeat; width: 100%; height: 605px; } .■■■ #header { background-image: url(images/allstars-3.jpg); background-repeat: no-repeat; width: 100%; height: 560px; } #header h1 { font-size: 10px; color: #FFFFFF; line-height: 40px; font-weight: normal; text-align: right; } HTML <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>〇〇〇</title> <meta name="description" content="×××" /> <meta name="keywords" content="....." /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="script.js"></script> </head> <body class="●●●"> <div id="container"> <div id="header"> <h1>〇〇〇</h1> </div> <!--/header--> こんな感じです。 mainimg部（大きさが異なります）の変更のみです。 不具合箇所を教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • HP作成初心者です。

    HP作成初心者です。 「alphaEDIT」を利用して、フレーム設定を行っているのですが、プレビューで確認すると フレームの枠しか表示されず、別に作成したページ内容が表示されません。 以下のHTMLですが、確認しても間違いがわかりません。 <html> <head> <title>EW</title> </head> <frameset rows="150,*"> <frame src="top.html" name="top"> <frameset cols="300,*"> <frame src="left.html" scrolling="yes" name="left"> <frame src="right.html" name="right" > </frameset> <noframes> <body> <p>このページはフレームを使用しています</p> </body> </noframes> </frameset> </html> どうすれば各ページ内容が表示されるか教えてください。 どうぞよろしくお願いします。

  • 写真クリックするとリンク先ＨＰに・・！！

    アメブロ（ａｍｅｂａ）を使用しています。 よく他の方のブログを見ていると、画像をクリックすると、楽天ＨＰにリンクされている記事をよく見ます。 この方法を教えてください。 検索したら、たぶん同様の質問かと思うものをみつけました。 http://oshiete1.goo.ne.jp/qa1893009.html ここに書いてある通りしているのですが、うまくいきません・・。 初心者なので、細かく教えていただけると助かります。 アメブロの記事を作成するページで「ＨＴＭＬタグを表示」をクリックし、 そこに以下↓をコピペすればいいのですよね？ <a href=リンク先URL target=blank><img src=画像ファイル名></a> 「リンク先ＵＲＬ」という文字を消して、ＨＰのアドレスを入れる。 画像ファイル名というのは何でしょう？？ 画像をまず、画像フォルダに保存するのでしょうか？その後、どうするのでしょうか？ おしえてください！！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する