テーブル全体を画面いっぱいに広げ、その中にあるtextarea（テキストエリア）もセルいっぱいに最大化するには、テーブルとテキストエリアの両方に適切なサイズ指定（width / height）と、余白の相殺（box-sizing）を設定するのが最も確実です。
以下に、コピペでそのまま使えるHTMLとCSSの記述例を解説付きで紹介します。
📋 実装コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルとテキストエリアの画面最大化</title>
<style>
/* 1. 画面全体の余白を無くし、高さを100%にする */
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* 2. テーブルを画面いっぱいに広げる */
.full-screen-table {
width: 100%;
height: 100%;
border-collapse: collapse; /* 枠線の隙間をなくす */
table-layout: fixed; /* セルの幅・高さを均等に保ちやすくする */
}
.full-screen-table th,
.full-screen-table td {
border: 1px solid #ccc;
padding: 0; /* 💡 セルの内側余白を0にして隙間をなくす */
vertical-align: top; /* 上揃え（必要に応じて変更してください） */
}
/* 3. テキストエリアをセルいっぱいに広げる */
.full-size-textarea {
width: 100%;
height: 100%;
border: none; /* テキストエリア自体の枠線が不要なら消す */
resize: none; /* ユーザーによる手動サイズ変更を禁止する（任意） */
padding: 10px; /* テキストエリア内の文字の余白 */
box-sizing: border-box; /* 💡 paddingを含めて100%のサイズにする */
display: block; /* 下部にできる謎の隙間を解消する */
}
</style>
</head>
<body>
<table class="full-screen-table">
<tr>
<th>見出し</th>
<td>
<!-- セルいっぱいに広がるテキストエリア -->
<textarea class="full-size-textarea" placeholder="ここに文字を入力してください..."></textarea>
</td>
</tr>
</table>
</body>
</html>
💡 重要なポイント
html, bodyのheight: 100%
ブラウザの画面縦幅いっぱいに要素を広げるためには、親要素であるhtmlとbodyタグにも高さ100%を指定する必要があります。tdのpadding: 0
セル（td）自体に初期設定の余白があると、テキストエリアとの間に隙間ができてしまいます。これを0にして密着させます。textareaのbox-sizing: border-box
これを指定しないと、テキストエリアに設定したpadding（内側の余白）の分だけテキストエリアがセルからはみ出してしまいます。textareaのdisplay: blocktextareaは初期状態がインライン要素（inline-block）のため、セルの底辺との間に数ピクセルの隙間が空いてしまいます。ブロック要素に変換することでこれを防ぎます。
もし特定の行や列だけを大きくしたい、あるいは複数行あるうちの1つだけを最大化したいなどの条件があれば、さらに詳しい構成を教えてください。追加のCSS調整をご提案します。
AI による概要
Web画面いっぱいにテーブルとテキストエリアを広げるには、html, body, table に対して height: 100% を設定し、td に position: relative、内部の textarea に position: absolute と width: 100%, height: 100% を指定するのが確実です。 [1]
サンプルコード
HTML
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Full Screen Textarea</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table class="full-table">
<tr>
<td>
<textarea class="full-textarea" placeholder="ここに入力"></textarea>
</td>
</tr>
</table>
</body>
</html>
コードは注意してご使用ください。
CSS (style.css)
css
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 画面スクロールを出さない場合 */
}
.full-table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
.full-table td {
position: relative; /* 子要素の絶対配置の基準にする */
padding: 0; /* 余白をなくしてセルいっぱいに広げる */
}
.full-textarea {
position: absolute; /* セル枠に対して絶対配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box; /* paddingやborderを含めて100%にする */
resize: none; /* ユーザーによる手動リサイズを禁止する場合 */
border: none; /* 必要に応じて枠線を消す */
}
コードは注意してご使用ください。
ポイント
- 高さの継承:
htmlとbody、さらにtableにもheight: 100%を指定しないと、中のheight: 100%や絶対配置が正しく機能しません。 - 絶対配置の活用:
tdにposition: relative、textareaにposition: absoluteを使うことで、テーブル特有の余白や行の高さの自動調整の影響を受けずに画面やセルいっぱいに引き伸ばせます。 box-sizing: border-box: 指定しておくと、枠線やパディングを足してもはみ出さなくなります。 [1, 2, 3]
もし、テーブルに他の行（ヘッダーやボタンなど）があって「残りの高さいっぱい」に広げたい場合や、スクロールを出したい場合は、レイアウトを調整しますので教えてください。
コメント