【CSS】URLにのみ下線を引くように設定
はじめに
現在Ruby on Railsで、ユーザーが記事を投稿できるアプリを作成しています。
ユーザーによる投稿はマークダウン記法に対応させています。
他の方にアプリを触っていただいた際に、「URLを投稿した際に下線やホバー等がなくわかりづらい」とFBをいただき、URLにのみ下線を引くようCSSをいじっておりました。
URLのみに対応させるつもりが、アプリ内のlink_toで設定しているaタグにも反応してしまい対処に少し時間を要してしまったので、今回も備忘録として記載したいと思います。
参考になりましたら幸いです。
環境
Rails 7.1.3.4
gem 'kramdown'
gem 'kramdown-parser-gfm'
当初の考え
最初は、「ユーザーが入力したURLにのみ下線を入れる」という考えのもと実装していました。
aタグで指定できることはわかりましたが、他のaタグ（アプリ内のlink_toで設定している部分）にも下線が入ってしまう状況でした。
ネット検索、ChatGPTへの質問も、「ユーザーが入力したURLにのみ下線を入れたい」という内容で調べていたので、この方法ではうまく実装ができませんでした。
結論どのように指定したか
「ユーザーが入力したURLにのみ下線を入れる」という発想が良くないと気づき、「既に実装しているlink_toなどでクラス指定をし、クラス指定したaタグを除外をする」という発想に切り替えました。
アプリ内で既に実装しているlink_to箇所へ、クラスの指定・かつそのクラスに該当するaタグでは下線を引かないというCSSを作成したところ、URLにのみ下線が引かれるようになりました。
- app/assets/stylesheets/kramdown_custom.css
/* すべてのリンクに下線を引く */
a {
text-decoration: underline;
color: inherit;
}
/* app-link クラスを持つリンクには下線を引かない */
a.app-link {
text-decoration: none;
color: inherit;
}
- app/views/shared/_after_login_header.html.erb
<%= link_to "マイページ", profile_path, class: " app-link" %>
アプリ内の実装済みのaタグでは、クラス設定が反映されていることが確認できます。
今回の件で気づいたこと
CSSに不慣れなところもあり、この問題を解決するのに少し時間を要してしまいました。
うまく実装できない時は、柔軟に発想を切り替えること、逆の視点で考えてみることが重要だと改めて気がつきました。
ありがとうございました。
Discussion