💈
CSSで縦書きですぞ
Web書道とやらが終了していてかなしかったのでそれに着想を得、
遊んだ
縦書きという知識
Google Fontを有り難く使用
ソース抜粋
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS フォント</title>
<!-- https://googlefonts.github.io/japanese/ -->
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet">
<style>
body {
color:#630;
font-size:5em;
}
p.font1{
font-family: cursive;
}
p.font2{
font-family: serif;
}
p.font3{
font-family: "Nikukyu";
}
p.font4{
font-family: "Hannari";
}
/* 縦書き */
.v-writing {
writing-mode: vertical-rl;
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<div class="v-writing">
<p class="font1" id="output_message1">fantasy</p>
<p class="font2" id="output_message2">serif</p>
<p class="font3" id="output_message3">fantasy</p>
<input type="text" id="input_message" size="20" maxlength="100" value="おこさまランチ">
<p class="font4" id="output_message4">fantasy</p>
<div id="output_message"></div>
</div>
<script language="javascript" type="text/javascript">
function main() {
var input_message = document.getElementById("input_message").value;
document.getElementById("output_message").innerHTML = input_message;
document.getElementById("output_message1").innerHTML = input_message;
document.getElementById("output_message2").innerHTML = input_message;
document.getElementById("output_message3").innerHTML = input_message;
document.getElementById("output_message4").innerHTML = input_message;
}
document.getElementById("input_message").onchange = main;
window.onload = main;
</script>
</body>
</html>
全体
その後こんなのを発見したので引き続き探求する
自分でフォントファイルを置くには以下。
複数ならこう
@font-face {
font-family: 'MyFontreisyo';
src: url('./fonts/aoyagireisyosimo_otf_2_01.otf') format("opentype");
}
@font-face {
font-family: 'MyFontsoseki';
src: url('./fonts/AoyagiSosekiFont2.otf') format("opentype");
}
Discussion