忍者ブログ

からすまる日誌

自習:画像のスライド

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

自習:画像のスライド

クエリー
 
>クエリ(query)とは、英語で「問い合わせ(る)」、「訪ねる」などの意味を持つ英語の単語で、ITではソフトウェアに対するデータの問い合わせや要求などを一定の形式で文字に表現することを意味します。 クエリを通じて、データの検索や更新、削除、抽出などの要求をデータベース(DBMS)に送信することができます。
 
console.log()はJavaScroptで使う


 

>このスライドショーは、HTMLだけでは実現できないので、「jQuery(ジェイクエリー)」というものを使います。 ただ、コピペだけで、簡単に実現できるので、ぜひやってみてくださいね。
 
http://toretama.jp/automatic-slideshow-image.html
 
画像が自動的に切り替わる「スライドショー」を表示する方法の手順
 
手順1:スライドショーを表示したいページのヘッダー
(</head>の真上)に、下記のソースを入れる。
 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
 
<script type="text/javascript">
        $(document).ready(function(){
            $('.slider').bxSlider({
                auto: true,
                pause: 5000,
            });
        });
</script>
 

手順2:スライドショーを表示したい箇所に、下記のソースを入れる。
 
<div class="slider">
<img src="gazou1.jpg" width="500" height="300" alt="">
<img src="gazou2.jpg" width="500" height="300" alt="">
<img src="gazou3.jpg" width="500" height="300" alt="">
<img src="gazou4.jpg" width="500" height="300" alt="">
</div>
 

htmlでコメントを書く:
<!-- コメント-->
 
>ハイフン「-」をコメントの中で使わないことをおすすめします。ハイフンの連続をコメントの終了と解釈するブラウザがあるからです。そのため、意図しないところでコメントアウトが終了して、ブラウザに表示されてしまう場合があります。
よく、区切りに「----」とこのようにハイフンを連続して使う人がいますが、「====」などに変えて使いましょう!
>なぜHTMLでコメントアウトを使うのか
1.説明や注意書きを残す
2.ページの構成を明確にする
 
>HTMLではさまざまなタグを用いてWebページを構築していくので、何段もの構造が重なり合うことがあります。その場合、後から修正などを行うときに目的のコードまでたどり着くのが大変です。
そこで、後から修正をしやすいようにコメントアウトで「Start Header」「Start Menu」などと、誰が見てもわかるように区切りを入れていきます。そうすると自分で変更や修正を行うときにもスムーズに目的の場所にたどり着くことができ、他の人が修正するときにもわかりやすくなります。
 
また、HTMLは開始タグと終了タグありますが、片方を追加・削除してしまうと表示が崩れてしまいます。なので、どのタグがどこまで対応しているのかがすぐわかるようにするためコメントアウトに「Start Article」「End Article」などと記述しておくと安心です。
 
3.特定のブロックを表示、非表示にする
 

jQueryとは
 
>jQueryをざっくりと説明すると「JavaScript」と呼ばれるプログラムをより扱いやすくしたファイルのことです。(通称:ライブラリ)
本来であれば煩雑なプログラムの記述も、jQueryを使用すると少ない記述で実現できてしまいます。
 
jQueryを利用するには、あらかじめjQueryをHTML上に記述し、読み込んでおく必要があります。
 
読み込み方の主な方法は2パターンあります。
 
1.Web上のソースを読み込む方法
2.ダウンロードしてローカルで読み込む方法
 
PR

コメント

ブログ内検索

カレンダー

05 2025/06 07
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30