gooの簡単ホームページでメニュースイッチをURLでつけたのですが、スイッチアイコンの回りに色枠ができます。
どうやってコレを取ればいいでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (1件)

htmlが直接編集できるならアイコンのイメージタグで


<img border="0" ・・・・
このように書いてみたらどうでしょう?

borderは境界線の太さを指定する物です。

簡単ホームページ上で「枠の太さ(サイズ?)」を指定することは出来ませんか?
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSS リンクを枠で囲み背景色をつけてボタンのようにして、その中にpngアイコンを表示させたい。

やりたいことは、リンク先である Facebook とTwitter のURLに 囲み枠で丸くしグラデーションで背景色をつけたあとに、リンク先の文字の後ろにアイコンを表示したいと考えています。試行錯誤で試しいてますが、うまくいきません。もし分かりましたら宜しくお願いします。


【HTML】
<center><a href="http://www.xxxx.com" class="fb-b" >Facebook<div classs="fb-ic" ></div></a></center>

<center><a href="http://www.xxxx.com" class="tw-b" >Twitter<div class="tw-ic" ></div></a></center>

【CSS】
/* Facebookボタン */
.fb-b{
background-image: linear-gradient(-90deg, #043495, #984BB4);
color: #fff;
width: 200px;
padding: 5px;
border-radius: 5px;
border-style: solid; border-width: thin;
display: inline-block;
}


/* Twitterボタン */
.tw-b{
background-image: linear-gradient(-90deg, #F1F3F9, #EBFFF9);
/*color: #fff; */
width: 200px;
padding: 5px;
border-radius: 5px;
border-style: solid; border-width: thin;
display: inline-block;
}

/*アイコンボタン */
.fb-ic{
background: url(facebook.png) no-repeat right center;
background-size:30px 30px;
}
.tw-ic{
background: url(twitter.png) no-repeat right center;
background-size:30px 30px;
}

やりたいことは、リンク先である Facebook とTwitter のURLに 囲み枠で丸くしグラデーションで背景色をつけたあとに、リンク先の文字の後ろにアイコンを表示したいと考えています。試行錯誤で試しいてますが、うまくいきません。もし分かりましたら宜しくお願いします。


【HTML】
<center><a href="http://www.xxxx.com" class="fb-b" >Facebook<div classs="fb-ic" ></div></a></center>

<center><a href="http://www.xxxx.com" class="tw-b" >Twitter<div class="tw-ic" ></div></a></center>

【CS...続きを読む

Aベストアンサー

<center>なんて、とっくの前に使わなくなったし・・
<ul id="#SNS_Link">
 <li><a href="http://www.xxxx.com">Facebook</a></li>
 <li><a href="http://www.xxxx.com">Twitter</a></li>
</ul>
と文書構造以外書かない。書いてはならない。デザイン(プレゼンテーションに関わるものはHTMLには書かない。
 ましてや、<div class="tw-ic" ></div>なもの書かない!!!
・HTML5未満のHTMLはA要素内に<div>はおけない
・空の要素は書いてはならない
・デザインのためだけの要素は無論、classやidは書かない。後でワケワカメになる。

・・これは基本です。
★構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 idやclassを併用して文書構想を補完する。


 ここは、SNSへのリンクのリストですから・・

<ul id="SNS_Link"><!-- リンクのターゲットになるかもしれないのでidで構造を補完 -->
 <li><a href="http://www.fff.com">Facebook</a></li>
 <li><a href="http://www.ttt.com">Twitter</a></li>
</ul>

と記述したほうが良い。SEO(検索エンジン最適化)は無論、メンテナンス性も含めて、あらゆる面で優れている。
フレゼンテーションと切り離すことで、自由自在にデザインできるようになる。

スタイルシート

ul#SNS_Link{
margin:0.5em 1em;
padding:0;
list-style-type:none;
}
ul#SNS_Link li+li{
margin-top:20px;
}
ul#SNS_Link li a{
display:inline-block;
background: linear-gradient(white, gray);
border-radius:0.5em;
position:relative;
padding:5px;
text-decoration:none;
}
ul#SNS_Link li a[href]:after{
content:"";
position:absolute;
right:-40px;top:0;
display:inline-block;
width:30px;height:30px;
background-size:cover;
}
ul#SNS_Link li a[href="http://www.fff.com"]:after{
background-image:url(./images/icons/facebook.png);
}
ul#SNS_Link li a[href="http://www.ttt.com"]:after{
background-image:url(./images/icons/twitter.png);
}
ul#SNS_Link li a:hover{
background: linear-gradient(white, red);
}

