縦書きでどんなことができるかのチェック。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

  1. reset.cssを読み込んでいます。
  2. tate.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;
    }
    


課題と展望

  1. vertical-alignはfloatで適用できないため、右から書いていくためにfloat:rightするとvertical-alignが当然適用できない。text-alignは適用できる。vertical-alignを適用するためにdisplay:table-cellをすると適用できるが右寄せできない。
  2. 中心に書いていくためにwidthを書かずにpaddingだけでやっていくと、今度はwriting-modeは適用できないため(writing-modeはwidthが必要)、widthが必要。
  3. よって、文章を中央に寄せたりするためには、文字のサイズを把握してwidthを組む必要あり?
  4. すると改行は表示が崩れるので、PHPで縦に表示できる文字数を限定させるというのも一つの方法かも。

    以上
最終更新:2015年11月09日 11:23
添付ファイル