ポートフォリオサイトを作りなおしてみた 第2回～DBの挑戦～
今回は、前回のポートフォリオサイトを作りなおしてみたの続きの第2回目です。
今回は、主にphpを使用したデータベースの接続をメインに行っていこうと思います。
まず今回使うデータベース等の作業で使用するアプリケーションは、XAMPPさんを使用させていただきます。
XAMPPとは、完全無償で、PHP、データベース（略してDB）をインストールでき公式サイトには、最も人気のあるPHP開発環境です。
公式HP https://www.apachefriends.org/jp/index.html
また、DB（Darabase)は、情報の検索、貯蓄等が容易に使用できるように整備された情報の集まりであります。
DBが使用されている例としては、
・顧客の情報をまとめる
・ログインなどのユーザー情報の管理
などに使われています。
また、今回は、DBの中でもMｙSqlを使用していきます。
MySQLとは、多くのデータを高速に動作が出来、世界中の中でかなりの使用支持率の高いデータベース管理システムです
1、MySQLの設定
まず最初にXAMPPを起動しApacheとMySQLを起動します起動すると以下のようになります。
その後MySQLのAdminをクリックします。
すると、
のような画面が表示されます。
そしたら、左側にあるNEWをクリックします。
データベースを作成するが出たら以下のように設定していきました。
utf8_general_ci とは、アルファベットの大小の区別はしないモードです。
データベースが作成出来たら次は、テーブルの作成です。今回は、自分のデータを管理するので、userのテーブルを作成しカラム数（行列で表現さてる列の事）は、4にしました。
ポートフォリオサイトを作りなおしてみた 第1回
今回は、前回作ったポートフォリオよりもっと情報を絞ったポートフォリオサイトの作成と、Googleフォームの導入を行っていきます。
作成目的としては、自分のことを外から見た人にいかにわかりやすくまた、見やすくまたいかに出来そうな感じに見せられるを今回の作成の目的としてやっていこうと思います。
↓過去作
・今回使用したGoogleフォームとは、
Googleフォームとは、アンケートの作成、感想などの記入欄など簡易に作成できまた、HTMLのプログラムの中に簡易に挿入することが出来る便利なアイテムです。また、大学では、課題などの提出をGoogleフォームで行ったりしております。
・今回記入していこうと思っている内容
今回は、前回みたいに趣味などの内容は、特に入れず自分の事について、今まで触れてきたプログラミング言語今まで作成してきた成果物、お問い合わせの欄＋（もし余裕があれば何かしらの＋αを予定）を作成していきます。
・本編
まずソースプログラムです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自分分析シート</title>
</head>
<body>
<header id="header">
<h1>Portfolio Site</h1>
</header>
<?php
echo "<h1>氏名：ド素人</h1>";
echo"<h2>現職業：大学3年 情報学部所属</h2>";
echo"<h1>今現在持っている技術</h1>";
?>
<table border="5">
<tr>
<td>評価（令和2年4月28日時点）</td>
<td>かなりできる</td>
<td>できる</td>
<td>普通</td>
<td>怪しい</td>
<td>はじめたばかり</td>
</tr>
<tr>
<td></td>
<td></td>
<td>〇</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>〇</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>〇</td>
<td></td>
</tr>
<tr>
<td>HTML（学習歴半年）</td>
<td></td>
<td></td>
<td>〇</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>〇</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>〇</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>〇</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Go言語（学習歴1か月）</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>〇</td>
</tr>
</table>
<div class="butu">
<h1>今までの成果物</h1>
<p>今までの作成物はブログにまとめているので見てもらうとうれしいです→<a href="http://mychallengo.hatenablog.com/">ド素人のもの作り記憶の証</a></p>
</div>
<h1>もしよろしければ感想をお願いいたします。</h1>
</div>
</body>
</html>
見た目
Googleフォーム
・Googleフォームの作成方法
Googleフォームの作成は、かなり簡単に作成することが出来ます。
１、Googleフォームのアクセスする（Googleアカウントを持っている前提）
２、”Googleフォームを使ってみる”をクリック
３、デザインを選ぶ（空白も可）
４、質問orお問い合わせ欄の作成
５、右上の送信をクリックし自分に合った送信方法を選択
６、完成
以上6ステップで、Googleフォームを使うことが出来ます。
・今後の展望
・CSSなどでもう少し華やかなデザインにする
・jQueryを導入する
以上の2点を次回の記事にしていこうと思います。
今現在注意しなけらば行けない事（自分も含む）（２）
今回は、前回作成した、今現在コロナへの警告を自分い向けて作成していきました。また、今回は、それにたいして自分にもっとしっかりたたきつけたいと思います。
（メインページ）
メインページでは、コロナの危険性、コロナについて調べたことを書いていきました。その後に出かけるのかを聞く欄を聞き押したところに関連した所に飛ぶようにしてあります。そして最後に自分も含めて警告文を書いておきました。
（いいえを答えた時に飛ぶページ）
ここでは、前回作成したゲームのことについて書いていきました。しかし、よく見て見るとまぁ、見事に画像が入れてないですね、(記入時2020年4月19日）（その後修復できた模様2020年4月22日）
（泣く泣く）を答えた場合のサイト
ここでは、対策方法主に三密について書いていきました。その後にもし、状態が悪くなったとにどのレベルなのかわかるようなことを書いていきました。
ソースプログラムは、メインページと泣く泣くの所のサイトを記入していきます（ゲームの所は、前回作成したのを使用）
（メインページ（HTML））
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今の自分へ</title>
</head>
<body>
<div class="header">
<h1>僕と同じ先日まで新型コロナをなめている君へ </h1>
<p>自分も最近までは、無神経でしたが、以下の動画を見たら認識が変わりました。見るのをかなり推奨します。</p>
</div>
<div class="left">
<h2>本当に新型コロナは、危険なんです。</h2>
</div>
<div class="right">
<h3>新型コロナウィルス（COVID-19)は、過去にヒトで感染が確認されていなかった新種のコロナウイルスが原因と考えられる感染症です。<a href="https://family.saraya.com/kansen/coronavirus/index.html">https://family.saraya.com/kansen/coronavirus/index.html</a>より</h3>
<h1>何故危険なのか？</h1>
<ul>
<li><p>感染したことに気づかないそして急に体調が悪化し死ぬ可能性がかなり高い</p></li>
<li><p>高齢者も死亡率がかなり高いですが今現在若者も感染し死んでいる人もいる</p></li>
<li><p>感染源が分からない</p></li>
<li><p>集団感染の可能性がある</p></li>
</ul>
</div>
<h1>---------------------------------</h1>
<h1>個人的に見て危機感を覚えた動画</h1>
</div>
<div class="fin">
<h1>---------------------------------</h1>
<h1>今から出かけようとしている君へ・・・</h1>
<form action="No.html">
</form>
<form action="Yes.html">
</form>
<p>参考 <a href="https://webparts.cman.jp/button/submit/">https://webparts.cman.jp/button/submit/</a></p>
</div>
<div class="keikoku">
<h1>最後に・・・</h1>
<h2>これを見ているあなたへ。。。
今あなたが無駄な外出すれば関係のない人に感染させるリスク、家族への感染の可能性がありそれが起きた場合は、悪人になりもし友達と遊ぶのを我慢し無駄な外出を我慢して家にいればこのコロナ騒動が終った頃には、ヒーローだと思います。さぁ、あなたはどちらを選ぶ・・・</h2>
</div>
<div class="sankou">
<h5>参考サイト</h5>
<ul>
</ul>
</div>
<footer>
<p>(c)ド素人.com</p>
</footer>
</body>
</html>
（CSS)
.header{
/* font-size: 30px; */
background-color: red;
}
.left{
background-color: yellow;
width: 50%;
height: 70%;
float: left;
font-size: 45px;
color:red;
}
.right{
width: 50%;
height: 50%;
float: right;
background-color: black;
color: red;
}
.fin>h1{
font-size: 50px;
}
.button{
width: auto;
display : inline-block;
font-size : 18pt; /* 文字サイズ */
text-align : center; /* 文字位置 */
cursor : pointer; /* カーソル */
padding : 12px 12px; /* 余白 */
background : #000066; /* 背景色 */
color : #ffffff; /* 文字色 */
line-height : 1em; /* 1行の高さ */
transition : .3s; /* なめらか変化 */
box-shadow : 6px 6px 3px #666666; /* 影の設定 */
border : 2px solid #000066; /* 枠の指定 */
}
.button:hover {
box-shadow : none; /* カーソル時の影消去 */
color : #000066; /* 背景色 */
background : #ffffff; /* 文字色 */
}
.keikoku{
font-size: 30px;
color: red;
}
footer p{
text-align: center;
font-size:14px;
margin-bottom: 60px;
color:gray;
}
.button{
width: auto;
display : inline-block;
font-size : 18pt; /* 文字サイズ */
text-align : center; /* 文字位置 */
cursor : pointer; /* カーソル */
padding : 12px 12px; /* 余白 */
background : #000066; /* 背景色 */
color : #ffffff; /* 文字色 */
line-height : 1em; /* 1行の高さ */
transition : .3s; /* なめらか変化 */
box-shadow : 6px 6px 3px #666666; /* 影の設定 */
border : 2px solid #000066; /* 枠の指定 */
}
.button:hover {
box-shadow : none; /* カーソル時の影消去 */
color : #000066; /* 背景色 */
background : #ffffff; /* 文字色 */
}
ここの部分は、別サイト（https://webparts.cman.jp/button/submit/ ）
より参考していきましたか、この参考を通して、formなどのボタンもCSSを使用してデザイン変えられるんですね自分は、初めての経験でこれは、かなり面白いなと思いました。次回からも使用していこうと思います。
泣く泣くのページ（HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>対策</title>
</head>
<body bgcolor="black" text="#ccccc" >
<div class="Top">
<h1>対策方法</h1>
<h3>どうしても外に出なければいけない人もいます自分もアルバイトで外に出なきゃいけませんので、、、しかし本当に必要のない外出なら今からでもいいので考え直してください。</h3>
</div>
<div class="main">
<h2>まず、基本的守らないといけないことは、三密をさけることから始まります。</h2>
<h1>三密とは？</h1>
<ul>
<li>多くの人が集まる密集場所を避ける</li>
<li>近距離(2m以下)での会話、発生をする密接場面を避ける</li>
</ul>
<h2>以上の三点のことを避けることに注意しましょう</h2>
<img src="img/image2.jpg" alt="三密のポスター" height="950" width="950">
</div>
<div class="fainal">
<h2>もし外出後に調子が悪くなったらどうするのか？</h2>
<h2>コロナのサイン</h2>
<ul>
<li>(軽傷）発熱、せき、頭痛、のどの痛み</li>
<p>自宅で安静、十分な水分補給で治療しましょう</p>
<li>少し動いただけで呼吸が荒くなり強い倦怠感を感じる</li>
<p>即病院へ</p>
<li>呼吸がしにくく、体に十分酸素がいきわたってない</li>
<p>人工呼吸器が必要ですすぐ病院へ</p>
</ul>
<h3>もしも自分で、しっかり確認したい方は、以下の画像を参考にして下さい</h3>
<img src="img/コメント 2020-04-22 012228.jpg" alt="">
<h2>もし、他の状態で心配な方は、</h2>
</div>
<footer>
<p>(c)ド素人.com</p>
</footer>
</body>
</html>
（CSS)は、使っていないです。
この件に関しては、これで最後です。次回は、申し訳ないのですが、もう一回自分のポートフォリオと、掲示板の作成（DB（データベース））を使用してよりたいよ思います。
また、今後の野望として、Vue.jsに挑戦したい・・・（早くやる）
今現在注意しなけらば行けない事（自分も含む）
こんにちは、ド素人です。今回は、今現在緊急事態宣言が出されるほどまではやってしまって新型コロナウィルスについて自分も含めてのサイト作成を行っていきます。
行おうと思った経緯は、ニュースを見ていると今現在も若い人が出歩いているひとがいるので、自分も若い人の中にいるので、自分も含めてコロナの危険性を再認知していきたいと思いました。
今回は、特に新しい知識に挑戦するのではなく、今現在使える技術を使用して作成していきたいと思います。
今回は、シンプルかつ、いかに危険性が伝えられるのかをメインに作成していきました。基本的に人間は、黄色と赤色の組み合わせは、危険性を感じるので使用していきました。
（ソースプログラム）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今の自分へ</title>
</head>
<body>
<div class="header">
<h1>僕と同じ先日まで新型コロナをなめている君へ </h1>
</div>
<div class="left">
<h2>本当に新型コロナは、危険なのです。</h2>
</div>
<div class="right">
<h3>新型コロナウィルス（COVID-19)は、過去にヒトで感染が確認されていなかった新種のコロナウイルスが原因と考えられる感染症です。<a href="https://family.saraya.com/kansen/coronavirus/index.html">https://family.saraya.com/kansen/coronavirus/index.html</a>より</h3>
<h1>何故危険なのか？</h1>
<ul>
<li><p>感染したことに気づかないそして急に体調が悪化し死ぬ可能性がかなり高い</p></li>
<li><p>高齢者も死亡率がかなり高いですが今現在若者も感染し死んでいる人もいる</p></li>
<li><p>感染源が分からない</p></li>
<li><p>集団感染の可能性がある</p></li>
</ul>
</div>
<div class="fin">
<h1>今から出かけようとしている君へ・・・</h1>
<form action="No.html">
</form>
<form action="Yes,html">
</form>
</div>
<div class="keikoku">
<h1>最後に・・・</h1>
<h2>今あなたが外出すれば悪人になり家にいればヒーローになるさぁ、あなたはどちらを選ぶ・・・</h2>
</div>
<div class="sankou">
<ul>
</ul>
</div>
<footer>
<p>(c)ド素人.com</p>
</footer>
</body>
</html>
（CSS)
.header{
font-size: 30px;
background-color: red;
}
.left{
background-color: yellow;
float: left;
font-size: 30px;
color:red;
}
.right{
float: right;
}
.right>h1{
clear: red;
}
footer p{
text-align: center;
font-size:14px;
margin-bottom: 60px;
color:gray;
}
まだ、完成は、していませんが今現在新型コロナの影響で、大学の開始が5月11日まで伸びたのもあるので、自分もしっかり理解できるように作成していきたいと思います。
【Arduino】超音波センサーを使用した人の侵入を警告するようなものを作ってみた（仮）
今回は、超音波センサーを使用した人の侵入を警告するようなものを作ってみたいと思います。
今回作ってみようと思った経緯は、自分は、FATEシリーズが好きで、最近は、原作をやったことのないので、近いうちにお金の余裕が出たら買いたいのですが、FATEの原作は、もともとエ〇ゲーなので、大学生で実家暮らしの自分には、親の目線かなり気になる所でありますので、実家で安心してプレイできるようにしたいそれに伴い家にあるArduinoで何か作れないかと思い今回の作成に至りました。
【使用機器】
ArduinoUNO・・・1個
ブレッドボード・・・１個
３色LED・・・１個
抵抗２２０Ω・・・３個
超音波センサー・・・１個
ジャンパワイヤ（オス・オス）・・・９本
【配線した写真】
【プログラム】
今回プログラムしていくにあたって処理内容としては、超音波センサーよ読み取り５０.1CM以上なら青色で３色LEDが点灯し50.0CMから25.1CMの間に反応したら緑色に点灯します。
25.0cm以下は赤色が点灯するような処理でプログラムをスケッチしています。
//超音波センサー
#define echoPin 2 // Echo Pin
#define trigPin 3 // Trigger Pin
double zyusin = 0; //受信した間隔
double kyori = 0; //距離
//LED
const int redPin = 9;
const int greenPin = 6;
const int bluePin = 5;
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
pinMode( echoPin, INPUT );
pinMode( trigPin, OUTPUT );
pinMode(redPin, OUTPUT);
pinMode(greenPin, OUTPUT);
pinMode(bluePin, OUTPUT);
}
void loop() {
// put your main code here, to run repeatedly:
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite( trigPin, HIGH ); //超音波を出力
delayMicroseconds( 10 ); //
digitalWrite( trigPin, LOW );
zyusin = pulseIn( echoPin, HIGH ); //センサからの入力
if (zyusin > 0) {
zyusin = zyusin/2; //往復距離を半分にする
kyori = zyusin*340*100/1000000; // 音速を340m/sに設定
Serial.print("kyori:");
Serial.print(kyori);
Serial.println(" cm");
}
if(kyori>50.1){
setColor(255, 0, 0);
}
if(kyori<50.0&&kyori>25.1){
setColor(0, 255, 0);
}
if(kyori<25.0){
setColor(0, 0, 255);
}
delay(1000);
}
void setColor(int red, int green, int blue) {
analogWrite(redPin, red);
analogWrite(greenPin, green);
analogWrite(bluePin, blue);
}
５０CM以上の時
５０CM以下25.1以上の時
25CM以下の時
・計測の画面
のような反応が起きました。これからこの装置を起点にしてちょっと改良して使えるようにしたいと思いました。
【反省】
・無知すぎた
・超音波があまりよくない
・プログラムを見ての通り変数をローマ字にしている（英語雑魚）
以上のような反省があったので、次回までには、少しでも克服していきたいと思います。
【参考サイト】
・https://novicengineering.com/%E3%80%90arduino%E3%80%91rgb-led%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/
・https://deviceplus.jp/hobby/entry016/
ド素人が作る自分のポートフォリオサイト作成 第５回目 ～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
より参考して使用させていただきました。。
正直まだ、勉強不足なので、あまり説明できてはいないのですが、いじょうで終わります。ありがとうございました。
ド素人が作る自分のポートフォリオサイト作成 第４回目 ～jqueryへの挑戦編Vol.1～
今回は、ド素人が作る自分のポートフォリオサイト作成 第４回目 ～jqueryへの挑戦編Vol.1～と言う内容で行っていこうと思います。
ことの始まりは、自分自身が動きのあるサイトを作りたいと思ったからです。
1．jqueryについて
jqueryは、2006年に ジョン・レシグさんが開発しました。
導入効果としては、アニメーションや特殊効果を実装することが出来るjavascriptのライブラリです。
導入することでの特徴としては、
・マウスなどで画像の入れ替えアニメーションなどの導入
・文字入力の内容に応じて変わった返事を送れる。
・どんなブラウザでも対応可能！！
などです。
2．基本概念
jQueryは基本的にHTML要素（DOM要素）に対してどんな処理をしたいか？を書くような特徴です。
（例）：h1要素を文字変換を行いたい
(HTML)
<h1>おはようございます。</h1>
表示：おはようございます。
(jquery)
<script>$('h1').text('こんばんは');</script>
表示:おはようございます。からこんばんはに変わります。
3．今回の実装
今回の実装内容としては、自己紹介部分の背景の変換、眼鏡画像を消したり戻したりするアニメーション、自己紹介の所の以下からの現在の状態表示を行っていきました。
（ソースプログラム）
<!DOCTYPE html>
<html lang="ja">
<head>
<title>自己紹介サイト</title>
</head>
<body>
<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>
</header>
<div id="kesu">
<button>眼鏡を消すボタン</button>
</div>
<div cla="icon" id="imgs">
" width="120" height="120" alt="自分の眼鏡です">
</div>
<div class="info" id="info">
<h1>自己紹介</h1>
<li>氏名：ド素人太朗</li>
<li>職業：大学生</li>
<li>趣味：ゲーム、野球、プログラミング</li>
<li>今後の目標：もっと自由気ままにプログラミングを出来るようにする。</li>
<p>以下に自分の趣味について書いたところに飛べるような物があります。</p>
</div>
<div class="game" id="game"></div>
<!-- <p>自分の好きなゲームについてまとめた記事がコチラ</p> -->
<form action="game.html">
</form>
<!-- <p>自分の好きな野球チームについての記事がコチラ</p> -->
</form>
<div class="prog">
<!-- <p>・・・
</p> -->
<form action="prog.html" id="id">
</form>
</div>
<script> $('#kesu').on('click',function(){
$('#imgs').slideToggle(2000,function(){alert('眼鏡は消滅した。。。しかしもう一度押してみて欲しい');});
});</script>
});
</script>
</body>
</html>
（表示）
※この文は、かなり誤字を起こしています。
（正）「最近春休みだがコロナの影響でやることが減り何もできないので怠け者になったサイト作成者」です。申し訳ございません。
4.使ったAPI
.css():jQueryオブジェクトが保持しているDOM要素にCSSを設定したりする。
.on():
.click():クリックにによってアクションが起きる
.html():DOM要素に含まれているHTML 要素を返す。
.slideToggle():スライドの表示、非表示を行う
今回は、まだ始めたばかりのjqueryにつていまとめていきました。今後は、もう少しアクションを増やしたサイトを作成していこうと思います。
参考サイト
・http://www.kantenna.com/reference/jquery/api/
・https://api.jquery.com/category/ajax/shorthand-methods/
（jqueryをダウンロードしたサイトとAPI（英語）があります）