★ スタイルシートを書く前に、HTMLのチェックしましょう。
「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )」
・HTMLのチェックは
 Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
  の右上の[DATA]が便利
・Unicorn( https://validator.w3.org/unicorn/ )

下記サンプル(全文)はチェック済み!!
*タブは_に置換してあるので戻す
*文字コードはShit_JIS

<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
ul#SNS_Link{
margin:0.5em 1em;
padding:0;
list-style-type:none;
}
ul#SNS_Link li+li{
margin-top:20px;
}
ul#SNS_Link li a{
display:inline-block;
background: linear-gradient(white, gray);
border-radius:0.5em;
position:relative;
padding:5px;
text-decoration:none;
}
ul#SNS_Link li a[href]:after{
_content:"";
_position:absolute;
_right:-40px;top:0;
_display:inline-block;
_width:30px;height:30px;
_background-color:red;
_background-size:cover;
}
ul#SNS_Link li a[href="http://www.fff.com"]:after{
background-image:url(./images/icons/facebook.png);
}
ul#SNS_Link li a[href="http://www.ttt.com"]:after{
background-image:url(./images/icons/twitter.png);
}
ul#SNS_Link li a:hover{
background: linear-gradient(white, red);
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<ul id="SNS_Link"><!-- リンクのターゲットになるかもしれないのでidで構造を -->
___<li><a href="http://www.fff.com">Facebook</a></li>
___<li><a href="http://www.ttt.com">Twitter</a></li>
__</ul>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

<center>なんて、とっくの前に使わなくなったし・・
<ul id="#SNS_Link">
 <li><a href="http://www.xxxx.com">Facebook</a></li>
 <li><a href="http://www.xxxx.com">Twitter</a></li>
