- ベストアンサー
HTML、CSS、Javaスクリプトを使用して
HTML、CSS、Javaスクリプトを使用して1つの場所に、リンク付きの画像を順番に複数表示させ、それをループさせるにはどのようにすれば良いでしょうか？
- ferrari328gtslf
- お礼率17% (5/28)
- JavaScript
- 回答数13
- ありがとう数1
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
必要ファイルはすべてCDNからの自力取り込みです。 （外部にある、サーバーから入手しているという事） なので、貴方が用意するのは、 画像とリンクを押した後の画像のみ？となるでしょう。 技術的に、突っ込んでくれたらうれしいポイントが、 ヘッダー内で、scriptを実行しているが、 この位置ではまだ、body内のHTMLは読み込んでないんじゃないの？ ってことに気が付いてくれたら結構、「お～」だったりも＾＾ だから$で始まるんですけどね。(というか、jqueryのthisポインタ) HTMLを読み込み終わってから$が動くために 先に宣言をまとめられるという特性です。 こうすると、BODYの中は、綺麗になるのが、わかってもらえたかと。 ただ、やってることは他のサンプルをローカルで動くように しただけなので、特に私は何もしてませんけどね。 ではでは！おそくなりましたね。ごめんね～
その他の回答 (12)
- AsarKingChang
- ベストアンサー率46% (3467/7472)
以下を、好きな名前.html などのファイルを作って、ローカルファイルにして、 それをブラウザで表示してみてください。 ------------------------------------------ <!-- https://zero-plus.io/media/jquery-slick/ このサイトの取説をローカルHTMLにしたものです。 --> <html> <head> <!-- 外部ファイル取り込み部分 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"> <style> /* IDやクラス名の間に","を使うのは、同じものを両方に設定しろという意味です */ .slide-items, .slide-items2 { width: 100%; height: 50%; } .slide-items img, .slide-items2 img { width: 100%; object-fit: cover; } </style> <!-- 個別設定スクリプト --> <script> $(function(){ /* 両方共通で、縦は画面の50%をCSS側で与えている */ /* 上の物は、横フルで表示 */ $(".slide-items").slick({ autoplay: true, // 自動再生 autoplaySpeed: 4000, // 再生速度（ミリ秒設定） 1000ミリ秒=1秒 infinite: true, // 無限スライド }); /* 下の物は、両サイドを20%分「前後のスライドを見える状態」で表示 */ $(".slide-items2").slick({ autoplay: true, // 自動再生 centerMode: true,// 前後スライドを部分表示 centerPadding: '20%',// 両端の見切れるスライド幅 }); }); </script> </head> <body> <!-- カルーセルそのものにリンクを張った例 --> <a href=.> <ul class="slide-items"> <li><img src="images/dummy1.jpg" alt=""></li> <li><img src="images/dummy2.jpg" alt=""></li> <li><img src="images/dummy3.jpg" alt=""></li> </ul> </a> <!-- カルーセルの要素にのみリンクを張った例 --> <ul class="slide-items2"> <li><a href=.><img src="images/dummy1.jpg" alt=""></a></li> <li><a href=.><img src="images/dummy2.jpg" alt=""></a></li> <li><a href=.><img src="images/dummy3.jpg" alt=""></a></li> </ul> <!-- 画像はJPEGになっているが、ブラウザが表示できる形式なら何でもいい --> </body> </html> ------------------------------------------ 手持ちの任意の画像をセットはした方が、わかりやすいので、 そこだけ、自前の物をどうぞ！ あと、コメントが <!-- ～ --> /* ～ */ // ～～ の３種類混在しており、そこは注意を！
- AsarKingChang
- ベストアンサー率46% (3467/7472)
すまん。この件忘れてた。夜にでもちょいちょい というか、サンプルを張る程度になるんだけどね。 （動く状態になってるか？程度の違いしかないとは思う）
補足
全然大丈夫です。 有難うございます。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>申し訳ないついでに、ソースを直して頂けると有難いのですが・・・・・・ 明日でよければ＾＾やりま～す！
補足
有難うございます。 宜しくお願いいたします。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>下記を記述すれば動くのでしょうか？ そそ。そんな感じ！ jquery その他は、headブロックの中に入れてOKですよ。 CSSが同じものが何回も入ってるので整理しつつ <div>your content</div> 要件定義が「リンク付き」なので <div><a href=アドレス>your content</a></div> これが画像に対してのリンク 全体で同じアドレスなら、divの外に置けばOKです。 などで、ローカルのHTMLで試してみると いいでしょう。 <script type="text/javascript" src="slick/slick.min.js"></script> これは、FTPなどで、アップロードして使う時の書き方なので、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> こっちみたいに、外部にあるものを取り込んで使うCDN方式にすればよいでしょう。 逆に、そんだけで、動きますよ！
補足
有難うございます。 大変申し訳ないのですが、ご教示いただいたところがよく理解できy手ません。 申し訳ないついでに、ソースを直して頂けると有難いのですが・・・・・・
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>読んで理解するまで時間が掛かりそうですが 基本、IDやCLASS えっと、 <div id=ここがID class=ここがCLASS> 構成物 </div> ってな囲いをして、プラグインを作ると、 プラグインが、指定のIDやCLASSを探して その中に、アニメーションを追加して動くよ～って 感じなので、何もしなくても動くんです。 おもに ID＝全体で1回しか使わない演出用 CLASS=全体で何回でも使う演出用 と思っていいですが、プラグインにより、 1つのページで1回しか使えない物もあれば、 何回追加してもいい物もあり、そこらへんは、 サンプルでな～んとなくわかればいい程度です。 あと、今現在jqueryを使っている場合は、 プラグインだけ追加。ない場合は、jqueryも追加。 ローカル環境でも試せるので、それで試してから マージ（公開サイトに取り入れる）してもいいでしょうね。 などで、いけますよ～！
補足
読んでみました。 ・ダウンロードした ファイルを同じ階層に置く ・リンク付き画像は4枚 として、下記を記述すれば動くのでしょうか？ <html> <head> <!--slick--> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick.css"/> </head> <body> <!--スライダ-の枠--> <div class="スライダーのクラス名"> <div>your content</div> <div>your content</div> <div>your content</div> </div> <!--HTML> <div class="multiple"> <div><a href="コンテンツ1"><img src="1.jpg" ></div> <div><a href="コンテンツ2"><img src="2.jpg" ></div> <div><a href="コンテンツ3"><img src="3.jpg" ></div> <div><a href="コンテンツ4"><img src="4.jpg" ></div> </div> <!--CSS--> .multiple { padding: 0;} .multiple img { width: 100%;} .multiple div { margin: 0 5px;} .multiple .slick-next { right: 17px; z-index: 100;} .multiple .slick-prev { left: 23px; z-index: 100;} <!--jQuery--> $(document).ready(function(){ $('.multiple').slick({ autoplay: true, //自動再生 infinite: true, //スライドのループ有効化 dots: true, //ドットのナビゲーションを表示 slidesToShow: 4, //表示するスライドの数 slidesToScroll: 4, //スクロールで切り替わるスライドの数 responsive: [{ breakpoint: 768, //ブレークポイントが768px settings: { slidesToShow: 3, //表示するスライドの数 slidesToScroll: 3, //スクロールで切り替わるスライドの数 } }, { breakpoint: 480, //ブレークポイントが480px settings: { slidesToShow: 2, //表示するスライドの数 slidesToScroll: 2, //スクロールで切り替わるスライドの数 } }] }); }); $(document).ready(function(){ $('.multiple').slick({ autoplay: true, //自動再生 infinite: true, //スライドのループ有効化 dots: true, //ドットのナビゲーションを表示 slidesToShow: 4, //表示するスライドの数 slidesToScroll: 4, //スクロールで切り替わるスライドの数 responsive: [{ breakpoint: 768, //ブレークポイントが768px settings: { slidesToShow: 3, //表示するスライドの数 slidesToScroll: 3, //スクロールで切り替わるスライドの数 } }, { breakpoint: 480, //ブレークポイントが480px settings: { slidesToShow: 2, //表示するスライドの数 slidesToScroll: 2, //スクロールで切り替わるスライドの数 } }] }); }); <!--script--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('スライダーのクラス名').slick({ オプション: 値 }); }); </script> </body> </html>
- AsarKingChang
- ベストアンサー率46% (3467/7472)
あ～こったことをしようとしてるわけじゃないのね。 https://www.jungleocean.com/programming/190201jquery-slick とかで気に入ったパーツを見つけて、組み込むだけでOKですし。 1個じゃなく、2個以上（種類も混ぜれる） などをしてもいいので、 一度Jquery系のライブラリを見てみると、 「あ～そんだけか！」で終わるかも。
補足
有難うございます。 読んで理解するまで時間が掛かりそうですが（目が悪いので）やってみますが、つまずいたら教えてください <(_ _)>
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>？・・・・・・というレベルです。 簡単なサンプルなら作ってあげてもいいですよ。 要件定義だけ、まとめてもらえれば。 要するに何がやりたいの？って質問に「かっこいいの！」 って答える用だと作業ができないので。。 あと、最初に言った通り、 「リンク付きの画像を切り替える」と操作性は良くないので、 リンク付きだが「画像のみを切り替える」の方がいいでしょうね。 これだけでも、大きく違います。 箱の中に絵が入っているとして、 箱の中の絵を入れ替えるのか、 箱の中に絵が入っているが箱ごと切り替えるのか？ って違い、だいぶ違うのは、わかってもらえるかと。 階層の概念を持てるのであれば、パーツとして こちらで作ってもいいですが。 パーツとしてはめ込む練習をしてみるとよいと思います。 今私が言った件以外に、世の中には多数のプラグインがあり、 それらを組み合わせてサイトを飾り付ける物なので、 ＝ここをクリアできれば、どんどんサイトをパワーアップできる！ って事ですから～ もちろん、強制なんてしませんが、お好みでどうぞ！ って所ではあります。 おまけ、他人のサイトを作ってあげるのって、 結構、いい金になりますよ。 なので、勉強自体は無駄じゃないので～す！ ではでは
補足
大変助かります！ 使用しているCMSはXoops2で、現在トップページの最上段にHTMLブロック を表示させて <a href="コンテンツ先"><img src="バナー"></a>を記述して画像を1枚表示 させています。 ここの表示バナーを4枚ほどカルーセルにしたいのです。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
>要はトップのバナーを数秒ごとに貼りかえてtループさせたいのですが、 >Xoops2のHTNLブロックにさらっと書いて実現させるには難しいですね。 いや、先ほど回答したように簡単かと思います。
補足
すみません、私自身HTMLの基本レベルなので、 サンプルうぃみてもどう扱えばよいのかわかりません。 HTML部分のの下にCSSを書いて、その下にjsを書いて1つのファイルにするのか、それぞれのファイルを作るのか、拡張子は？・・・・・・というレベルです。
- WDY
- ベストアンサー率27% (121/433)
スライダーのバナーを作りたいのかな？ 「スライダーバナー js」等で検索すると サンプルが沢山ヒットすると思います。 ＞1つの場所（1ファイル？） そのサンプルを1つのHTMLに全部書いてしまえば 1つの場所（1ファイル）にまとまると思います。 ＞1つの場所（1カ所に置いて参照？） HTML、CSS、Javaスクリプトだけ使用であれば スライダーだけのHTMLを作り 別HTMLでiframeで呼び出せば良いのでは？
- AsarKingChang
- ベストアンサー率46% (3467/7472)
ただし、UI的に >リンク付きの画像を順番に複数表示させ これは、不親切なので、 「リンク内の画像の方を順番に複数表示させる」ほうが 良いと思います。押そうと思ったら、急に変わって 違うアドレスになるような、UIでは、せっかく作ったのに！ 「使いにくさを増やす効果」の方が目立つと思います。 後は、EnjoyIt
補足
有難うございます。 要はトップのバナーを数秒ごとに貼りかえてtループさせたいのですが、 Xoops2のHTNLブロックにさらっと書いて実現させるには難しいですね。
- 1
- 2
関連するQ&A
- 覚えるのはJavaスクリプトでいいんでしょうか？（カンタンですか？）
最近独学でHTMLとCSSを覚えて、はじめて自分のHPを公開しました。イラスト等描くのが好きなのですが、画像のスライドショーのページの作り方はわからなかったので、外部のサイトからサンプルをお借りして作りました。サンプルソースを見ると、「Javascript」という言葉が何度も出てきているし、「JAVAスクリプトを使えばゲーム的なものを作りやすいようだ・・」という風に漠然と理解したので、javaスクリプトを覚えようと思うんですが、 他にもプログラムって色々あるじゃないですか？HTMLとCSSを覚えたら、次に覚えるべきなのは何でしょうか？ 具体的にやりたい事⇒ランダムで別のページに飛ばしたり、ダンジョンRPG風、またはシナリオ分岐を作ったりして、ゲームっぽいものを作ってみたいです。あとは、画像のスライドショーなどを自分で工夫して（ソースを）書けるようになりたいです。
- ベストアンサー
- レンタルサーバ・ASP
- メニューのカテゴリが多くなってきたのでjavaスクリプトで整理しようと思っていますが。
メニューのカテゴリが多くなってきたのでjavaスクリプトで整理しようと思っているのですが、 メニューをクリックするとサブメニューがひらいてそこから選ぶという風にしたいのですが、これはＳＥＯ的にはいかがなものなのでしょうか？ リンクとして扱われるのでしょうか？ やはりＳＥＯを考えると純粋にＨＴＭＬとＣＳＳで作成するのが 得策なんでしょうか？ とても悩んでいます。。。
- ベストアンサー
- HTML
- ブログ上で複数のjavaスクリプトから2つのjavaスクリプトをランダムに表示させたい
ブログ上に、複数のjavaスクリプトからランダムに２つのjavaスクリプトを選んで表示させたいのですが、コードがわからないので教えていただきたいです。選ばれた二つは被らないようにしたいです。 使用したいjavaスクリプトのコードは <script type="text/javascript" charset="euc-jp" src="○○1"></script> <script type="text/javascript" charset="euc-jp" src="○○2"></script> <script type="text/javascript" charset="euc-jp" src="○○3"></script> のようになっています。 javaを使って画像や文字をランダムに表示する方法はあったので応用しようとしたのですがうまくいきませんでした。 よろしくお願いします。
- ベストアンサー
- JavaScript
- HTML＆java script
このカテゴリで良いのかもいまいち分からないのですが、「HTML」「java script」ってどんなことをする為のものですか？就職活動してますが、気になる会社の必要資格等の欄にこの２つの基礎知識と書いてありました。名前も初めて聞くようなレベルなんですが、独学で身に付くでしょうか？お勧めの本とかありますか？
- 締切済み
- ホームページ作成ソフト
- HTMLやスクリプト
HTMLについて（自分では全然理解できていません） 勉強したいんですが、詳しく説明しているサイトなどがあったら教えてもらいたいです。 スクリプトについても（JavaスクリプトやJスクリプト？）詳しく説明してあり、理解しやすいサイトがあったら教えてください。 よろしくお願いしますm(_ _)m
- ベストアンサー
- レンタルサーバ・ASP
- HTML、CSSについて
アメーバブログをやっています。 ＣＳＳの使用の仕方を覚えたくて、 いろいろやり方を調べてるんですけど、 教えてgooで検索すると、 「まずHTMLタグから覚えるとよいでしょう。」 と、回答者さんがよく答えています。 CSS＝ブログのデザインなどを細かいところまで自己流に改造する。 だと思うんですけど、 HTML＝？？？？？ HTML、HTMLタグとはなんなんですか？？ そして、読みかたは？？ 「エイチティーエムエル」ですか？ HTMLとは何をするもので、 どういうものですか？？ HTMLの例か、 HTMLの仕方（？） が詳しく載っているサイトを教えてください。 あと、CSSは 変えたいところ 英語でヘッダーと書いてあるところのあとに、 画像のURLを入力するだけでいいんですか？？ 詳しく教えて下さい。 お願いします
- ベストアンサー
- ブログ
- HTMLメルマガにJAVAスクリプトを組み込むのは危険ですか？
HTMLメルマガを配信するにあたり、JAVAスクリプを組み込む事を考えています。 ただ、組み込むことでメールのサイズが重くなる、スパムメールと誤認されるなどリスクがあるのではないかと心配です。 調べてみましたがそういった情報に行き当らなかったので、詳しい方に、JAVAスクリプトを組み込む際のリスクなどがあれば教えていただければと思います。
- ベストアンサー
- その他（メールサービス・ソフト）
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
- java,javaスクリプトなどの違いが分からないです。
HTMLが何かは少ーーーしは知っているのですが、 以下の六つの違いが良く分かりません。 ●java ●javaスクリプト ●javaアプレット ●ハイパーHTML ●ダイナミックHTML ●ＣＧＩ 自分で調べてみたのですが、いまいち理解できませんでした。 今のところ、この六つの違いについて少しでも知りたいと思います。 どなたか、パソコンへろへろな僕にも分かるように 簡単でいいですから、教えて頂けないでしょうか？
- 締切済み
- HTML
- 初心者なのにJAVAスクリプトを使うから！
HP作成初心者で、特にJAVAスクリプトに関しては赤子にも及びませんが助言して頂けたら幸いです。 まずいくつかの画像を、全部暗い感じにしてオンマウスでスポットライトがあたったように明るくなるような（フェードインする感じです）JAVAスクリプトを使いました。 そして同じ画像ににオンマウスで任意のテキストを表示させるJAVAスクリプトを使いたいのですが、やり方がよくわかりません… 個々には出来るのですが…(当たり前ですが；） そもそもHEAD間に２つJAVAスクリプトを書いていいかもよくわかっていませんし、 BODY間のその2種類のJAVAスクリプトを呼び出したい場所での書き方もよくわかりません。 自分なりに色々と調べてはみたのですが、答えが見つかりませんでした… 本当に初心者丸出しで、質問の意味もわかりにくいかとは思いますが、わかる方がいらっしゃいましたら是非教えて下さいませ<(_ _)>
- ベストアンサー
- JavaScript
お礼