postnote

■ ゲーム系設定資料＿全部
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキストエリア内検索・移動サンプル（改善版）</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }
textarea {
width: 500px;
height: 200px;
font-size: 16px; /* 計算のためピクセル指定を推奨 */
line-height: 1.5; /* 行の高さを設定 */
}
input[type="text"] { padding: 5px; }
input[type="button"] { padding: 5px 10px; cursor: pointer; }
</style>
</head>
<body>

<h1>テキストエリア内検索 & ジャンプ機能（改善版）</h1>

<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
</div>

<textarea id="mainTextarea"></textarea>
</div>

<script>
const textarea = document.getElementById('mainTextarea');
const searchInput = document.getElementById('searchInput');
let lastFoundIndex = -1;
let lastKeyword = '';

// テキストエリアに例文を5回挿入
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。\n例えば、このように検索ボタンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」ボタンを押すと、次の「キーワード」に移動します。\nJavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
textarea.value = sampleText.repeat(5);

function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}

if (keyword !== lastKeyword) {
lastFoundIndex = -1;
lastKeyword = keyword;
}

const foundIndex = textarea.value.indexOf(keyword, lastFoundIndex + 1);

if (foundIndex !== -1) {
lastFoundIndex = foundIndex;

// --- ここからがスクロール処理の改善点 ---

// 1. CSSから行の高さを取得
const style = window.getComputedStyle(textarea);
const lineHeight = parseFloat(style.lineHeight);

// 2. 見つかった位置までのテキストを取得し、行数を数える
const textToFound = textarea.value.substring(0, foundIndex);
const lineCount = textToFound.split('\n').length;

// 3. スクロール位置を計算して設定
// (行数 - 1) * 行の高さで、その行の開始位置のピクセル値が求まる
textarea.scrollTop = (lineCount - 1) * lineHeight;

// --- ここまで ---

// 選択範囲の設定とフォーカス
textarea.focus();
textarea.setSelectionRange(foundIndex, foundIndex + keyword.length);

} else {
alert('これ以上見つかりません。先頭から再度検索します。');
lastFoundIndex = -1;
}
}
</script>

</body>
</html>kensaku-2
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【確実な解決策】contenteditable と scrollIntoView</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }

/* 編集エリアをテキストエリアそっくりに見せるスタイル */
.editable-area {
width: 500px;
height: 200px;
border: 1px solid #767676;
padding: 8px;
overflow: auto; /* スクロールバーを表示 */
font-size: 16px;
line-height: 1.5;
background-color: white;
white-space: pre-wrap; /* 改行とスペースを保持し、自動折り返しも行う */
}
/* 検索で見つかった箇所をハイライトするスタイル */
.highlight {
background-color: #ff0;
border-radius: 3px;
}
</style>
</head>
<body>

<h1>【確実な解決策】編集エリア内検索 & ジャンプ機能</h1>

<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
</div>
<div id="editor" class="editable-area" contenteditable="true"></div>
</div>

<script>
const editor = document.getElementById('editor');
const searchInput = document.getElementById('searchInput');

// 例文を挿入
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。例えば、このように検索ボタンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」ボタンを押すと、次の「キーワード」に移動します。JavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
editor.innerText = sampleText.repeat(5); // innerTextで改行を正しく反映

let currentMatches = []; // 見つかったキーワードのspan要素を保持する配列
let currentIndex = -1; // 現在ハイライトしている要素のインデックス

function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}

// 検索キーワードが変わったか、まだ検索していなければ、検索をやり直す
if (currentMatches.length === 0 || editor.dataset.lastKeyword !== keyword) {
removeHighlights();
editor.dataset.lastKeyword = keyword; // 検索したキーワードを記録

const regex = new RegExp(keyword, 'gi');
editor.innerHTML = editor.innerText.replace(regex, `${keyword}`);

// マッチした全てのspan要素を配列に格納
currentMatches = Array.from(editor.querySelectorAll('.highlight'));
currentIndex = -1;
}

if (currentMatches.length === 0) {
alert('キーワードが見つかりませんでした。');
return;
}

