プログラミング

プログラミングに関するフォーラムです。VBAは除きます。
  • 掲示板への投稿には会員登録(無料)が必要です。会員登録がまだの方はこちら
  • 掲示板ご利用上のお願い」に反するご記入はご遠慮ください。
  • Q&A掲示板の使い方はこちらをご覧ください
トピックに返信
質問

 
(Windows 10 Home : Web開発言語)
html でセルの中の数字の上添え字(左上隅表示)がうまくいかない
投稿日時: 22/11/03 21:59:02
投稿者: oyoyo_president

以下のようなクロスワード表示のhtmlで、マスの中の数字を左上隅に配置したいのですが
どうやってもセンタのままです。
ネットを参考にsoejiの中の定義をいろいろ変えてみましたが上手く行きません。
CSSの中で効率的にやりたい(ファイルサイズを小さくしたい)ので、CSS以外に直接埋め込むのはNGです。
ご教示をお願いします。是非、htmlファイルにして実行してからご教示願えればありがたいです。
 
----------------切り取り線----------------------------------------------
<!-- 1_SKELTON_kanji_buta_dic.html HEAD -->
<html>
<head>
<meta charset="Shift_JIS">
<style type="text/css">
.table-css {
    table-layout: fixed;
    width: 150 ;
    border-collapse: collapse;
}
td {
    width: 30;
    height: 30;
    text-align: center;
}
soeji {
    font-size: 0.2em;
    align: left;
    valign: top;
}
span {
    color:white;
}
.td-toumei {
    border-style:none;
}
.td-k0100 {
    border: solid black;
    border-width: 4px 1px 4px 4px;
}
.td-k0001 {
    border: solid black;
    border-width: 4px 4px 4px 1px;
}
.td-k1000 {
    border: solid black;
    border-width: 1px 4px 4px 4px;
}
.td-k0010 {
    border: solid black;
    border-width: 4px 4px 1px 4px;
}
.td-k1100 {
    border: solid black;
    border-width: 1px 1px 4px 4px;
}
.td-k0011 {
    border: solid black;
    border-width: 4px 4px 1px 1px;
}
.td-k0110 {
    border: solid black;
    border-width: 4px 1px 1px 4px;
}
.td-k1001 {
    border: solid black;
    border-width: 1px 4px 4px 1px;
}
.td-k0101 {
    border: solid black;
    border-width: 4px 1px 4px 1px;
}
.td-k1010 {
    border: solid black;
    border-width: 1px 4px 1px 4px;
}
.td-k1111 {
    border: solid black;
    border-width: 1px 1px 1px 1px;
}
.td-k1110 {
    border: solid black;
    border-width: 1px 1px 1px 4px;
}
.td-k0111 {
    border: solid black;
    border-width: 4px 1px 1px 1px;
}
.td-k1011 {
    border: solid black;
    border-width: 1px 4px 1px 1px;
}
.td-k1101 {
    border: solid black;
    border-width: 1px 1px 4px 1px;
}
</style>
</head>
<body>
<div style="page-break-inside: avoid; margin: 0 20px 20px 0; float:left;">
<br>
<table class="table-css" border="0" cellpadding="0" cellspacing="0">
<caption align="top">【スケルトンパズル 問題】1_kanji_buta_dic</caption>
<tr>
<td class="td-k0010 " ><soeji> 1</soeji></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010 " ><soeji> 2</soeji></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-k1100 " ><soeji> 3</soeji></td>
<td class="td-k0101" > </td>
<td class="td-k1111" > </td>
<td class="td-k0001" > </td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1010" > </td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010 " ><soeji> 4</soeji></td>
</tr>
<tr>
<td class="td-k0110 " ><soeji> 5</soeji></td>
<td class="td-k0101" > </td>
<td class="td-k1111" > </td>
<td class="td-k0101" > </td>
<td class="td-k1011" > </td>
</tr>
<tr>
<td class="td-k1000" > </td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" > </td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" > </td>
</tr>
</table>
</div>
</body>
<html>
<!-- 1_SKELTON_kanji_buta_dic.html END -->
<html>
<head>
<meta charset="Shift_JIS">
<style type="text/css">
.table-css {
    border-collapse: collapse;
}
.td-toumei {
    border-style:none;
}
.td-kakomu {
    border-style:solid; border-color:black;
}
</style>
</head>
<body>
<div style="page-break-inside: avoid; margin: 0 20px 20px 0; float:left;">
<br>
[横のカギ]<br>
(3):だてきみこ【人名】<br>
(5):じこそしきか<br>
<br>
[縦のカギ]<br>
(1):きい【地名】<br>
(2):ひこうかいそしき<br>
(4):ぶんかろん<br>
(5):じちゆう{じちゅう}<br>
</div>
</body>
<html>
<!-- 1_SKELTON_kanji_buta_dic.html HEAD -->
<html>
<head>
<meta charset="Shift_JIS">
<style type="text/css">
.table-css {
    table-layout: fixed;
    width: 150 ;
    border-collapse: collapse;
}
td {
    width: 30;
    height: 30;
    text-align: center;
}
soeji {
    font-size: 0.2em;
    align: left;
    valign: top;
}
span {
    color:white;
}
.td-toumei {
    border-style:none;
}
.td-k0100 {
    border: solid black;
    border-width: 4px 1px 4px 4px;
}
.td-k0001 {
    border: solid black;
    border-width: 4px 4px 4px 1px;
}
.td-k1000 {
    border: solid black;
    border-width: 1px 4px 4px 4px;
}
.td-k0010 {
    border: solid black;
    border-width: 4px 4px 1px 4px;
}
.td-k1100 {
    border: solid black;
    border-width: 1px 1px 4px 4px;
}
.td-k0011 {
    border: solid black;
    border-width: 4px 4px 1px 1px;
}
.td-k0110 {
    border: solid black;
    border-width: 4px 1px 1px 4px;
}
.td-k1001 {
    border: solid black;
    border-width: 1px 4px 4px 1px;
}
.td-k0101 {
    border: solid black;
    border-width: 4px 1px 4px 1px;
}
.td-k1010 {
    border: solid black;
    border-width: 1px 4px 1px 4px;
}
.td-k1111 {
    border: solid black;
    border-width: 1px 1px 1px 1px;
}
.td-k1110 {
    border: solid black;
    border-width: 1px 1px 1px 4px;
}
.td-k0111 {
    border: solid black;
    border-width: 4px 1px 1px 1px;
}
.td-k1011 {
    border: solid black;
    border-width: 1px 4px 1px 1px;
}
.td-k1101 {
    border: solid black;
    border-width: 1px 1px 4px 1px;
}
</style>
</head>
<body>
<div style="page-break-inside: avoid; margin: 0 20px 20px 0; float:left;">
<br>
<table class="table-css" border="0" cellpadding="0" cellspacing="0">
<caption align="top">【スケルトンパズル 回答】1_kanji_buta_dic</caption>
<tr>
<td class="td-k0010" >紀</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010" >非</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-k1100" >伊</td>
<td class="td-k0101" >達</td>
<td class="td-k1111" >公</td>
<td class="td-k0001" >子</td>
<td class="td-toumei" ><span>.</span></td>
</tr>
<tr>
<td class="td-toumei" ><span>.</span></td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1010" >開</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k0010" >文</td>
</tr>
<tr>
<td class="td-k0110" >自</td>
<td class="td-k0101" >己</td>
<td class="td-k1111" >組</td>
<td class="td-k0101" >織</td>
<td class="td-k1011" >化</td>
</tr>
<tr>
<td class="td-k1000" >註</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" >織</td>
<td class="td-toumei" ><span>.</span></td>
<td class="td-k1000" >論</td>
</tr>
</table>
</div>
</body>
<html>
<!-- 1_SKELTON_kanji_buta_dic.html END -->

回答
投稿日時: 22/11/04 10:24:52
投稿者: taitani
投稿者のウェブサイトに移動

テーブルの CSS に以下を追記すると可能と思います。
’---------------------
    vertical-align:top;
    text-align:left;
’---------------------
※ただし、数字と他の文字列も同様に変化しますので、スタイルをわける必要がありますね。

トピックに返信