縦書きでどんなことができるかのチェック。11月5日記事
イメージ
縦書きのレイアウトでなおかつ、縦書きでどのようなことができるかをチェックしていきたいと思います。
番号問題の数字は横書きで、問題文や解答は縦書きでやっていきます。
register.php
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>縦書き登録</title> </head> <body> <form action="index.php" method="post"> <input type="text" name="num[1]"> <textarea name="problem[1]" cols="20" rows="4"></textarea> <textarea name="answer[1]" cols="20" rows="4"></textarea> <br> <input type="text" name="num[2]"> <textarea name="problem[2]" cols="20" rows="4"></textarea> <textarea name="answer[2]" cols="20" rows="4"></textarea> <input type="submit" name="submit"> </form> </body> </html>
index.php。インデントがなぜかおかしく適用されていますがご了承ください。CSSの方を見て頂ければと思います。
<?php $num1 = $_POST["num"][1]; $problem1 = $_POST["problem"][1]; $answer1 = $_POST["answer"][1]; $num2 = $_POST["num"][2]; $problem2 = $_POST["problem"][2]; $answer2 = $_POST["answer"][2]; ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="tate.css"> <title>縦書き</title> </head> <body> <div id="wrapper"> <section> <article class="list"> <dl> <dt><?php echo htmlspecialchars($num1,ENT_QUOTES,"UTF-8"); ?></dt> <dd> <ul> <li class="probrem"><?php echo nl2br(htmlspecialchars($problem1 , ENT_QUOTES,"UTF-8")); ?></li> <li class="write"></li> <li class="answer"><?php echo nl2br(htmlspecialchars($answer1,ENT_QUOTES,"UTF-8")); ?></li> </ul> </dd> </dl> </article> <article class="list"> <dl> <dt><?php echo htmlspecialchars($num2,ENT_QUOTES,"UTF-8"); ?></dt> <dd> <ul> <li class="probrem"><?php echo nl2br(htmlspecialchars($problem2,ENT_QUOTES,"UTF-8")); ?></li> <li class="write"></li> <li class="answer"><?php echo nl2br(htmlspecialchars($answer2,ENT_QUOTES,"UTF-8")); ?></li> </ul> </dd> </dl> </article> </section> </div> </body> </html>
CSS
@charset "utf-8"; /* CSS Document */ #wrapper{ width: 1000px; height: 1000px; border: 1px solid #000; background: #CCC; margin: 10px auto; } #wrapper section article.list{ float:right; background: #fcc; width: 98px; height:998px; border:1px solid #000; } #wrapper section article.list dt{ background: #cfc; width: 78px; height:30px; text-align: center; padding: 10px; } #wrapper section article.list ul li{ writing-mode: tb-rl; /* IEではこのように表記 */ writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; } #wrapper section article.list ul li.num{ background: #cfc; width: 98px; height:1000px; } #wrapper section article.list ul li.probrem{ background: #ccf; width: 78px; height:580px; padding: 10px; } #wrapper section article.list ul li.write{ background: #ffc; width: 78px; height:180px; padding: 10px; } #wrapper section article.list ul li.answer{ background: #cff; width: 78px; height:128px; padding: 10px; }