// 次の要素へインデックスを進める（末尾まで行ったら先頭に戻る）
currentIndex = (currentIndex + 1) % currentMatches.length;

const currentElement = currentMatches[currentIndex];

// --- ★★★ これが最も確実なスクロール命令です ★★★ ---
currentElement.scrollIntoView({
behavior: 'smooth', // スムーズにスクロール
block: 'center' // 要素を中央に表示
});

// 強調のため、現在地の背景色を少し変える
currentMatches.forEach(el => el.style.backgroundColor = '#ff0'); // 他をリセット
currentElement.style.backgroundColor = '#ffa500'; // 現在地はオレンジに
}

function removeHighlights() {
// ハイライト用のspanを全て解除して、元のテキストに戻す
editor.innerHTML = editor.innerText;
}
</script>

</body>
</html>kensaku-1
├ 主要変更
・UTF-8 全面UTF-8化
　・段階をおいての確認：文字化け確認
　・段階をおいての確認：出力ファイルの文字コード確認
　・段階をおいての確認：絵文字

・レイアウト変更
　・Javascript外ファイルを全部内側に変更
　・アイフォン、アンドロイド、パソコンそれぞれの配置確認　

・ボタン関連
　・Perlボタン　は「-file:作成」ボタンへ
　・保存ボタン　保存して終了　から　保存してそのまま修正継続　へ内容変更
　・クリアボタン内容クリアのボタン
　・コピーボタン内容クリップボードコピーのボタン
　・URLのリンクを付けるボタン
　・ファイル名連番コピー　選択した物１つだけ、内容は空で、後ろの数値＋１の新しい物を作成する。
　・マークダウンプレビュー
　・コード解説AIボタン
　・実行環境切り替えボタン

以下はしない
・QRコード
・選択検索
・選択地図　
・縦書き

Ctrl + Shift + R（または Shift + 更新ボタン）でキャッシュを無視して再読み込みkeijiban--やること
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>長い2カラム Grid レイアウト</title>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: sans-serif;
}

.container {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh; /* ビューポート高を最小にして、内容が伸びれば拡張 */
}

header {
background: #4caf50;
color: white;
padding: 1rem;
text-align: center;
}

main {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1rem;
padding: 1rem;
align-items: start;
}

.sidebar {
background: #f0f0f0;
padding: 1rem;
}

.content {
background: #e0f7fa;
padding: 1rem;
}

footer {
background: #333;
color: white;
text-align: center;
padding: 0.5rem;
}

/* 長いダミーコンテンツ用 */
.long-text {
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<header>ヘッダー</header>

<main>
<div class="sidebar">
<h2>サイドバー</h2>
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
</div>

<div class="content">
<h2>メインコンテンツ</h2>
<div class="long-text">

これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。

</div>
</div>
</main>

<footer>フッター</footer>
</div>
</body>
</html>
２カラムテスト２
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 2カラムレイアウト</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}

.container {
display: grid;
grid-template-rows: auto 1fr auto; /* ヘッダー, メイン, フッター */
height: 100vh;
}

header {
background: #4caf50;
color: white;
padding: 1rem;
text-align: center;
}

main {
display: grid;
grid-template-columns: 1fr 3fr; /* サイドバー:メインコンテンツ = 1:3 */
gap: 1rem;
padding: 1rem;
}

.sidebar {
background: #f0f0f0;
padding: 1rem;
}

.content {
background: #e0f7fa;
padding: 1rem;
}

footer {
background: #333;
color: white;
text-align: center;
padding: 0.5rem;
}
</style>
</head>
<body>

<div class="container">
<header>ヘッダー</header>

<main>
<div class="sidebar">サイドバー</div>
<div class="content">メインコンテンツ</div>
</main>

<footer>フッター</footer>
</div>

