# PHP学習サイトでレベル20の問題をごねってみた。ゴネゴネ(´Д｀)ｍ
[](https://zip358.com/wp-content/uploads/2015/01/poo11.jpg) 前回の記事で紹介した[PHP学習サイト](https://zip358.com/web%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E5%9F%BA%E7%A4%8E%E3%81%8C%E7%84%A1%E6%96%99%E3%81%A7%E5%AD%A6%E3%81%B9%E3%81%BE%E3%81%99%D0%B4%EF%BD%80%E3%80%82.html)でレベル20の問題を解いてみました。実際、学習サイトでは解かなかったのですが一応、サンプルサイトを作ってみました（※最新のブラウザでしか表示されません）。作るにあたって苦になった所はゼロです(ΦωΦ)ﾌﾌﾌ…。HTML5のFormタグ書いてｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)。して送信しています。POSTで送信して自分自身でキャチした値を表示しています。かなり文字などは見えにくいですが、お遊びで作ったのでユーザー側の操作性などは知らんぷりです。送信ボタン押下後、一回ページが再度読み込まれたり違うページが読み込まれて処理される処理のことを同期処理といいます。じゃ非同期処理はどんなのっていうのを、今度、サンプルサイトを作ってみることにします。今回、重要なポイントはformタグ部分とPHPの処理部分です。その他はおまけです。※今回のサンプルコードで見て欲しかったのは、送信した時にHTMLタグなど記入されていたら変換している事とtextareaに改行コードが入っていたら改行して表示させているトコロがポイントです。あとの背景に動画流しているとか、そういうのはε-(´∀｀\*)ﾎｯといてください自己満足の世界ですから・・・。 サンプルサイトを貼っときます。 <https://zip358.com/tool/sample-echo/index.php>必要なファイル 同じ階層に必要なファイルindex.php,vide01.mp4(フリーの動画を引っ張ってきました(^^)） index.php ```
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>zip358.com:sample-echo?</title>
<style>
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}
textarea{
width:250px;
height:300px;
}
#main{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:650px;
height:600px;
background:#556B2F;
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 40px;
}
#sub{
width:250px;
height:400px;
overflow: scroll;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
background:#fff;
color:#DC143C;
font-size:16px;
}
form{
margin: 50px;
}
input,textarea{
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
color:#DC143C;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<?php
?>
<video autoplay="" loop="" >
<source src="./vide01.mp4" type="video/mp4">
</video>
<div id="main">
<table>
<tr>
<td>
<form action="./index.php" method="post">
<input type="text" / name="name"><br><br>
<textarea name="msg"></textarea><br><br>
<input type="submit" /><br>
</div>
</form>
</td>
<td>
<div id="sub">
<?php
echo htmlspecialchars($_POST["name"])."<br><br>".nl2br(htmlspecialchars($_POST["msg"]));
?>
</td>
</tr>
</div>
</body>
</html>
```
[  サイトを分離した話を黙々と書いていきます.
](https://zip358.com/2026/02/04/%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e5%88%86%e9%9b%a2%e3%81%97%e3%81%9f%e8%a9%b1%e3%82%92%e9%bb%99%e3%80%85%e3%81%a8%e6%9b%b8%e3%81%84%e3%81%a6%e3%81%84%e3%81%8d%e3%81%be%e3%81%99.html)
[  半額セールでアドビ様を延長.
](https://zip358.com/2026/02/03/%e5%8d%8a%e9%a1%8d%e3%82%bb%e3%83%bc%e3%83%ab%e3%81%a7%e3%82%a2%e3%83%89%e3%83%93%e6%a7%98%e3%82%92%e5%bb%b6%e9%95%b7.html)
[  何の前触れもなく変えたのは初めてかも.
](https://zip358.com/2026/02/02/%e4%bd%95%e3%81%ae%e5%89%8d%e8%a7%a6%e3%82%8c%e3%82%82%e3%81%aa%e3%81%8f%e5%a4%89%e3%81%88%e3%81%9f%e3%81%ae%e3%81%af%e5%88%9d%e3%82%81%e3%81%a6%e3%81%8b%e3%82%82.html)
[  跳ねたいサイトで跳ねたい
](https://zip358.com/2026/02/01/%e8%b7%b3%e3%81%ad%e3%81%9f%e3%81%84%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7%e8%b7%b3%e3%81%ad%e3%81%9f%e3%81%84.html)
[  映画、機動戦士ガンダム 閃光のハサウェイ キルケーの魔女
](https://zip358.com/2026/01/31/%e6%98%a0%e7%94%bb%e3%80%81%e6%a9%9f%e5%8b%95%e6%88%a6%e5%a3%ab%e3%82%ac%e3%83%b3%e3%83%80%e3%83%a0-%e9%96%83%e5%85%89%e3%81%ae%e3%83%8f%e3%82%b5%e3%82%a6%e3%82%a7%e3%82%a4-%e3%82%ad%e3%83%ab%e3%82%b1.html)