</ul>
と文書構造以外書かない。書いてはならない。デザイン(プレゼンテーションに関わるものはHTMLには書かない。
 ましてや、<div class="tw-ic" ></div>なもの書かない!!!
・HTML5未満のHTMLはA要素内に<div>はおけない
・空の要素は書いてはならない
・デザインのためだけの要素は無論、classやidは書かない。後でワケ...続きを読む

QCSS アンカーの画像の回りが色枠で囲まれてしまう

<a>タグでリンクボタン(画像)を作りました。
ソースはこんな画像とURLを指定したのみです。
<a href="http://xxxxx/"><img src="/image/menu01.gif"></a>

ブラウザで見ると、画像の周りが青枠で囲まれてしまっています。
(一度、クリックすると赤っぽい色に、その枠の色が変わります)

既存のページを元にHTMLを作成しているのですが、たぶん、定義して
ある CSS or javascript などの設定ファイルが悪さをしているような気がしていますが、何が原因か分かりません。

そのHTMLに指定してあるCSSをコピペさせていただきますが、どこが原因か分かりますか?
そのほか、怪しいところがありましたら、ご指摘ください。

よろしくお願いいたします。

----style.css---
body
{
background-color: #ffffff;
background-repeat: no-repeat;
font-family: Arial, Verdana;
font-size: 14px;
font-style: normal;
font-weight: normal;
/* color: #333333; */
/* margin-top: 10px; */
/* margin-left: 10px; */
/* margin-right: 10px; */
/* margin-bottom: 10px; */
}


/* Style for in-page header of the generated rowset pages */
.pagehead
{
font-size: 16px;
font-weight: bold;
}


/* Table row style referenced in generated various generated pages */
.tablebody
{
/* background-color: #CCDDEE; */
color: #111111;
font-size: 14px;
text-align: left;
vertical-align: middle;
padding: 5px 10px 5px 10px;
}


/* Default grid header and footer style for generated rowset pages */
.gridStyle-tr-header,
.gridStyle-tr-footer
{
background-color: #CCDDEE;
color: #555588;
font-size: 14px;
text-align: left;
vertical-align: baseline;
line-height: 18px;
border-color: #999999;
border-style: solid;
border-width: 1px;
padding-left: 10px;
}


/* Grid base row default style for generated rowset pages */
.gridStyle-tr-data
{
background-color: #FFFFFF;
color: #111111;
font-size: 14px;
text-align: left;
border-color: #999999;
border-style: solid;
border-width: 1px;
padding-left: 12px;
}


/* Grid alternate row default style for generated rowset pages */
.gridStyle-tr-alt-data
{
background-color: #CCDDEE;
color: #111111;
font-size: 14px;
text-align: left;
border-color: #999999;
border-style: solid;
border-width: 1px;
padding-left: 12px;
}


/* Used for prompts in generated pages */
.prompt
{
color: #993333;
font-style: italic;
}

A:link, A:visited, A:active {
color: #7777AA;
text-decoration: underline;
}

A:hover {
color: #9999FF;
background: transparent;
text-decoration: underline;
}

----common.css---
body { color:#111; background-color:#777; margin:0; }
form { margin:0; }

a { color:#111; }
a:hover, a.Hover { color:#666; }

a.My { color:#25a; }
a.My:hover, a.MyHover { color:#58d; }

<a>タグでリンクボタン(画像)を作りました。
ソースはこんな画像とURLを指定したのみです。
<a href="http://xxxxx/"><img src="/image/menu01.gif"></a>

ブラウザで見ると、画像の周りが青枠で囲まれてしまっています。
(一度、クリックすると赤っぽい色に、その枠の色が変わります)

既存のページを元にHTMLを作成しているのですが、たぶん、定義して
ある CSS or javascript などの設定ファイルが悪さをしているような気がしていますが、何が原因か分かりません。

そのHTMLに指定してあるC...続きを読む

Aベストアンサー

<a href="http://xxxxx/"><img src="/image/menu01.gif" border="0"></a>

で枠はなくなると思います。

Qアイコンの枠について。

 ホームページをソフトで作っているんですが、
 リンクを貼っているアイコンには、どうしても
 四角の枠が出てきます。
 それって、タグで直すにはどうしたら良いですか?
 色々と調べたんですが、アイコンにリンクを貼る
 やり方は載っていても、四角の枠を外す方法が
 見あたらないもので・・・。
 確か、前にどこかのページで見かけた時は
 「ナントカ = 0」のようなことをしていたと
 思うのですが・・・。

Aベストアンサー

hema123さんこんにちは。
枠が出ないようにするには、アイコン(画像)に「border="0"」と追加してあげれば大丈夫です。
0の部分は枠の太さです。
ホームページ作成、頑張って下さいね。

Q縦並びメニューの枠線が重ならない

いつもこちらではお世話になり、ありがとうございます。

cssのli:hoverを使ってサブメニューを表示させようとしていますが、
縦並びのサブメニューの枠線が重なってくれません。

どこが間違えているのでしょうか。
ご指摘をお願いいたします。
(素人ですので、他にもつっこみどころがかなりあると思います。
すみません(汗))

【html】

<ul class="menu">
<li><a href="menu1.html" >メニュー1</a></li>
<li><a href="menu2.html">メニュー2</a>
<ul>
<li><a href="submenu1.html">サブメニュー1</a></li>
<li><a href="submenu2.html">サブメニュー2</a></li>
</ul>
</li>
<li><a href="menu3.html" >メニュー3</a></li>
<li><a href="menu4.html" >メニュー4</a></li>
</ul>


【css】

ul.menu {
margin: 0px;
padding:0;
list-style-type : none;
}

ul.menu li {
margin:0;
float:left;
width: 107px;
line-height: 43px;
}


ul.menu li a{
display:block;
text-align:center;
text-decoration: none;
background-image: url(images/navi_b.png);
background-repeat: no-repeat;
color: #202020;
font-family: "メイリオ";
font-size: 11px;
}

ul.menu li a:hover{
background-image: url(images/navi_r.png);
}

ul.menu li ul{
display: none;
position: absolute;
top: 165px;
left: 210px;
list-style-type : none;
background-image: none;
}

ul.menu li:hover ul{
display: block;
}

ul.menu li ul li{
clear: left;
width: 106px;
line-height: 35px;
border: 1px #989590 solid;
border-collapse: collapse;
}

ul.menu li ul li a{
background: none;
background-color:#B28872;
color:#ffffff;
}

ul.menu li ul li a:hover{
background: none;
background-color: #643E3E;
color:#ffffff;
}

よろしくお願いします。

いつもこちらではお世話になり、ありがとうございます。

cssのli:hoverを使ってサブメニューを表示させようとしていますが、
縦並びのサブメニューの枠線が重なってくれません。

どこが間違えているのでしょうか。
ご指摘をお願いいたします。
(素人ですので、他にもつっこみどころがかなりあると思います。
すみません(汗))

【html】

<ul class="menu">
<li><a href="menu1.html" >メニュー1</a></li>
<li><a href="menu2.html">メニュー2</a>
<ul>
<li><a href="submenu1.html">サブメニュー1</a>...続きを読む

Aベストアンサー

すいません…改変css貼るの忘れてました…
@charset="EUC-JP";

#header{
position:relative;
x-index:100; /*ボックスが一番上の階層に表示される様に設定*/
  width:100%; /*win IE6 対策*/
height:101px;
background:#ffffff;
}

#navigation{
position:absolute;
top:37px; /*プルダウンメニューのtopからの位置*/
left:206px; /*プルダウンメニューのleftからの位置*/
width:536px; /*プルダウンの全体の幅*/
}

#navigation ul{
margin:0;
padding:0;
list-style:none;
}

#navigation li{
float:left;
width:107px;
margin:0;
}

div#navigation li a{
display:block; /*これが無いと親メニューが表示されない*/
width:100%; /*IE6対策*/
padding:6px 0 8px 0;
text-align:center;
color:#d2691e;
text-decoration:none;
background-color:#4c924d;
}

div#navigation li a:hover{
background-color:#297e27;
}