</body>
</html>
２カラムテスト１
├ 非公開gemini解析２
├ 非公開gemini解析
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
<style>
textarea {
width: 100%;
height: 100px;
}
button {
margin-top: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>掲示板</h1>
<form id="bbsForm">
<textarea id="message" placeholder="メッセージを入力してください"></textarea> 
<button type="button" onclick="decorateText('[b]', '[/b]')">太字</button>
<button type="button" onclick="decorateText('[i]', '[/i]')">斜体</button>
<button type="button" onclick="decorateText('[color=red]', '[/color]')">赤文字</button>
<button type="button" onclick="copyText()">コピー</button>
<button type="button" onclick="clearText()">クリア</button>
<button type="submit">送信</button>
</form>

<script>
function decorateText(prefix, suffix) {
const textarea = document.getElementById("message");
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selected = textarea.value.substring(start, end);
const newText = prefix + selected + suffix;
textarea.setRangeText(newText, start, end, 'end');
textarea.focus();
}

function copyText() {
const textarea = document.getElementById("message");
textarea.select();
document.execCommand("copy");
alert("コピーしました");
}

function clearText() {
document.getElementById("message").value = "";
}
</script>
</body>
</html>keijiban-test1
├ Git入門 - Speaker Deck
├ 【図解解説】これ1本でGitをマスターできるチュートリアル！【完全版】
├ 非公開style.css サイドを25％案
├ 非公開style.css 元ファイル
├ PerlでXMLRPC::Liteを使用して、FC2ブログに新しいカテゴリを作成する方法について説明します。XMLRPC::Liteは、XML-RPCリクエストを簡単に送信するためのPerlモジュールです。

以下は、Perlを使ってFC2ブログに新しいカテゴリを作成する方法の具体例です。

必要な準備
Perlの環境が整っていること

Perlがインストールされている必要があります。
XMLRPC::Liteモジュールのインストール

XMLRPC::Liteモジュールをインストールするには、CPANを使います。以下のコマンドでインストールできます。

cpan XMLRPC::Lite

Perlコード例
以下のコードは、FC2ブログに新しいカテゴリを追加するためのXML-RPCリクエストを送信するものです。

use strict;
use warnings;
use XMLRPC::Lite;

# FC2 XML-RPCエンドポイントURL
my $url = 'https://blog.fc2.com/xmlrpc/';

# FC2の認証情報
my $username = 'ユーザー名'; # FC2のユーザー名
my $password = 'パスワード'; # FC2のパスワード
my $blog_id = 'ブログID'; # 自分のFC2ブログID
my $category_name = '新しいカテゴリ名'; # 作成するカテゴリ名

# XML-RPC::Liteクライアントを作成
my $rpc = XMLRPC::Lite->proxy($url);

# blogger.newCategory メソッドを呼び出し
my $response = $rpc->call(
'blogger.newCategory', # メソッド名
$username, # ユーザー名
$password, # パスワード
$blog_id, # ブログID
$category_name # 新しいカテゴリ名
);

# レスポンスを表示
if ($response->fault) {
print "エラー: ", $response->faultstring, "\n";
} else {
print "新しいカテゴリが作成されました: ", $response->result, "\n";
}

コードの説明
必要なモジュールのインポート：

XMLRPC::Liteモジュールを使って、XML-RPCリクエストを送信します。
FC2 XML-RPCエンドポイントURLの指定：

FC2ブログのXML-RPCエンドポイントURL（https://blog.fc2.com/xmlrpc/）を指定します。
認証情報の設定：

ユーザー名、パスワード、ブログID、そして新しく作成するカテゴリ名を変数にセットします。
blogger.newCategoryメソッドの呼び出し：

XMLRPC::Lite->proxy($url)でFC2のXML-RPCエンドポイントに接続し、callメソッドでblogger.newCategoryを呼び出します。
レスポンスの処理：

リクエストが成功した場合、$response->resultで結果（新しいカテゴリのID）が返されます。
失敗した場合、エラーメッセージが表示されます。
実行方法
上記のコードを、例えば create_category.pl というファイルに保存します。
必要なパラメータ（ユーザー名、パスワード、ブログID、カテゴリ名）を実際の値に置き換えます。
コマンドラインで以下のように実行します。

perl create_category.pl

注意点
FC2ブログのXML-RPCにおいて、blogger.newCategoryメソッドの仕様が変更されることがあるため、API仕様を確認することが重要です。
リクエストの回数に制限がある可能性があるので、大量のリクエストを一度に送信しないように注意してください。
この方法で、Perlを使ってFC2ブログに新しいカテゴリを作成できます。

fc2カテゴリ分け２
├ ChatGPT

ログイン

新規登録
あなた:
perl の Xmlprc
ChatGPT:
Perl で XML-RPC を使用する場合、XML::RPC モジュールを使うことが一般的です。このモジュールは、XML-RPC プロトコルを使ってリモートの Web サービスと通信するためのライブラリです。

以下は、XML::RPC モジュールを使って XML-RPC リクエストを送信する基本的な例です。

1. 必要なモジュールのインストール
まず、XML::RPC モジュールを CPAN を使ってインストールします。

bash
コピーする
cpan install XML::RPC
2. 基本的な XML-RPC リクエストの例
以下は、XML-RPC サーバーにリクエストを送信し、レスポンスを受け取る Perl のコード例です。

perl
コピーする
use XML::RPC;

# サーバーの URL（例: http://example.com/RPC2）
my $url = 'http://example.com/RPC2';

# XML-RPC クライアントの作成
my $rpc = XML::RPC->new($url);

# メソッドの呼び出しと引数
my $method = 'example.method'; # 呼び出すメソッド名
my @params = ('param1', 'param2'); # メソッドの引数

# リクエストの送信とレスポンスの取得
my $response = $rpc->call($method, @params);

# レスポンスの処理
if ($response) {
print "レスポンス: ", $response, "\n";
} else {
print "エラー: ", $rpc->status, "\n";
}
3. エラーハンドリング
XML::RPC では、通信エラーやレスポンスエラーを適切に処理するために、エラーハンドリングを行うことが重要です。上記の例で示したように、$rpc->status でエラーメッセージを確認できます。

4. XML-RPC サーバーへの POST リクエスト
XML-RPC サーバーに対して POST リクエストを送信する必要がある場合もあります。この場合、XML::RPC は内部で自動的に HTTP リクエストを作成しますので、ユーザーが直接 HTTP リクエストを作成する必要はありません。

まとめ
このように、Perl で XML-RPC を使うには XML::RPC モジュールを活用することで、簡単にリモートサーバーと通信できます。呼び出したいメソッドとその引数を指定して、XML-RPC リクエストを送信し、レスポンスを受け取ることができます。

もし、さらに詳しい使い方や特定の要件があれば、教えてください！

あなた:
FC2ブログに XML-RPCで投稿したい
ChatGPT:
FC2ブログに XML-RPC を使って投稿するためには、FC2のブログの XML-RPC インターフェースを利用する方法があります。FC2ブログは XML-RPC をサポートしており、これを使用して自動的に記事を投稿したり、管理したりすることができます。

必要な情報
まず、FC2ブログに投稿するために必要な情報は以下の通りです：

XML-RPC エンドポイント URL: FC2ブログの場合、http://xmlrpc.fc2.com が基本のエンドポイントです。
ユーザー名 (ID): FC2ブログのログインID。
パスワード: FC2ブログのログインパスワード。
XML-RPC メソッド
FC2ブログの XML-RPC インターフェースにはいくつかのメソッドがありますが、投稿を行うためには metaWeblog.newPost メソッドを使用します。

必要なモジュール
Perl で XML-RPC を使用するためには、先ほども言及した通り XML::RPC モジュールが便利です。

1. モジュールのインストール
まず、Perl の環境に XML::RPC をインストールします。

bash
コピーする
cpan install XML::RPC
2. FC2ブログに投稿する Perl スクリプト
以下の Perl スクリプトを使って、FC2ブログに XML-RPC 経由で記事を投稿できます。

perl
コピーする
use XML::RPC;
use strict;

# FC2ブログのXML-RPCサーバーURL
my $url = 'http://xmlrpc.fc2.com';

# ユーザー名（FC2ブログのID）
my $username = 'your_username';

# パスワード（FC2ブログのパスワード）
my $password = 'your_password';

# 投稿のタイトルと内容
my $title = 'この記事のタイトル';
my $content = 'この記事の内容です。';

# 記事を公開するかどうか（公開する場合は1、下書きにする場合は0）
my $publish = 1;

# XML-RPC クライアントの作成
my $rpc = XML::RPC->new($url);

# FC2ブログの XML-RPC メソッドを呼び出し
# metaWeblog.newPost の引数は次の通り：
# 1. ブログID（ユーザー名）
# 2. パスワード
# 3. 投稿内容（タイトル、内容、公開設定）
my $response = $rpc->call('metaWeblog.newPost', $username, $password, {
title => $title,
description => $content,
categories => ['default'], # カテゴリの指定（必要に応じて変更）
}, $publish);

# 結果を表示
if ($response) {
print "記事の投稿に成功しました。\n";
print "投稿ID: ", $response, "\n";
} else {
print "記事の投稿に失敗しました。\n";
print "エラー: ", $rpc->status, "\n";
}
スクリプトの説明
URL: http://xmlrpc.fc2.com は FC2 の XML-RPC サーバーのエンドポイントです。
metaWeblog.newPost メソッド: これを使って新しい記事を投稿します。引数としてブログID、パスワード、投稿する内容（タイトル、内容、カテゴリ）、および公開設定（1: 公開, 0: 下書き）を渡します。
記事の内容とタイトル: $title と $content に投稿する記事のタイトルと内容を設定します。
レスポンス: 投稿が成功すると、投稿IDが返されます。失敗した場合はエラーメッセージを表示します。
3. 実行
このスクリプトを実行すると、FC2ブログに指定したタイトルと内容で投稿されます。投稿が成功すれば、その投稿IDも表示されます。

追加オプション
カテゴリの指定: categories => ['default'] の部分で、投稿するカテゴリを指定できます。カテゴリはブログ側であらかじめ作成しておく必要があります。
記事の公開設定: $publish = 1; を 0 に変更すると、記事は公開されずに下書きとして保存されます。
注意点
パスワードが正しいこと、FC2ブログのアカウントが有効であることを確認してください。
スクリプト内の your_username と your_password を実際の FC2 アカウントの情報に置き換えてください。
これで、XML-RPC 経由で FC2ブログに投稿する準備が整いました！

添付

検索

推論

Voice
ChatGPT の回答は必ずしも正しいとは限りません。重要な情報は確認するようにしてください。
?
fc2カテゴリ分け１
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複数チェックボックスの反映 - 2分割レイアウト</title>
<style>
/* 基本設定: htmlとbodyの高さを100%にし、デフォルトのマージン・パディングを削除 */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* スクロールバーが不要なら */
}

