No.5ベストアンサー
- 回答日時:
><a href="#">
><input type="submit" id="aboutbutton" value="ボタンの名前">
></a>
それはないでしょう。(^^)
<form action="./cgi-bin/***">
<input type="submit" value="">
</form>
もしくは
<a href="./**?name=test">送信</a>
とかでしょう。
その前後のソースも必要ですが、たとえば
<p class="submit">
<a href="./**?name=test">送信</a>
</p>
だとすれば、
p.submit{
margin-left:2em;
line-height:30px;
}
p.submit a{
display:block;
width:6em;
height:20px;
position:relative;
}
p.submit a:before{
content:url(画像のURL);
}
とか、古いブラウザにも対応するなら
p{
background:url(画像URL) no-repeat 0 0;
padding-left:40px;
}
とか・・・
画像を含めてリンクさせたければ
p.submit{
width:100px;
height:40px;
}
p.submit a{
display:block;
width:100%;
height:100%;
margin-left:40px;
}
とか・・・・。
p.submit:before{}で画像を追加しても良いでしょう。
様々な方法がありますが、これはサイト全体や目的、想定するユーザーエージェントなど様々な条件を勘案して総合的に判断するしかないでしょう。
No.4
- 回答日時:
先ほどは来客で席を立ったため尻切れトンボに・・
文字を画像に置き換えてしまうという古い「非標準な方法」もあります<a href="<img>ほげほげ</a>が、さすがにそれではまずい。
・たとえばHTMLが独立した段落内のリンクでしたら:beforeという擬似要素を使う
・リストだったら、list-style:image;
・それ以外だと、背景にしてしまう
というのが良いでしょう。・・いずれにしろ、画像を配置するHTMLソースを示してください。
この回答への補足
HTMLソースですが、
<a href="#">
<input type="submit" id="aboutbutton" value="ボタンの名前">
</a>
です。
このvalueの値をボタン上に配置し、id="aboutbutton"にcssで背景を設定したのですが、valueの値の位置を右にずらすことが出来なく、画像に重なる形になってしまいます。
非常に分かりづらい質問で申し訳ありません。
No.3
- 回答日時:
見本だとボタン形式で全体だけど、左に来るだけのものも作り方は同じ
cssの基本がわかる前提で、
1.画像を用意する。
2.1.の画像を目的のテキストの背景にする。
ただし、1回のみ、左に
3.2.の画像のテキストと重なってはダメな分だけ、パディングで左を空ける。
以上。
注意
左だけに来るものだと、インライン要素でもブロックライン要素でもOKだが、ボタン形式で高さや幅を指定したい場合はブロック要素にすること。htmlがインライン要素なら、ディスプレイでブロックに見せかけること。
No.2
- 回答日時:
作りたいボタンが何をするボタンなのかにもよりますが、単に別ページへのリンクであるなら、
<a href="linkpage.html"><img src="filename.jpg"></a>フォローする
と書けば良いだけでしょう。
ボタン画像(filename.jpg)がすごく大きかったり、テキスト(フォローする)が長い文章だとページの右端で折り返されたり、テキストが改行になっちゃいますが、それほどでなければ上記で充分です。
この回答への補足
ページリンクではなく、<input~を使用して値を返すものです。
input type="image"だと画像扱いになるので背景は画像に出来るのですが、valueで指定した文字は画像が表示できなかったときのためのものなので、反映されません。input type="submit"だと、画像をsrcで指定しても表示されなくなり、上手くいきませんでした。
分かりにくい説明で申し訳ありません。よろしくお願い致します。
No.1
- 回答日時:
HTMLが、単なるリンクですか?、ナビゲーションリストのひとつですか?
<p>
<a href="">フォローする</a>
</p>
それとも
<input type="button" value="フォローする">
それとも
<div nav">
<li><a href="">フォローする</a></li>
<li><a href="">フォローする</a></li>
<li><a href="">フォローする</a></li>
</div>
どれでもよいですが・・・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
background-sizeでcontainする...
-
【至急お助け!】チェックボッ...
-
<hr>の縦バージョンはありますか?
-
gif画像でたまに背景がグレーに...
-
LightBoxの矢印の出し方
-
リストビューのTextBackground...
-
ワードプレスで事前定義されたc...
-
コーディング中、右側に謎の余...
-
lightbox2で画像を天地左右中央...
-
【Webサイト】画像が小さく表示...
-
Firefoxで背景画像が表示されず...
-
画像上に文字を表示するとiPhon...
-
リキッドレイアウトについて疑...
-
background-sizeの背景で最小値...
-
同じ画像 複数回使用
-
webページ作っているのですが、...
-
【ウェブ構築】DIVの背景を斜め...
-
PDFの保存ボタンが表示されません
-
ロゴマークだけを抜き取って貼...
-
IMGタグでTIFF画像を表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
IMGタグで画像の繰り返し使用は…
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
htmlかcssで背景の白い枠をなく...
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
LightBoxの矢印の出し方
-
コーディング中、右側に謎の余...
-
WEB上でディレクトリ内の画像を...
-
HP作成 作成した画像を動画の上...
-
ページごとに背景画像を変更し...
おすすめ情報