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と関連する良く見られている質問

QニンテンドーDSliteの入荷情報

都内(江東区)に住んでます。
都内の店舗で「ニンテンドーDSlite」の入荷情報をご存知でしたら教えてください。
よろしくお願いいたします。

Aベストアンサー

神奈川県内のおもちゃ売場に勤務しています。
DSライトは、発売日と18日(土)と26日(日)に入荷して抽選販売を行いました。
毎週販売している状態が続いているので、また来週の週末も入荷するかな?と思っています。
ぜひ金曜日にでも近所のゲーム取り扱い店に問い合わせてみてください。

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は書かない。後でワケ...続きを読む

Qフォーゼドライバーの再入荷情報を教えて下さい!!

フォーゼドライバーの再入荷情報が知りたいのですが、トイザらスやインターネットなど、問い合わせ・確認を常にしているのですが、入荷未定や売り切れなどばかりです。
なんとか子供のために手に入れたいのですが、オークションでは定価よりも高くなっており、嫁が購入を反対しております。夜中並んででもいいので手にれたいです。
情報お願いします。ちなみに私は愛知県名古屋市に住んでおります。

Aベストアンサー

狙い目はオモチャを扱っている「西友」です。

新聞をとっていればチラシに出る時があります。

我が家は東京ですが先週15個のみ入荷がありました、でも普通に並んで買えましたよ・・・定価で・・・

明日(23日)はアクセルスイッチが入りますのでまた並びます・・・(笑い)

お互い大変ですね・・・でももう少し待てば普通になりそうな気がしますよ・・・

何かの参考になれば幸いです。

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>

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

QDSLite入荷情報

クリスマスや正月は忙しくて暇がなかったのですが、今頃になってDSLiteが欲しくなりました。
それで電機屋やらゲーム屋やらを探し回ったのですがやはりどこも品切れ状態。
ネットで買うという手もありますがそれだと定価で買えなかったり、色々面倒なのでお店で購入したいです。
今札幌にいるのですが何処か手に入りやすい所などはないですか?
もしくはいつ入荷するなどの情報があれば宜しくお願いします。

Aベストアンサー

gooより、価格.comというところで聞いたほうが良いかもしれません。
ちょうど札幌の情報が載っていたので、URL載せておきます!

参考URL:http://bbs.kakaku.com/bbs/20502010105/#5863265

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

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

Aベストアンサー

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

QWiiの入荷情報について

いままで買いに行く機会がなく、休みに入ったのでWiiを買いに行きたいと思っています。
しかし、今朝開店前のヤマダ電機で並んでみましたが入荷なしとのことでした。
明日トイザラスで入荷するという噂も聞きますが、まず今年中に出荷はあるのでしょうか。
また、大阪市近郊で販売予定のチラシが入っているような店があれば情報の提供お願いします。

Aベストアンサー

トイザらスの販売予定は1月1日のようですので年内の入荷はないみたいです。ヤマダ電機は、開店前の入荷よりも15:00ごろもしくはお昼過ぎごろの入荷(販売?)が多いみたいです。地店舗によっても異なるとは思いますが、ヤマダ電機はDSやWiiの入荷予定日がゲームコーナーの入り口のところに書いてありました。しかし、書いてある日以外にも毎日(週に何度か?)数台ずつ販売しているような気がします。いつも販売時は、「在庫なし、予約はできません」のポップが貼ってありますが、その横に貼ってあった、「Wii完売しました」のポップがはがされています。いつもと様子が違っていたら、一度店員さんに在庫の確認をしてみるといいと思います。それと、ヤマダ電機の場合は、昼ごろ行ってみる価値はあると思います。もしかしたら初売り用に在庫を確保している可能性もあるのでご注意を。

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;
...続きを読む

Qこんなスイッチに交換するのは

こんなスイッチに交換するのは自分できますか?
http://www2.panasonic.biz/es/densetsu/haisen/switch_concent/switch/switch02.html
してもらうならどちらでできますか いくらくらい

Aベストアンサー

質問者さんが電気工事士免状を持っているなら、ご自分でできます。
持っていないなら、電気工事店を呼んでください。

費用は、材料費のほかに、手間賃と出張料で 2,000円から 5,000円ぐらい覚悟しておいてください。

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ランキング