/* レイアウトのスタイル */
#container {
display: flex;
/* justify-content: space-between; */ /* 幅で制御するので不要かも */
height: 100vh; /* ビューポートの高さ全体を使用 */
padding: 20px;
box-sizing: border-box; /* paddingを含めて高さを計算 */
}

#checkbox-container {
width: 50%; /* 左側の幅 */
display: flex;
flex-direction: column;
padding-right: 10px; /* 右側との間に少し余白 */
overflow-y: auto; /* チェックボックスが多い場合にスクロール */
}

#iframe-container {
width: 50%; /* 右側の幅 (100% - 30% - 余白分考慮) */
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box; /* paddingを含めて幅を計算 */
display: flex; /* 中のiframeを高さ100%にするため */
flex-direction: column; /* iframeを縦方向に伸ばす */
}

/* iframe自体のスタイル */
#iframe {
width: 100%;
height: 100%; /* 親要素(#iframe-container)の高さに合わせる */
border: none; /* iframeのデフォルト枠線を削除 */
}

/* チェックボックスとラベルの間隔調整 */
#checkbox-container label {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="checkbox-container">
<h3>チェックボックス</h3>
<label>
<input type="checkbox" name="option" value="チェック1" onclick="updateIframe()"> チェック1
</label>
<label>
<input type="checkbox" name="option" value="チェック2" onclick="updateIframe()"> チェック2
</label>
<label>
<input type="checkbox" name="option" value="チェック3" onclick="updateIframe()"> チェック3
</label>
<label>
<input type="checkbox" name="option" value="その他" onclick="updateIframe()"> その他
</label>
</div>

