質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3190閲覧

aタグに点線下線を付けたいです。

chiro.0519

総合スコア118

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/25 11:34

編集2016/07/25 11:49

###前提・実現したいこと
font-familyはメイリオで、aタグに点線下線(text-Decoの様に)を付けたいです。
色々試してみたのですが、どうしてもテキストの下に隙間ができてしまいます。
レスポンシブページになる為、aタグは二列、三列になる可能性があります。
折り返しがある事を前提としている為、あえてpタグの横幅は150pxで決め打ちしています。

###該当のソースコード

html

1<p> 2 テストテキスト。テストテキスト。<a href="#">テストテキスト。テストテキスト。テストテキスト。</a>テストテキスト。テストテキスト。 3</p>

css

1*{ 2 padding: 0; 3 margin:0; 4} 5p{ 6 width: 150px; 7 font-size: 20px; 8 line-height: 1.5em; 9} 10a{ 11 text-decoration: none; 12 color:#ff0000; 13 border-bottom: 1px dashed #0000ff; 14 font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 15}

###試したこと
■text-decoration: underline dashed; はクロームで表示されなかった為使用できませんでした。
■display:blockにする事で高さを持つようにしたのですが、二列三列の時に上段一列目にだけ表示されてしまいました。
■positionで無理やり定位置に持って行こうと思ったのですが、多数あるページのブログ内リンク全ての装飾に使いたい為、位置がユーニク過ぎて実現不可能と感じました。

結構無理やりな感じでもいいので、何かいい案がございましたらご教授下さい。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

テキストと下線の間は line-height による空間なので、下記のようにすればいけると思います。

動くサンプル:https://jsfiddle.net/3bw50zef/

CSS

1a { 2 border-bottom: 1px dashed #0000ff; 3 color:#ff0000; 4 display: inline-block; /* 追加 */ 5 /*font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;*/ 6 line-height: 1; /* 追加 */ 7 text-decoration: none; 8 vertical-align: text-bottom; /* 追加 */ 9} 10```font-familyを消しているのはフォントが変わると(フォントによってline-heightの高さの計算の基準値が違うので)変化がわかりにくいから、というだけなので戻しても同じ結果になると思います。 11 12--- 13 141点問題があるとすれば、a要素が長くなってしまうと行間がそこだけ詰まることになります。また、下線は行ごとではなくa要素の下に1つだけ付くことになります。 15 16**動くサンプル2:**[https://jsfiddle.net/3bw50zef/1/](https://jsfiddle.net/3bw50zef/1/) 17 18--- 19 20--- 21 22**追記:** 23 24根本的に勘違いをしていたため、再チャレンジ。背景を設定する方法で。とりあえずgif(2px × 1px)で作りましたが、SVGとかにするほうが汎用性が高いと思います。 25 26```CSS 27a { 28 text-decoration: none; 29 color:#ff0000; 30 font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 31 background-image: url( "data:image/gif;base64,R0lGODlhBAABAPAAAAAAAAAAACH5BAEAAAEALAAAAAAEAAEAAAIDBBIFADs=" ); 32 background-position: left 1.3em; /* メイリオの場合1.2emで文字直下くらいだと思われますが、フォントによって少し変わります。 */ 33 background-repeat: repeat-x; 34 background-size: 4px 1px; /* 2px 1px */ 35}

動くサンプル3:https://jsfiddle.net/3bw50zef/3/

投稿2016/07/25 12:16

編集2016/07/25 13:15
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/07/25 13:12 編集

あ、うまくいかない。(もう一度考えます) ⇒ 追記しました。
chiro.0519

2016/07/26 12:34

コメントありがとうございます。 画像を使う案をいただき、今日実装いたしまいた。 またよろしくお願いします。
guest

0

すみません
間違えてベストアンサー選んでしまいました

バックグラウンドだと
二列以上になった時
思う様な挙動にならないと思って試してみませんでした
ちょっと確認してみます
Iphoneでサンプルを見た時
下線が表示されてなく、ちょっと修正が必要かと思われました
サンプル2だと表示されたのですが
実装でラインーハイトをいじっても変わらなかったです
cssが関与してるのか

svgを使うのは難しい関与環境ですが
多量にあるaタグをいじるとなれば
やはりsvgが妥当なのでしょうか。。。

できれば他の案も募集していますので
よろしくお願いします

投稿2016/07/25 15:58

chiro.0519

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/07/25 16:00

ベストアンサーは取り消せるはずなので、試してみてください。(未解決のほうが「解決済」より見られやすいと思います)
kei344

2016/07/25 16:05

> svgが妥当なのでしょうか。。。 私の回答の「SVGとかにするほうが汎用性が」というのは背景画像のことです。なので(高解像度ディスプレイ対策に)少し大きめのGifファイルを用意するだけで十分だと思います。
chiro.0519

2016/07/25 16:08

今出先でスマホからなので ちょっと四苦八苦してみます ありがとうございます
chiro.0519

2016/07/26 12:36

ベストアンサーの取り消し方が見つからなかったですが、このままkei344さんに捧げたいと思います! ありがとうございました!!
guest

0

相当無理やりな方法ですが

html

1<a href="google.com">and</a><br> 2<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

css

1a{ 2 text-decoration: none; 3 color:#ff0000; 4 font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 5} 6span{ 7 border-bottom: 1px dashed #0000ff; 8 position: relative; 9 bottom:23px; 10} 11

これでChromeならいけました。
positionで移動可能にし、bottomで上に移動させています。
個別に空白を設定する必要がある上に、環境によっては表示が大きく崩れる可能性があります。
どうしてもという場合、想定したブラウザで正常に表示される場合のみ使うことをお勧めします。

投稿2016/07/25 14:05

intelf___

総合スコア868

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

intelf___

2016/07/25 14:11

補足 空白が前面に来てしまってリンクをクリックできませんでした。 クラスを分けることによって空白のほうにもリンクをつければうまくいきます。
chiro.0519

2016/07/26 12:31

リンクテキストの長さがユニークな事 先にも述べたように、レスポンシブな為 ウィンドウの可変がある事 前後にテキストが入るだけで崩れてしまう事など・・・ もろもろで実装は実現的ではない気がしました。 コメントありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問