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

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

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

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

CSS

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

Q&A

解決済

1回答

182閲覧

リンク先が飛びません

i_tkk

総合スコア11

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/08/17 07:37

編集2018/08/17 08:29

フローターナビを作成したのですが、リンク先へ飛びません。
レスポンシブにすると飛べます。
ご教授お願いいたします。

html

1 2<div class="floatingNav"> 3<ul class="floatingNav__list"> 4<li class="floatingNav__item floatingNav--fb"> 5<a href="https://www.facebook.com/" target="_blank"><span>Facebook</span></a> 6</li> 7 8<li class="floatingNav__item floatingNav--tw"> 9<a href="https://twitter.com/" target="_blank"><span>Twitter</span></a> 10</li> 11 12<li class="floatingNav__item @@@"> 13<a href="" target="_blank"><span>あああ</span></a> 14</li> 15 16<li class="floatingNav__item @@@"> 17<a href="" target="_blank"><span>あああ</span></a> 18</li> 19 20<li class="floatingNav__item--last mail"> 21<a href="" target="_blank"><span>メールマガジン</span></a> 22</li> 23</ul> 24</div><!--floatingNav-->

css

1 2 3.floatingNav { 4position: fixed; 5display: block; 6right: 0; 7width: 50px; 8top: 50%; 9height: auto; 10transform: translateY(-50%); 11box-shadow: 0 5px 15px rgba(3,0,0,.1); 12-webkit-box-shadow: 0 5px 15px rgba(3,0,0,.1); 13} 14 15.floatingNav, .floatingNav__list {z-index: 999;} 16 17.floatingNav__list { 18top: 50%; 19width: 50px; 20cursor: pointer; 21} 22 23.floatingNav__item, .floatingNav__item--last { 24display: block; 25width: 50px; 26height: 50px; 27overflow: hidden; 28background-color: #EC6C00; 29border-bottom: solid 1px #EFBD9C; 30background-position: center; 31background-repeat: no-repeat; 32background-size: 30px auto; 33} 34 35.floatingNav__item--last{border-bottom: none;} 36 37.floatingNav--fb{background-image: url(img/fb.png);} 38 39.floatingNav--tw{background-image: url(img/tw.png);} 40 41.mitemo-tv{background-image: url(img/@@@.png);} 42 43.mitemo-hr{background-image: url(img/@@@.png);} 44 45.mail{background-image: url(img/mail.png);} 46 47.floatingNav__item:hover, .floatingNav__item--last:hover{ 48transition: .5s; 49background-color: #f78d3e; 50} 51 52.floatingNav__item a { 53display: block; 54background-repeat: no-repeat; 55background-position: center center; 56transition: background .2s ease-out; 57} 58 59.floatingNav__item a span {display: none;} 60 61.floatingNav__item--last a span {display: none;}

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

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

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

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

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

yoshinavi

2018/08/17 09:45

>リンク先へ飛びません。  → どこの部分ですか? また、回答者がコピペして検証できるよう様なコードを提示されると良いかと思います。
guest

回答1

0

ベストアンサー

https://thimbleprojects.org/liveasnotes/532799/
イメージ説明

css

1.floatingNav__item a { 2 display: block; 3 background-repeat: no-repeat; 4 background-position: center center; 5 transition: background .2s ease-out; 6 width: 100%;/**/ 7 height: 100%;/**/ 8}

aタグの中身(span)がdisplay:none;されているので,サイズ指定をしないと,縦横0pxになってしまいます

投稿2018/08/17 08:31

liveasnotes

総合スコア1284

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

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

i_tkk

2018/08/19 23:33

不在にしておりました、申し訳ございません。 width、heightを追記したところ解決できました。 ありがとうございます、助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問