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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

4回答

1537閲覧

サンプルコードを組み合わせたところ手のひらツールが現れることと、内部リンクができない

cht

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2020/07/26 08:07

編集2020/08/01 06:09

前提・実現したいこと

前回の質問に続き、ハンバーガーメニューとスライダーのサンプルコードを組み合わせたところ、ハンバーガーメニューについては問題なく開き、外部へのリンクもできますが、外部への画像リンクや、フッターからトップページへの内部リンクができません。

発生している問題

内部及び外部リンクができない

該当のソースコード

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>MENU</title> 6<link href="css/swiper.min.css" rel="stylesheet" type="text/css"> 7<link href="css/menu.css" rel="stylesheet" type="text/css"> 8<link href="css/slider.css" rel="stylesheet" type="text/css"> 9<link href="css/container.css" rel="stylesheet" type="text/css"> 10<script type=<"css/slider.css" rel="stylesheet" type="text/css"></script> 11</head> 12 13<body> 14<input type="checkbox" role="button" title="menu" id="humberger_check" /> 15<label for="humberger_check" class="humberger" aria-hidden="true" title="menu"> 16 <span></span> 17</label> 18<header class="header_bar"> 19 <h1>SITE TITLE</h1> 20</header> 21<main class="container"> 22 <section class="content"> 23 <h2>3D Rotating Hidden Menu</h2> 24 </section> 25</main> 26<nav class="hidden_menu"> 27 <ul> 28 <li data-bar-color="#FA3687"> 29 <a href="#"><i class="icon-picture"></i>IMAGE</a> 30 </li> 31 <li data-bar-color="#21D7A8"> 32 <a href="#"><i class="icon-film"></i>VIDEO</a> 33 </li> 34 <li data-bar-color="#1E9ED4"> 35 <a href="#"><i class="icon-music"></i>MUSIC</a> 36 </li> 37 <li data-bar-color="#B0D44A"> 38 <a href="#"><i class="icon-headphones"></i>PERSONAL</a> 39 </li> 40 <li data-bar-color="#A865D5"> 41 <a href="#"><i class="icon-cogs"></i>SETTINGS</a> 42 </li> 43 </ul> 44 <span class="menu_underline"></span> 45</nav> 46 47<section class="swiper-container loading"> 48 <div class="swiper-wrapper"> 49 <div class="swiper-slide" data-test-set="test" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)"> 50 <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" /> 51 <div class="content"> 52 <p class="title">Shaun Matthews</p> 53 <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 54 </div> 55 </div> 56 <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)"> 57 <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" /> 58 <div class="content"> 59 <p class="title">Alexis Berry</p> 60 <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 61 </div> 62 </div> 63 <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)"> 64 <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" /> 65 <div class="content"> 66 <p class="title">Billie Pierce</p> 67 <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 68 </div> 69 </div> 70 <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)"> 71 <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" /> 72 <div class="content"> 73 <p class="title">Trevor Copeland</p> 74 <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 75 </div> 76 </div> 77 <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)"> 78 <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" /> 79 <div class="content"> 80 <p class="title">Bernadette Newman</p> 81 <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 82 </div> 83 </div> 84 </div> 85 86 <!-- If we need pagination --> 87 <div class="swiper-pagination"></div> 88 <!-- If we need navigation buttons --> 89 <div class="swiper-button-prev swiper-button-white"></div> 90 <div class="swiper-button-next swiper-button-white"></div> 91</section> 92<div id="footer"> 93 <div id="slide"> 94 <div id="slide-in"> 95 <p id="page-top"><a href="#wrap">PAGE TOP</a></p> 96 </div> 97</div> 98 </div> 99<script type="text/javascript" src="js/swiper.min.js"></script> 100<script type="text/javascript" src="lib/jquery-3.5.0.min.js"></script> 101<script type="text/javascript" src="js/menu.js"></script> 102<script src="js/slider.js"></script> 103</body> 104</html> 105

css

