リンク内容
プラグインの指示どうりやるとリンクが押せず、違うやり方では背景でしたまで綺麗に見えません。解決方法はないでしょうか?
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="," /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3" /> <meta name="msapplication-TileImage" content="./msapplication-TileImage.png" /> <meta name="msapplication-TileColor" content="#fff" /> <!--[if IE]><meta http-equiv="Imagetoolbar" content="no" /><![endif]--> <title></title> <link rel="stylesheet" type="text/css" media="screen and (min-width:1024px)" href="../css/screen_pc.css" /> <link href='https://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css' /> <link rel="apple-touch-icon" href="./apple-touch-icon.png" /> <link rel="shortcut icon" type="./image/vnd.microsoft.icon" href="./favicon.ico" /> <link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico" /> <link href='https://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text/css" href="../css/default.css"> <link rel="stylesheet" type="text/css" href="../css/component.css"> <script src="../jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../js/global.js"></script> <script type="text/javascript" src="../js/jquery.particleground.min.js"></script> <script src="../js/jquery.dlmenu.js"></script> <script type="text/javascript"> $(function(){ $('.particales').particleground({ //要素の指定 dotColor: '#ffffff', //ドットの色 lineColor: '#ffffff', //線の色 particleRadius: 5 //ドットのサイズ }); $( '#dl-menu' ).dlmenu(); $("#toggle").click(function(){ $("#menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p =660; if(win > p){ $("#menu").show(); } else { $("#menu").hide(); } }); var win = $(window).width(); var p = 660; if(win < p)$(function(){ $("#menu li a").click(function(){ $("#menu").hide(); }); }); }); </script> <!--[if lte IE 8]> <script type="text/javascript" src="./lib/html5/html5shiv-printshiv.js"></script> <script type="text/javascript" src="./lib/html5/css3-mediaqueries.js"></script> <link rel="stylesheet" type="text/css" hr<a href = "index.html"></a>ef="./css/ie8.css" media="screen" /> <![endif]--> </head> <body> <div id="product_area" class="particales"> <header id="header_area"> <div id="title_area02"> <div class="wrap_area"> <h1>タイトル </h1> </div> <nav id="menu-box" class="clearfix"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu" class=""> <li><a href="../about/about.html"/>home</a></li> <li><a href="../about/about.html"/>home</a></li> <li><a href="../about/about.html"/>home</a></li> <li><a href="../about/about.html"/>home</a></li> <li><a href="../about/about.html"/>home</a></li> <li><a href="../about/about.html"/>home</a></li> </ul> </nav> <div id="sub"> <h1>テキスト</h1> </div> <div class="image_pic"> <img src="../img/in_egg.png" alt="" width="336" height="312" /> </div> <article class="about_description"> <p>hoghogehogeogeogeghoeggeghhoeghoghegehoghegoheghoeg<span>hihfohfefhhefoehffheohe。</span>hogrhogrhoghogghghorghogrgghrghrgghghoghghoghogh</p> </article> <div class="image_pic"> <img src="../img/in_egg.png" alt="" width="149" height="143" /> </div> <article class="about_description"> <p>hhohhohhohhohhohohohohohohohoohohohohohohohohoho</p> </article> <article id="about_next_comment"> <h1>yテキスト</h1> <p>hohhohohohohohhohohohohohohohohohoohohohoh hoohohohohohoho。</p> </article> <footer id="footer_area"> <small>© 2017 ALL RIGHTS RESERVED</small> </div> </footer> </body> </html>
cssは
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx){ } /* TEMPLATE Retina parts end*/ body, html { width: 100%; height: 100%; margin: 0; padding: 0; } /* INTERFACE */ body{ -webkit-text-size-adjust:100%; background-color:white; margin:0px; padding:0px; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS 明朝", serif; } body { background-color:none; !important; } html,body { height: 100%; } .wrap { position: absolute; width: 100%; height: 100%; top: 0; } /* TEMPLATE +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Retina parts */ @media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx){ } /* TEMPLATE Retina parts end*/ /* INTERFACE */ body{ -webkit-text-size-adjust:100%; background-color:white; margin:0px; padding:0px; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS 明朝", serif; } #layout_area{ max-width:1680px; background-image:url("../img/main_004.jpg"); background-repeat:no-repeat; background-position:center-top; background-size:cover; height:100%; margin:0 auto; } #header_area{} #logo_area{ padding:10px 10px; } #title_area{ text-align:center; margin-top:0px; } #sub_title_area{ text-align:center; margin-top:-40px; } #menu { width: 100%; max-width:1680px; margin:0 auto; padding:0; display:block; } #menu li{ display:block; float: left; width: 16.6666667%; margin: 0; padding:0; } #menu li a { display: block; padding:0 20px 0 20px; background-color:; color:white; text-align: center; text-decoration: none; border-right:1px solid #4baacb; } #menu li:last-child a{ border: none; } #menu li a:link{ color:#000; } #menu li a:hover{ color:blueviolet; } #toggle { display: none; } #footer_area{ max-width:1680px; text-align:center; border-top:1px solid #ffffff; color:#ffffff; } } #footer_area small{ font-size:12px; } .image_pic{ text-align:center; } .about_description{ width:600px; text-align:center; margin:80px auto; } .about_description p{ color:#000000; text-align:center; } .about_description span{ color:#0000; } #about_next_comment{ width:600px; margin:100px auto; } #about_next_comment h1{ text-align:center; color:aqua; } #about_next_comment p{ color:#0000; text-align:center; width:600px; display:block; margin:0 auto; }
です。よろしくお願いします
あなたの回答
tips
プレビュー