ド素人が作る自分のポートフォリオサイト作成 第５回目 ～game紹介サイトの作成～
今回は、自分が普段しているゲームを題材に自分でそのゲームについて紹介しているようなサイトを作成していきたいと思います。
また、今回もまた、jQueryを使用して拡大して見たい画像を拡大できるような仕組みを導入していきたいと思います。
・ソースプログラム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>game</title>
<!-- CSSの読み込み
<link rel="stylesheet" href="./flickity.css"/>
<!-- JavaScriptの読み込み -->
<!--<script src="./flickity.pkgd.js"></script> -->
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
<header>
<ul id="menu">
<li><a href="name.html">Home</a></li>
<li><a href="game.html">ゲームのサイト</a></li>
<li><a href="prog.html">頑張りたいプログラミング</a></li>
</ul>
<div class="info"> <h1>ゲーム紹介サイト</h1>
<p>自分が普段やっているゲームについてここでは書いていこうかなと思います。</p>
</div>
</header>
<p></p>
<div id="imgs">
<a href="img/R6s.jpg" data-lightbox="group"><img src="img/R6s.jpg" alt="画像１" width="240" height="240"></a>
<a href="img/R6s2.jpg" data-lightbox="group"><img src="img/R6s2.jpg" alt="画像２" width="240" height="240"></a>
<a href="img/R6s3.png" data-lightbox="group"><img src="img/R6s3.png" alt="画像３" width="200" height="240"></a>
</div>
<p>コチラのゲームは、FPSゲームで、5対５で争います。ルールとしては、陣取り、人質、ボムがあり仲間と様々なコミュニケーションをとりながら様々な戦法があるのがかなり面白い作品となっています。自分は、かなり下手ですが、本当に面白いですよおススメ
</p>
</div>
<div class="switch">
<h2>switch</h2>
<a href="img/sw.jpg" data-lightbox="group"></a><img src="img/sw.jpg" alt="画像１"height="240" width="240"></a>
<a href="img/sw2.jpg" data-lightbox="group"></a><img src="img/sw2.jpg" alt="画像２"height="240" width="240"></a>
<a href="img/sw3.jpg" data-lightbox="group"></a><img src="img/sw3.jpg" alt="画像３" height="240" width="200"></a>
<p>、HAL研究所が開発し、任天堂が発売した対戦型アクションゲームのシリーズ名である。略称「スマブラ」、「SSB（英題の頭文字略）」。ディレクターは『星のカービィ』の生みの親でもある桜井政博が担当している。(ウィキペディアより）
</p>
</div>
<div class="suma">
<a href="img/FGO.jpg" data-lightbox="group"></a><img src="img/FGO.jpg" alt="画像１" height="240" width="240"></a>
<a href="img/FGO.png" data-lightbox="group"></a><img src="img/FGO.png" alt="画像２" height="240" width="240" ></a>
<a href="img/FGo2.jpg" data-lightbox="group"></a><img src="img/FGo2.jpg" alt="画像３" height="240" width="200"></a>
<p>ームブランドTYPE-MOONによるゲーム作品『Fate/stay night』を元として製作されているスマートフォン専用ロールプレイングゲーム。略称は「Fate/GO」もしくは「FGO」。</p>
</div>
<script>
</script>
</body>
</html>
・実際にサイト
以上のようなサイトを作成していきましたが、今回の画像をポップアップするようなサイトをするにあたってjQueryの導入が必要になっていったのですが、
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
の所で導入を行っております此処の所は、http://toretama.jp/click-big-image-floaty.html
より参考して使用させていただきました。。
正直まだ、勉強不足なので、あまり説明できてはいないのですが、いじょうで終わります。ありがとうございました。
