iOS Safari が自動で追加する電話リンクを CSS だけで無効にする - Qiita
iOS Safari さんの小さな親切が大きなお世話なときの処方箋です。忘備録として。 1.「電話リンクを自動で追加してくれるのはありがたいんだけど、これは電話番号ではないのだよ」というとき iOS Safari が <a href="tel:0123456789"> のようなリンクタグを追加するので、CSS セレクタには a を含めるようにします。pointer-events は、クリックを無効化する CSS プロパティですね。 <style> .disable-auto-tel a[href^="tel:"] { color: inherit; text-decoration: none; pointer-events: none; } </style> <p class="disable-auto-tel">0123456789</p>
メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト
2023年3月27日 JavaScript, Webサイト制作 多くのWebサイトでお問い合わせにはフォームを設置しているかと思います。入力ミスのチェックなど機能のついたものも多いのですが、初心者の方には設置のハードルが高く感じるかもしれません。そんな時は手軽に導入できるmailtoリンクを使ってみましょう。リンクをクリックするとユーザーがいつも使っているメールアプリが起動するので、送信元のメールアドレスを入力する手間も省けますよ。懸念されやすい迷惑メールの対策をしているスクリプトも紹介します！ ↑私が10年以上利用している会計ソフト！ mailtoリンクの使い方 a タグの href 属性に mailto:メールアドレス と記述すればOK。リンクテキストをクリックするとメールアプリが起動し、メール作成画面が表示されます。 細かい設定をしたい場合は必要項目を mailto:メールアドレス?
railsのbxsliderのaタグが効かないときの対処法 - Qiita
はじめに スライドショーのgem「bxslider」を使用していた際に、スライドショー内のリンクをクリックしても遷移しなかったので、直接コードをいじってなんとか解決しました。 そのフローを残しておきたいと思います。 開発環境 windows7 ruby 2.4.5p335 (2018-10-18 revision 65137) [x64-mingw32] Rails 5.2.3 bxslider-rails 4.2.5.1 jquery-rails 4.3.3 事象・検証状況 スライドショー内のリンクをクリックしても遷移しない aタグをマウスオンすると遷移先URLが表示される aタグを覆う要素は存在しない レンダリング時のエラーなし 自身のコーディングに不備はない可能性が高い デベロッパーツールのコンソール上でもエラーなし JQueryでもエラーはない めっちゃ調べた。 これっぽい。 カミ
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック
パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 三角形をtransformで生成 三角形をclip-pathで生成 三角形をborderで実装 まずは、今までの古典的な実装方法です。 リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。 三角形をborderで実装 この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって
![[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d4b980ba7bb36ca68e44f445a36a6341ba4bb62/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018022601.png)
HTML［a要素］ダウンロード用のリンクを指定する - TAG index
download属性の値には、ダウンロードする際のファイル名を指定します。 ファイル名には任意の名前を指定できますが、使用不可の文字が含まれる場合はブラウザによって調整されることがあります。 次の例では、サンプル画像というファイル名を指定しています。この場合、拡張子が付いてサンプル画像.pngという形でダウンロードされます。 <p><a href="img/example.png" download="サンプル画像">ダウンロード</a></p> ファイル名の指定が不要であれば、値を省略して次のように記述することもできます。 <p><a href="img/example.png" download>ダウンロード</a></p> 値を省略した場合は、リンク先のファイル名がそのまま使用されるようです（Chrome、Firefox、Edgeで確認）。上記の例では、example.pngという名
HTMLタグ/リンクタグ/起動させたメールに件名や本文を入れる - TAG index Webサイト
リンクで起動させたメールに、予め件名や本文などを挿入しておくことができます。 以下のサンプルコードをコピーする場合は、メールアドレスの書き換えを忘れないようにご注意ください。 <a href="mailto:info@example.com?subject=問い合わせ&body=ご記入ください">メールはこちらへ</a> 値の詳細 mailto:info@example.com?subject=件名&body=本文 info@example.com … 送信先のメールアドレスを記述します ? … メールアドレスとその後に続く情報を ? マークで区切ります subject= … メールの件名を記述します body= … メールの本文を記述します & … 件名と本文を & マークで区切ります（文字参照で & と記述します） サンプル（メールソフトを起動します）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アンカーリンクのターゲット位置が固定ヘッダーと被らないように調整する | 清須、名古屋のホームページ制作・WEB制作ならLIBESTA（リベスタ）
【2024年最新データ】主要サイトのテキストリンク色比較 - Naifix
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
HTMLの< a href="tel:" >でリンクをタップして電話を発信させる方法