1* { 2 box-sizing: border-box; 3} 4*:before, *:after { 5 padding: 0; 6 margin: 0; 7} 8 9body { 10 font-family: Lato, Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif; 11 background-color: #333; 12 color: #efefef; 13 text-align: center; 14 margin: 0; 15 padding: 0; 16} 17body a, body a:visited { 18 color: #efefef; 19 text-decoration: none; 20} 21body a:hover { 22 color: #ccc; 23} 24 25.container { 26 position: relative; 27} 28 29.content { 30 margin: 0 auto; 31 padding: 5% 40px; 32} 33 34.hidden_menu, .hidden_menu ul { 35 backface-visibility: hidden; 36 -webkit-backface-visibility: hidden; 37} 38 39.hidden_menu ul li, .menu_underline, .header_bar::before { 40 transition: all 0.3s ease; 41} 42 43.humberger, .hidden_menu, .hidden_menu ul, .header_bar, .container { 44 transition: all 0.5s ease; 45} 46 47.hidden_menu ul li::before, .header_bar::before, .container::before { 48 content: ''; 49 position: absolute; 50 top: 0; 51 left: 0; 52 width: 100%; 53 height: 100%; 54} 55 56#humberger_check { 57 width: 0; 58 height: 0; 59 opacity: 0; 60 visibility: hidden; 61} 62#humberger_check:checked + .humberger { 63 transform: translateY(160px); 64} 65#humberger_check:checked + .humberger span { 66 background-color: transparent; 67} 68#humberger_check:checked + .humberger span::before { 69 top: 2px; 70 transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s; 71 -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); 72 transform: translate3d(0, 10px, 0) rotate(45deg); 73} 74#humberger_check:checked + .humberger span::after { 75 top: 6px; 76 transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s; 77 -webkit-transform: translate3d(0, 6px, 0) rotate(-45deg); 78 transform: translate3d(0, 6px, 0) rotate(-45deg); 79} 80#humberger_check:checked ~ .header_bar, 81#humberger_check:checked ~ .container { 82 transform: translateY(160px); 83} 84#humberger_check:checked ~ .hidden_menu { 85 transform: translateY(0); 86} 87#humberger_check:checked ~ .hidden_menu ul { 88 opacity: 1; 89 transform: rotateX(0); 90} 91 92.humberger { 93 position: fixed; 94 top: 20px; 95 right: 5vw; 96 width: 40px; 97 height: 40px; 98 cursor: pointer; 99 z-index: 3; 100} 101.humberger span { 102 position: absolute; 103 top: 6px; 104 left: 50%; 105 width: 30px; 106 height: 4px; 107 margin: 0 auto auto -15px; 108 background-color: #fff; 109 transition: background-color .1s linear .13s; 110} 111.humberger span::before, .humberger span::after { 112 content: ''; 113 position: absolute; 114 left: 0; 115 width: 100%; 116 height: 4px; 117 background-color: #fff; 118} 119.humberger span::before { 120 top: 12px; 121 transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); 122} 123.humberger span::after { 124 top: 24px; 125 transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); 126} 127 128.hidden_menu { 129 position: fixed; 130 top: 0; 131 left: 0; 132 width: 100%; 133 height: 160px; 134 -webkit-perspective: 1600px; 135 perspective: 1600px; 136 background-color: #222; 137 z-index: 3; 138 transform: translateY(-100%); 139} 140.hidden_menu ul { 141 list-style: none; 142 width: 100%; 143 height: 100%; 144 margin: 0; 145 padding: 0; 146 opacity: 0; 147 background-color: rgba(255, 255, 255, 0.08); 148 -webkit-transform-origin: center bottom; 149 transform-origin: center bottom; 150 transform: rotateX(90deg); 151} 152.hidden_menu ul li { 153 position: relative; 154 display: table; 155 width: 20%; 156 height: 100%; 157 float: left; 158 font-size: 13px; 159} 160 161.container { 162 position: absolute; 163 top: 0; 164 left: 0; 165 width: 100%; 166 z-index: 1; 167 background-size: cover; 168 background-attachment: fixed; 169 background-position: center; 170 background-image:; 171} 172.container::before { 173 position: fixed; 174 background-color: rgba(0, 0, 0, 0); 175} 176 177.content { 178 position: relative; 179 margin: 100px auto 4vw; 180 padding: 0 5vw; 181 height: 100vh; 182} 183.content h2 { 184 position: relative; 185 top: 30vh; 186 font-size: 38px; 187} 188 189@keyframes scaling { 190 50% { 191 opacity: .28; 192 transform: scale(0.5); 193 } 194 100% { 195 opacity: 0; 196 transform: scale(1.05); 197 } 198} 199@media (max-width: 680px) { 200 #humberger_check:checked + .humberger, 201 #humberger_check:checked ~ .header_bar, 202 #humberger_check:checked ~ .container { 203 transform: translateY(300px); 204 } 205

補足情報(FW/ツールのバージョンなど)

dreamweaver cs6 chrome

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

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

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

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

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

FrontEnd_Japan

2020/07/26 14:14

前回の質問のリンクを記載して頂いたほうが、質問の背景を理解しやすいです。
FrontEnd_Japan

2020/08/01 09:12

swiper.js, slider.jsの2つが読み込まれていますが、slider.jsの使用用途はなんでしょうか。
cht

2020/08/01 12:36

FrontEnd_Japan様 slider.jsについてはスライドを立体に見えるように配置し、回転するキューブ状のスライダーを表示する事と、速度だと思います。
guest

回答4

0

menu.cssのcontent部分を削除致しましたところ、無事リンクができるようになりました。

投稿2020/08/06 05:55

cht

総合スコア10

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

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

0

自己解決

menu.cssのcontent部分を削除致しましたところ、無事リンクができるようになりました。

投稿2020/08/06 05:51

cht

総合スコア10

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

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

0

フッターからの内部リンク不具合について
aタグのリンク参照先がhtmlに記載がございません。
<a href="#wrap">は、htmlのid="wrap"に向けて移動します。
ですので、htmlタグ内のどこかにid="wrap"を追記する必要があります。

html

1<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

投稿2020/08/01 09:03

FrontEnd_Japan

総合スコア271

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

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

cht

2020/08/01 12:50

FrontEnd_Japan様 有難うございます。 <body>下に<div id="wrap">を追記いたしましたところ、他のページで試してtopに行きましたが、 この組み合わせではだめでした。
FrontEnd_Japan

2020/08/01 13:36

>他のページで試してtopに行きましたが、この組み合わせではだめでした。 この組み合わせってどの組み合わせでしょうか。
FrontEnd_Japan

2020/08/01 13:42

>他のページで試してtopに行きましたが 駄目なページは何のぺーじでしょうか。
cht

2020/08/01 23:23

FrontEnd_Japan様 有難うございます。 やはり、ハンバーガーメニューのコードを追記すると全てtopに行きません。 スライダーだけだとtopに行きます。 宜しくお願いします。
FrontEnd_Japan

2020/08/02 00:16

ローカルで検証したいので、menu.jsとslider.jsのコードも記載していただけませんか?
cht

2020/08/02 02:19

menu.js var mqWidth = 680, scrollTrigger = 40, isMobile = null, burgerCheckbox = $('#humberger_check'), hiddenMenu = $('.hidden_menu li'), slideBar = $('.menu_underline'), headerBar = $('.header_bar'); function sliderBarAnimation(){ if ( $(window).width() > mqWidth ){ if (isMobile === false) return; isMobile = false; hiddenMenu.off('mouseenter mouseleave').hover( // nmouseenter function(){ var current = $(this), barColor = current.data('bar-color'); slideBar.addClass('visible').css({ 'top':'auto', 'left' : current.position().left, 'background-color':barColor }) }, //mouseleave function(){ slideBar.removeClass('visible'); } ); } else { if (isMobile === true) return; isMobile = true; hiddenMenu.off('mouseenter mouseleave').hover( // nmouseenter function(){ var current = $(this), barColor = current.data('bar-color'); slideBar.addClass('visible').css({ 'left':0, 'top':current.offset().top + 60, 'background-color':barColor }); }, //mouseleave function(){ slideBar.css({'top':0}).removeClass('visible'); } ); } } $(window).on({ 'resize' : function(){ sliderBarAnimation(); }, 'scroll' : function(){ if ($(window).scrollTop() > scrollTrigger){ headerBar.addClass('show-bg'); } else { headerBar.removeClass('show-bg'); } } }); (function(){ sliderBarAnimation(); hiddenMenu.on('click', function(){ var current = $(this); current.addClass('selected'); setTimeout(function(){ current.removeClass('selected'); burgerCheckbox.prop('checked',false); }, 400); }); hiddenMenu.children('a:not([target]):not([href^="tel:"])').on('click', function(e){ var url = $(this).attr("href"); if (!url) return; e.preventDefault(); setTimeout(function(){ window.location = url; },400); }); })(jQuery); slider.js var sliderSelector = '.swiper-container', isMove = false, options = { init: false, loop: true, speed:800, autoplay:{ delay:3000 }, effect: 'cube', // 'cube', 'fade', 'coverflow', cubeEffect: { shadow: true, slideShadows: true, shadowOffset: 40, shadowScale: 0.94, }, grabCursor: true, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, // Events on: { init: function(){ this.autoplay.stop(); }, imagesReady: function(){ this.el.classList.remove('loading'); this.autoplay.start(); }, touchMove: function(event){ if (!isMove) { this.el.classList.remove('scale-in'); this.el.classList.add('scale-out'); isMove = true; } }, touchEnd: function(event){ this.el.classList.remove('scale-out'); this.el.classList.add('scale-in'); setTimeout(function(){ isMove = false; }, 300); }, slideChangeTransitionStart: function(){ console.log('slideChangeTransitionStart '+this.activeIndex); if (!isMove) { this.el.classList.remove('scale-in'); this.el.classList.add('scale-out'); } }, slideChangeTransitionEnd: function(){ console.log('slideChangeTransitionEnd '+this.activeIndex); if (!isMove) { this.el.classList.remove('scale-out'); this.el.classList.add('scale-in'); } }, transitionStart: function(){ console.log('transitionStart '+this.activeIndex); }, transitionEnd: function(){ console.log('transitionEnd '+this.activeIndex); }, slideChange:function(){ console.log('slideChange '+this.activeIndex); console.log(this); } } }, mySwiper = new Swiper(sliderSelector, options); // Initialize slider mySwiper.init(); 宜しくお願いします。
FrontEnd_Japan

2020/08/02 08:01 編集

html見ていて他の点も気になりました。 以下のファイルがlinkではなくscriptで読み込まれてしまっています。 <script type=<"css/slider.css" rel="stylesheet" type="text/css"></script> 正しくは <link href="css/slider.css" rel="stylesheet" type="text/css"> あと、headタグ内で複数のCSSが読み込まれていますが、質問に掲載のあるコードはなんのCSSでしょうか。
cht

2020/08/02 09:45

FrontEnd_Japan様 何度もすみません。 下記のスライダーのサンプルコードをそのままコピーしてしまっていました。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.8/css/swiper.min.css"><link href="slider.css" rel="stylesheet" type="text/css"> 修正いたしましたが変化はありませんでした。 head内のたぐについては ハンバーガーメニューがmenu.css及びmenu.jsで スライダーがswiper.min.css、slider.css及びswiper.js,slider.jsです。 container.cssについてはテーブル作成の為、読み込んでいましたが現在は削除してあります。 宜しくお願いします。 因みにこのサンプルのurlがhttps://digipress.info/tech/3d-rotating-hidden-menu-sample/になります。 <script type=<"slider.css" rel="stylesheet" type="text/css"></script>
guest

0

<script type=**<**"css/slider.css" rel="stylesheet" type="text/css"></script>

太字の部分が、不具合を起こしているのやもしれません。
削除してみて、動作を確認してみてください。

投稿2020/07/27 04:07

ff7575

総合スコア123

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

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

cht

2020/07/27 05:56

ff7575様 ありがとうございます。 早速、試してみましたが、変化は見られませんでした。 menu.cssとslider.cssの不具合でしょうか?
cht

2020/08/01 01:01

ff7575様 あれこれやっている内に、swiper.min.cssに記述されている position:relativeの部分を削除したところ 手のひらツールは出なくなりましたが、リンク(内部、外部共)については解決していません。 但し、ハンバーガーメニューについては各ファイルにはリンクできます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問