#navigation ul ul{
background:#eeeeee;
display:none;
}

#navigation ul ul li{
float:none; /*親メニューをfloatして横並びにしているので
ここで解除して子メニューを通常の縦並びにする*/
position:relative;
background:#eeeeee;
}

#navigation ul ul li a{
border-top:1px solid #ffffff;
background:none;
font-size:90%;
font-weight:normal;
padding:6px 0;
}

#navigation ul ul li a:hover{
color:#ffffff;
background-color:#ec8602;
}

#navigation ul li:hover > ul{ /*CSSでプルダウンをする上でのキーコードがこの#navigation ul li:hover > ulです*/
background-image:none;
display:block; /*ここでblockする事により表示される*/
}

すいません…改変css貼るの忘れてました…
@charset="EUC-JP";

#header{
position:relative;
x-index:100; /*ボックスが一番上の階層に表示される様に設定*/
  width:100%; /*win IE6 対策*/
height:101px;
background:#ffffff;
}

#navigation{
position:absolute;
top:37px; /*プルダウンメニューのtopからの位置*/
left:206px; /*プルダウンメニューのleftからの位置*/
width:536px; /*プルダウンの全体の幅*/
}

#navigation ul{
margin:0;
padding:0;
...続きを読む

Qurlの左にアイコン表示

HPを ビルダー11とcssの手打ちで製作しているところです。
(1) url・タブ・ブックマークしたページ名 それぞれの左側に
アイコンを表示させたいと思うのですが、やり方がわかりません。
(このページだとオレンジのバックに OK の文字のロゴがありますよね。)
head の部分に画像の参照先が記されていること位しかわかっていません。
手打ち、ビルダー上の操作 いずれでも構いません。
(2)使用するアイコンのサイズとして、どれ位が適当なんでしょうか?
よろしくお願いします。

Aベストアンサー

たぶん、favicon.ico(ファビコン)の事かと思います。

http://www.tagindex.com/hp_guide/img/favicon.html
ここなんかは参考になるかもしれませんね。

http://favicon.webmeister-jp.com/
ここは日本語の変換サイトです。

簡単に書くと
1.16x16のJPEG、GIF、PNG、BMPの画像を作成する
2.上記のサイトでicoファイルに変換する
3.できたicoファイルをサーバーにアップする
4.<head>~</head>にFaviconを指定するタグを書く

という感じです。

参考URL:http://www.tagindex.com/hp_guide/img/favicon.html


このカテゴリの人気Q&Aランキング

おすすめ情報