<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>"></iframe>
</div>
</div>

<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
var checkboxes = document.querySelectorAll('input[name="option"]');
var selectedLabels = [];

checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
selectedLabels.push(checkbox.value);
}
});

var message = "";
if (selectedLabels.length > 0) {
// タグで改行するように変更
message = selectedLabels.join(" ");
} else {
message = "項目が選択されていません";
}

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
// メッセージが見やすいように body に直接ではなく、div などに入れるとより良いかもしれません
iframeDocument.body.innerHTML = "<div>" + message + "</div>";
}

// 初期表示（必要に応じてコメント解除）
// updateIframe();
</script>
</body>
</html>コードテスト2
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複数チェックボックスの反映</title>
<style>
/* レイアウトのスタイル */
#container {
display: flex;
justify-content: space-between;
padding: 20px;
}
#checkbox-container {
width: 30%;
display: flex; /* ラベルを縦に並べる */
flex-direction: column; /* ラベルを縦に並べる */
}
#iframe-container {
width: 60%;
border: 1px solid #ccc;
padding: 10px;
}
/* チェックボックスとラベルの間隔調整 */
#checkbox-container label {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="checkbox-container">
<h3>チェックボックス</h3>
<label>
<input type="checkbox" name="option" value="チェック1" onclick="updateIframe()"> チェック1
</label>
<label>
<input type="checkbox" name="option" value="チェック2" onclick="updateIframe()"> チェック2
</label>
<label>
<input type="checkbox" name="option" value="チェック3" onclick="updateIframe()"> チェック3
</label>
<label>
<input type="checkbox" name="option" value="その他" onclick="updateIframe()"> その他
</label>
</div>

