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

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

ただいまの
回答率

90.51%

  • JavaScript

    16478questions

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

  • HTML

    9001questions

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

  • jQuery

    6726questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5810questions

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

particleground をプラグインしたのですがリンクが押せません。どなたか教えてください。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 379

pun

score 1

リンク内容

particlegroundをプラグインしたらナビゲーションが押せずz-indexの配置場所と数値がわかりません。どなたか詳しい方、教えてください。
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 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/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 lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
        <!--[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="layout_area" class="particales">



        <header id="header_area">

        <div id="logo_area">
                    <!--<img src="./img/logo.png" alt="logo" width="80" height="103" />-->
        </div>
                <div id="title_area">
                    <h1>タイトル</h1>
                </div>    
        <nav id="menu-box">
<div id="toggle"><a href="#">MENU</a></div>
    <ul id="menu">
                            <li><a href="./index.html"/>HOME</a></li>
                            <li><a href="./index.html"/>HOME</a></li>
                            <li><a href="./index.html"/>HOME</a></li>
                            <li><li><a href="./index.html"/>HOME</a></li>
                            <li><a 
                            <li><a href="./index.html"/>HOME</a></li>
    </ul>
</nav>

            </header>

            <div id="home_right_area">
                    <img src="./img/tamako02_icn.png"  alt="tamago"/>
            </div>
            <footer id="footer_area">
                <small>&copy 2017 ALL RIGHTS RESERVED</small>
                <div id="place00">

                </div>
            </footer>

        </div>












    </body>
</html>

以上htmlに記述

cssは

```ここに言語を入力  
.pg-canvas {  
position:fixed;  
top:0;  
left: 0;  
right: 0;  
bottom: 0;  
width: 100%;  
height: 100%;  
display: block;  
z-index: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;  

}  
.pg-canvas {  
position:fixed;  
top:0;  
left: 0;  
right: 0;  
bottom: 0;  
width: 100%;  
height: 100%;  
display: block;  
z-index:0;  

}  
#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;  


}  




#sub{  
font-size:16px;  
text-align:center;  

}  


#home_right_area {  
text-align:right;  
margin:100px 120px 0 0;  
display:block;  



}  



#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:white;  
}  
#menu li a:hover{  
color:blueviolet;  
}  
#toggle {  
display: none;  
}  

です。 .bg-canvasがparticlegroundというjqeryです よろしくお願いします。 ```

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/19 22:19

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン/ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

回答 1

checkベストアンサー

+2

動くサンプル:https://jsfiddle.net/150s86ho/


  1. <h1="タイトル" /></h1> <a href="./index.html"/>HOME</a> など文法的に問題のある箇所を是正する
  2. #layout_area の height:100%; は html,body にも指定する
  3. 内包要素はまとめて div要素に入れる
  4. .pg-canvas で行っているを指定しない
    「背景」として固定したいのであれば .particales の中に要素を置かない。

とりあえず上記あたりを試してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/20 06:54

    大変助かりました、ご丁寧にわざわざありがとうございました。

    キャンセル

  • 2017/03/20 07:04

    あと、他の画面でスクロールして行った時に背景色がしたにつくのですが、これをつけずに幾何学模様だけで
    表示することは不可能なのでしょうか?何度も申し訳ありません。

    キャンセル

  • 2017/03/20 11:15

    .pg-canvas に背景色を設定するとか、bodyの背景色を指定してしまうとかそういうことでしょうか。

    キャンセル

  • 2017/03/20 11:48

    いえ、フル画面で写真を表示したかったのですが、サンプルでは卵のロゴがあったところを変えたのですが、そうしたらフッターまで写真が映らなくなりました。
    プラグインソフトの高さの問題でしょうか?

    キャンセル

  • 2017/03/20 11:52

    その件については新たに質問されているみたいなので、回答を待ってみては?

    キャンセル

  • 2017/03/20 11:56

    そうしてみます。わざわざありがとうございます。

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16478questions

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

  • HTML

    9001questions

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

  • jQuery

    6726questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5810questions

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