運営規約IT坊やだからさ。今回はJavascriptを使ったプログラミング作品の一例。ある横スクロール型のスライドショーをウェブサイトに組み込んでみる。横スクロールはJavascriptの定番機能だが基礎的な作り方が学べて良い。Javascriptをこれから学習する人にオススメの機能である。作り方はたくさんあるが今回は「.html」「.css」「.js」の3つのファイルから作成することにする。【jQuery】必要なjavascriptファイルをインポート実はjavascriptで横スクロール式のスライドショーは数多くのやり方がありライブラリが確立している。必要なライブラリが分かれば誰でも作成する事ができるのだ。今回これらのJavascriptファイルをインポートした。jquery-3.3.1.min.js(版数は最新版で)bootstrap.min.jsdocs.min.jsjssor.slider.min.jsまずは天下の「jQuery」ファイルから。javascriptライブラリの代表格。数字は版数なので最新版をダウンロードすれば良い。ダウンロード先はこちらから。jQueryjQueryのライブラリは必須でインポートしておこう。次に「bootstrap」ファイルについて。「bootstrap」とは?BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。「bootstrap」は再現性の高いウェブパーツやレイアウトの整理に使うコードが書かれているファイル。今回の様に横スクロールなど再現性の高い動きにも対応したデザインコードが含まれている。「docs」も汎用性の高いウェブパーツになる。「bootstrap」と親和性が高い。最後の「jssor.slider」ファイルが横スクロールの本体と言えるファイル。スライドショー周りはこのファイルに託そう。その他にも手組みのjavascriptファイルが存在するがそれは次の項目で。次に横スクロールのスライドショーを構成するファイル群の詳細を書いていく。顔となる「.html」から。htmlファイルに必要なファイルをリンクさせ、スライドショーをデザインしていく。「head」タグ内に必要なjavascriptファイルおよび「.css」ファイルをリンクさせる。「body」タグでは以下の設定を行う。横スクロールさせる部分の設定をする。「class=”container”」が外枠になる。詳細なデザインは「.css」ファイルで取り決めるので「.html」ファイルでは配置だけをデザインする。動きは「id=”slider1_container”」で設定する。スクリプトで設定した「class」と「id」を「.html」ファイルに埋め込んでいく形だ。「.css」ファイルの設定をする。「.css」ファイルの設定はそこまでない。必要なのはスライドショーで扱うイメージファイルの取り決め。ナビゲーションとなる「→」の配置設定だけだ。最後に手組みのjavascriptファイルを追加する。作成したファイルは「slidesw.js」とした。(名前は任意だが、htmlファイルへリンクする名前を一致させる事)javascriptファイルの役割は3つある。上から順番に言えば「スライドショーの時間設定」「ナビゲーションの動き」そして「スライドショーの動き」だ。変更できる点は「$Idle」でインターバルを。「$SlideDuration」でスライドの速さ。変更する点は時間の設定ぐらい。これで一通り横スクロールのスライドショーの完成。最近はフロントエンジニアとウェブデザイナーの見境がなくなってきたが、その要因の1つにjavascriptが確実に該当する。コーディングが難しいなんて言ってられないんだよ。必要なjavascriptはどんどんインポートしてしまうべし。【Javascript】デジタル時計とアナログ時計の作り方!今回はJavascriptで時計を作ってみた。Javascriptは動的なオープンソースプログラミング言語で汎用性が高い。...ITエンジニアになるならHTMLから始める事をオススメ!わたしは現在ITエンジニアとしてフリーランスをやらせてもらっている。最初からフリーランスエンジニアを目指して活動をしていたわけでないが、自然と始めたことがある。...【CSS/Javascript】ナビゲーションバーをトップに固定!ナビゲーションバーをウェブサイトのトップに固定する手順。ひと昔であればjQueryなど使って対応していたが、今はCSSだけでも十分に対応できる時代になった。...【簡単】Javascriptを使ってサクッとQRコードを作成!今回は思いっきりプログラミングのことについて書こう。言っても内容は至って簡単なコードだけだ。実現したのは「Javascript」を使って「QRコード」を発行するというシステムだ。...【解決策あり】VBAのエラーまとめ!エラーランキング5!仕事でVBA案件をもらうことがある。わたしは元々VBAが最も得意だった。VBAとはマクロの事だ。プログラミング言語の中ではシンプルな言語でわかりやすい。...PREV#2)完全無料のRPAExpressを一通り操作した結果!NEXT【IT就職】IT業界へ転職するなら分野を選ぶべき理由!プロフィール逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。詳細プロフィール2018/11/15【ITリテラシー】情報格差が広がる時代。「悲しいけどこれ戦争なのよね。」スレッガー中尉から学ぶ人生。「あなたならできるわ。」セイラの言葉は神様のプレゼント。