<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>" width="100%" height="200px"></iframe>
</div>
</div>

<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
// name属性が "option" であるすべてのチェックボックス要素を取得
var checkboxes = document.querySelectorAll('input[name="option"]');
var selectedLabels = []; // 選択されたラベルを格納する配列

// 各チェックボックスをループ処理
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
// チェックが入っていれば、そのvalue属性の値（ラベル文字列）を配列に追加
selectedLabels.push(checkbox.value);
}
});

var message = "";
if (selectedLabels.length > 0) {
// 選択されたラベルがある場合、カンマ区切りで連結
message = "選択された項目: " + selectedLabels.join("、"); // 区切り文字を「、」に変更
} else {
// 何も選択されていない場合
message = "項目が選択されていません";
}

// iframe内のドキュメントを取得して更新する
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h2>" + message + "</h2>";
}

// ページ読み込み時にも初期状態を表示するために呼び出す (任意)
// updateIframe();
</script>
</body>
</html>

<script>
/*
checkbox-container 内に複数の <label> と <input type="checkbox"> を配置しました。
各チェックボックスに共通の name="option" 属性を追加しました。これにより、JavaScriptでまとめて取得しやすくなります。
各チェックボックスの value 属性に、隣に表示するラベルと同じ文字列（例: "チェック1"）を設定しました。JavaScriptでこの値を取得して表示します。
各チェックボックスに onclick="updateIframe()" を設定し、いずれかのチェックボックスの状態が変わるたびに updateIframe 関数が呼ばれるようにしました。
CSSに #checkbox-container label { margin-bottom: 5px; } を追加し、チェックボックス間の縦の間隔を調整しました。また、display: flex; と flex-direction: column; を追加して縦に並ぶようにしました。
JavaScript (updateIframe 関数):

document.querySelectorAll('input[name="option"]') を使って、name 属性が "option" である全てのチェックボックスを取得します。
selectedLabels という空の配列を用意します。
forEach ループを使って、取得した各チェックボックスを調べます。
if (checkbox.checked) で、チェックボックスがチェックされているかを確認します。
チェックされていれば、そのチェックボックスの value 属性の値 (checkbox.value) を selectedLabels 配列に追加します。
ループ終了後、selectedLabels 配列に格納された文字列を join("、") を使って「、」で連結し、表示用のメッセージを作成します。
選択された項目がない場合は、「項目が選択されていません」というメッセージを表示します。
最後に、作成したメッセージをインラインフレーム (iframe) の中身として表示します。
これで、チェックを入れた項目のラベル文字列がインラインフレーム内に表示されるようになります。
複数チェックを入れると、それらのラベルが「、」で区切られて表示されます。
*/
</script>

