「CSSで縦書き開発2～PHPとHTML5とCSS3で漢字学習システムのレイアウト作り～」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
縦書きでどんなことができるかのチェック。11月5日記事
~
~
イメージ
※わかりやすく色分けしています。
~
~
目次
#contents
~
~
----
~
*概要
縦書きのレイアウトでなおかつ、縦書きでどのようなことができるかをチェックしていきたいと思います。
番号問題の数字は横書きで、問題文や解答は縦書きでやっていきます。
~
~
*コード
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
+reset.cssを読み込んでいます。
+tate.cssは以下
@charset "utf-8";
/* CSS Document */
#wrapper{
width: 1002px;
height: 1002px;
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;
}
~
~
*課題と展望
+vertical-alignはfloatで適用できないため、右から書いていくためにfloat:rightするとvertical-alignが当然適用できない。text-alignは適用できる。vertical-alignを適用するためにdisplay:table-cellをすると適用できるが右寄せできない。
+中心に書いていくためにwidthを書かずにpaddingだけでやっていくと、今度はwriting-modeは適用できないため（writing-modeはwidthが必要）、widthが必要。
+よって、文章を中央に寄せたりするためには、文字のサイズを把握してwidthを組む必要あり？
+PHPで縦に表示できる文字数を限定させるというのも一つの方法かも。
~
~
以上
縦書きでどんなことができるかのチェック。11月5日記事
~
~
イメージ
&image(width=500,tate_problem.png)
※わかりやすく色分けしています。
~
~
目次
#contents
~
~
----
~
*概要
縦書きのレイアウトでなおかつ、縦書きでどのようなことができるかをチェックしていきたいと思います。
番号問題の数字は横書きで、問題文や解答は縦書きでやっていきます。
~
~
*コード
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
+reset.cssを読み込んでいます。
+tate.cssは以下
@charset "utf-8";
/* CSS Document */
#wrapper{
width: 1002px;
height: 1002px;
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;
}
~
~
*課題と展望
+vertical-alignはfloatで適用できないため、右から書いていくためにfloat:rightするとvertical-alignが当然適用できない。text-alignは適用できる。vertical-alignを適用するためにdisplay:table-cellをすると適用できるが右寄せできない。
+中心に書いていくためにwidthを書かずにpaddingだけでやっていくと、今度はwriting-modeは適用できないため（writing-modeはwidthが必要）、widthが必要。
+よって、文章を中央に寄せたりするためには、文字のサイズを把握してwidthを組む必要あり？
+PHPで縦に表示できる文字数を限定させるというのも一つの方法かも。
~
~
以上
