- ベストアンサー
リンク aタグ
リンク<a href="">リンク先のタイトル</a> リンク先のタイトルの長さ（width）を制限（300pxなど）したいのですが、 CSS、javascript(jQuery)などで実現できますでしょうか？ lengthですと、文字によって、widthが大きく変わってしまい困っています。 よろしくお願いします。
- hp_win7
- お礼率37% (159/423)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
個人的には ellipsis が好みです https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
関連するQ&A
- aタグについて教えてください。
aタグでリンク先とJavaScript の両方href属性に指定できますか？ <a href="#aaa JavaScript:var x = 100;">みたいに書けば、一度のクリックで変数に値を代入して、リンク先へというようなことはできますか？#aaaは残しておきたいのですが、何かいい方法はありませんか？
- ベストアンサー
- JavaScript
- CSSの「a」と「a:link」の違いを教えてください。
CSSでリストを横に並べて、グローバルナビゲーションを作っているのですが、aとa:linkの違いがわかりません。 例えばHTMLは以下のように <div id="gNavi"> <ul> <li><a href="../omotenashi.html">おもてなし</a></li> <li><a href="../stay.html">過ごし方</a></li> <li><a href="../rooms.html">客室</a></li> <li><a href="../facilities.html">館内施設</a></li> <li><a href="../dish.html">料理</a></li> <li class="last"><a href="../onsen.html">温泉</a></li> </ul> </div> CSSは #gNavi { height: 60px; width: 960px; margin-right: auto; margin-left: auto; } #gNavi ul { text-align: center; } #gNavi ul li { display: inline; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; width: 159px; float: left; } #gNavi ul li.last { border-right-style: none; } #gNavi ul li a { background-color: #F00; width: 159px; float: left; } #gNavi ul li a:hover { background-color: #09F; color: #FFF; width: 159px; float: left; } という風に書きますが（間違っているかもしれません。）、#gNavi ul li aを#gNavi ul li a:linkと書いてはいけないのでしょうか？ aとa:linkの違いはなんですか？
- ベストアンサー
- HTML
- Aタグを文字ではなくタグとして認識させたい…
http://okweb.jp/kotaeru.php3?q=1422320でリンクをクリックすると押せなくなる処理を作りました。 しかし新たな問題が… 以下はソースです。 function linkcontrol(linkno) { switch(linkno){ case 1: slink1.innerText ='LINK1'; slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>'; slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>'; break; case 2: slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>'; slink2.innerText ='LINK2'; slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>'; break; case 3: slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>'; slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>'; slink3.innerText ='LINK3'; break; } } //BODY部 <span id="slink1"><a href="javascript:linkcontrol(1)">LINK1</a></span> <span id="slink2"><a href="javascript:linkcontrol(2)">LINK2</a></span> <span id="slink3"><a href="javascript:linkcontrol(3)">LINK3</a></span> 上記の処理だと、リンクはクリックできなくなったのですが、他のリンクがリンクにならず文字で<a href～と書かれてしまいます。 これをきちんと文字ではなくタグとして認識させるには、どのような修正をすれば良いのでしょうか。 アドバイスお願いします。 ※そもそもこのソースはあまりよろしくない書き方のような気もします。 ※もしもっと簡単に行える書き方がありましたらそちらも併せてアドバイスをお願いします。
- ベストアンサー
- JavaScript
- cssのaリンクで、幅(width=)が設定できない。(FireFoxの場合）
cssでサブメニューを作っているのですが、 <div id="menu_sub_other"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">PHOTOS</a></li> <li><a href="#">SPAIN</a></li> <li><a href="#">MAIL</a></li> </ul> </div> #menu_sub_other a { color:#183770; width:160px; text-align:left; text-decoration:none; margin : 0px 0 0 0; padding:3px 10px 3px 15px; font-weight:bold; } マウスhoverで背景の色が変わるようにしようとしているのですが、 aリンクのwidth:160px;とするとIEではきちんとすべて160pxと幅がそろうのですが、 FireFoxだとメニューのボタン名として入力した 文字分の幅しか得られません。 FireFoxで、aリンクの幅を文字数関係なくすべてそろえる方法はありますでしょうか？？ ここ2，3日こんなことで悩んでいます。。(;_;) どうか、お返事よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでa要素全体をリンク出来るようにしたいのですが
CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。（文字の上にマウスを当てると全体の色は変わったりするのですが。） 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。
- ベストアンサー
- HTML
- すいません、このタグですが、自動で始まるようにならないでしょうか？
<title>１行づつ画面上に出力する</title> <STYLE type="text/css"> <!-- div{font-size:20pt; } --> </STYLE> <script Language="JavaScript"><!-- str = new Array(); str[0] = "Sample text...(^^)/<br>"; str[1] = "１行づつ表示します。<br>"; str[2] = "By KaZuhiro FuRuhata<br>"; str[3] = "<a href='http://www.shiojiri.ne.jp/~openspc/'>OpenSpace</a>"; count = 0; function setTextLine() { if (count >= str.length) return; txt = ""; count++; for (i=0; i<count; i++) txt += str[i]; if (document.all) document.all["outText"].innerHTML = txt; setTimeout("setTextLine()",1000); } // --></script> </head> <body> <DIV id="outText" style="position:absolute;top : 167px;left : 112px;"></DIV> <DIV style="width : 139px;height : 76px;top : 10px;left : 146px; position : absolute; z-index : 1; " id="Layer1"><a href="javaScript:setTextLine()">出力開始</a></DIV> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- (;´Д`A ```間隔を詰めるには...?
今スクリプト勉強しているのですが、↓のようにやってみると、まのびした感じになってしまいます。 それぞれの間隔をくっつけたいのですが、どうしたらいいのでしょうか？ どうか教えてください(m。_。)m オネガイシマス <html> <head> <title></title> <style type="text/css"> <!-- A.link2 { font-size:8pt; color: #ff0000; font-family:Impact,Chicago; padding: 0.1em 0.6em 0.1em 0.6em; background-color:#000000; border-top:1px solid #eeeeee; border-left:1px solid #eeeeee; border-bottom:1px solid #666666; border-right:1px solid #666666; text-decoration:none; } a:hover.link2{ color:#ff0000; background-color:#ffffff; border-top:1px solid #eeeeee; border-left:1px solid #eeeeee; border-bottom:1px solid #666666; border-right:1px solid #666666; text-decoration:none; } --> </style> </head> <body> <center> <TABLE BORDER="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD width="20%" nowrap><a href="aaa.html" class="link2"> AAA </a></TD> <TD width="20%" nowrap><a href="bbb.html" class="link2"> BBB </a></TD> <TD width="20%" nowrap><a href="ccc.html" class="link2"> CCC </a></TD> <TD width="20%" nowrap><a href="ddd.html" class="link2"> DDD </a></TD> <TD width="20%" nowrap><a href="eee.html" class="link2"> EEE </a></TD> </TR> </table> </center> </body> </html>
- 締切済み
- CSS
- spanタグ 無視される
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <style type="text/css"> span.test{ padding: 6px 0px; background-color: gainsboro; text-align:center; border: 1px gray solid; margin-top:10px; margin-bottom:8px; color: gray; width: 100px; } </style> </head> <body> <span class="test"> <a href="#A"> A</a> </span> <br> <span class="test"> <a href="#B"> B</a> </span> </body> </html> ------------------------- というソースで spanタグで padding: margin-top:10px; margin-bottom:8px; width: が無視されてしまうのですが なぜでしょう？ 更に画像のように文字が重なってしまいます。 padding: margin-top:10px; margin-bottom:8px; width: これらを適用させるにはどうすればいいでしょうか？ AとBは隣同士に表示したいため、divではなく、spanを使用しました。
- ベストアンサー
- HTML
- javascriptで#のリンク先を設定する方法
<a href="#">テスト</a> というリンクにもかかわらず、クリックすると http://hogehoge.jp/ のリンク先に飛ぶリンクを発見しました。 これは一体どうやっているのでしょうか？ 多分、javascriptかjqueryを使っていると思うのですが。 Googleで探したのですが、 href="#" で検索しても、検索語でシャープを認識しないので思い通りの検索結果に辿り着くことが出来ませんでした。 どうぞ教えて下さい。
- ベストアンサー
- JavaScript
- divとaタグの関係
ある顧客の前任者が画面を１６分割にするページを作成したようです。 それはそれで大変便利なのですが、doctype もない状態でした。 その１区画はこんな感じです。chromでは文字が出ませんでした。 <a href="http://www.yahoo.co.jp"><div class="link1">YAHOO</div></a> divで区切っていますが明らかに逆だろうと思い以下のように修正しました。 <div class="link1"><a href="http://www.yahoo.co.jp">YAHOO</a></div> すると今度はIEとchromでリンク先に飛ばなくなってしまいました。 この問題は!DOCTYPEを追加したらIEでは解決しました。 しかし、chromでは相変わらず文字が出ず、リンク先にとびません。 修正前のコードではchromで文字は出ませんがリンク先にとびます。 ここで行き詰まってしまいました。CSSとかも見直していますが、 とりあえず上記までの考えで良いのか皆さんの意見をお伺いしたいと思います。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。