コードテスト１
├ 非公開やること
│└ 非公開資料退避
├ 非公開モンハンワイルズまとめわず
│├ 非公開googleスプレッドシートで定期的にcgiにアクセスする
│├ 非公開5chの指定された広告
│└ 非公開chien2-2.cgi
├
2025.3.16停止　実験的に継続

2025.2.25再開

世間の風当たりから、完全に凍結。
別ワードによる探索も凍結。
しばらく様子見。2014/03/12～

凍結内容
・スレッド色選択式に移行
・複数サイトへの投稿へ対応
・過去ログ入りから⇒取得時のレス数からに変更
・デフォピクチャを設け、関連ピクチャを自動表示

2つのサイトは停止中
・モンハン4まとめわず
・斜線上のゴッドイーター２まとめ

まとめサイトに関する開発は継続
├ 非公開やること時間軸
├ 過去の資料2011～2013過去資料
├ Javascript Shortcode Area
├ Junkerposts
└ junkerstock

・その場でjavascriptの編集
　　実行、デバッグＯＫ
・ツリー管理
・変数管理
・括弧の色分け（オマケ程度）

・無限Undo

・完全オリジナルの環境です。
・このCGIのお問い合わせは
・momonga-v4.live.jp まで。

２カラムテスト２

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>長い2カラム Grid レイアウト</title>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: sans-serif;
}

.container {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh; /* ビューポート高を最小にして、内容が伸びれば拡張 */
}

header {
background: #4caf50;
color: white;
padding: 1rem;
text-align: center;
}

main {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1rem;
padding: 1rem;
align-items: start;
}

.sidebar {
background: #f0f0f0;
padding: 1rem;
}

.content {
background: #e0f7fa;
padding: 1rem;
}

footer {
background: #333;
color: white;
text-align: center;
padding: 0.5rem;
}

/* 長いダミーコンテンツ用 */
.long-text {
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<header>ヘッダー</header>

<main>
<div class="sidebar">
<h2>サイドバー</h2>
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
ナビゲーションや追加情報など
</div>

<div class="content">
<h2>メインコンテンツ</h2>
<div class="long-text">

これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。
これは長いメインコンテンツの例です。

</div>
</div>
</main>

<footer>フッター</footer>
</div>
</body>
</html>

使用変数

charset
class
content
lang
name
scale
width

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>長い2カラム Grid レイアウト</title>
 <style>
 * {
 box-sizing: border-box;
 }

body {
      margin: 0;
      font-family: sans-serif;
    }

.container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh; /* ビューポート高を最小にして、内容が伸びれば拡張 */
    }

header {
      background: #4caf50;
      color: white;
      padding: 1rem;
      text-align: center;
    }

main {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 1rem;
      padding: 1rem;
      align-items: start;
    }

.sidebar {
      background: #f0f0f0;
      padding: 1rem;
    }

.content {
      background: #e0f7fa;
      padding: 1rem;
    }

footer {
      background: #333;
      color: white;
      text-align: center;
      padding: 0.5rem;
    }

/* 長いダミーコンテンツ用 */
 .long-text {
 line-height: 1.6;
 }
 </style>
</head>
<body>
 <div class="container">
 <header>ヘッダー</header>

<main>
 <div class="sidebar">
 <h2>サイドバー</h2>
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 ナビゲーションや追加情報など
 </div>

<div class="content">
 <h2>メインコンテンツ</h2>
 <div class="long-text">
 
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 これは長いメインコンテンツの例です。
 
 </div>
 </div>
 </main>