1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | <span class="dec"><!DOCTYPE html></span><span class="pln"></span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln"></span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">高度なコード比較サイト</span><span class="tag"></title></span><span class="pln"> </span><span class="tag"><style></span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f4f4f4;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">90</span><span class="pun">%;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">900px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">);</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> h1 </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#333;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">code</span><span class="pun">-</span><span class="pln">input </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">between</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> gap</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> textarea </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">48</span><span class="pun">%;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> monospace</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">14px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> resize</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f9f9f9;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">buttons </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> gap</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> button </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007BFF;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#0056b3;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">#result {</span><span class="pln"> white</span><span class="pun">-</span><span class="pln">space</span><span class="pun">:</span><span class="pln"> pre</span><span class="pun">-</span><span class="pln">wrap</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> monospace</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f8f9fa;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ddd;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">-</span><span class="pln">y</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">highlight </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffcccc;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#d9534f;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">line </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></style></span><span class="pln"></span><span class="tag"></head></span><span class="pln"></span><span class="tag"><body></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h1></span><span class="pln">高度なコード比較ツール</span><span class="tag"></h1></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"code-input"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"code1"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"コード1を入力..."</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"code2"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"コード2を入力..."</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"buttons"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">compareCodes</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">比較する</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">clearFields</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">クリア</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><h3></span><span class="pln">比較結果</span><span class="tag"></h3></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"result"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- 結果表示エリア --></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> compareCodes</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> code1 </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code1'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">.</span><span class="pln">split</span><span class="pun">(</span><span class="str">'\n'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> code2 </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code2'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">.</span><span class="pln">split</span><span class="pun">(</span><span class="str">'\n'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> resultContainer </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'result'</span><span class="pun">);</span><span class="pln"> resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> maxLength </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="pln">code1</span><span class="pun">.</span><span class="pln">length</span><span class="pun">,</span><span class="pln"> code2</span><span class="pun">.</span><span class="pln">length</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">let</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun"><</span><span class="pln"> maxLength</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> line1 </span><span class="pun">=</span><span class="pln"> code1</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> line2 </span><span class="pun">=</span><span class="pln"> code2</span><span class="pun">[</span><span class="pln">i</span><span class="pun">]</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> lineClass </span><span class="pun">=</span><span class="pln"> line1 </span><span class="pun">!==</span><span class="pln"> line2 </span><span class="pun">?</span><span class="pln"> </span><span class="str">'highlight'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">+=</span><span class="pln"> </span><span class="pun">`</span><span class="pln"> </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"line"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">strong</span><span class="pun">>行</span><span class="pln"> $</span><span class="pun">{</span><span class="pln">i </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">}:</</span><span class="pln">strong</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"${lineClass}"</span><span class="pun">>コード</span><span class="lit">1</span><span class="pun">:</span><span class="pln"> </span><span class="str">"${line1}"</span><span class="pun"></</span><span class="pln">span</span><span class="pun">></span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="pun"><</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"${lineClass}"</span><span class="pun">>コード</span><span class="lit">2</span><span class="pun">:</span><span class="pln"> </span><span class="str">"${line2}"</span><span class="pun"></</span><span class="pln">span</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">>`;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">resultContainer</span><span class="pun">.</span><span class="pln">innerHTML</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">())</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> resultContainer</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">'<div>コードに違いはありません。</div>'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> clearFields</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code1'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'code2'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'result'</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"></span><span class="tag"></body></span><span class="pln"></span><span class="tag"></html></span> |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なコード比較サイト</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 900px;
margin: 20px auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 5px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.code-input {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
gap: 10px;
}
textarea {
width: 48%;
height: 300px;
font-family: monospace;
font-size: 14px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: none;
background-color: #f9f9f9;
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
#result {
white-space: pre-wrap;
font-family: monospace;
background-color: #f8f9fa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
}
.highlight {
background-color: #ffcccc;
font-weight: bold;
color: #d9534f;
}
.line {
border-left: 4px solid #ccc;
padding-left: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>高度なコード比較ツール</h1>
<div class="code-input">
<textarea id="code1" placeholder="コード1を入力..."></textarea>
<textarea id="code2" placeholder="コード2を入力..."></textarea>
</div>
<div class="buttons">
<button onclick="compareCodes()">比較する</button>
<button onclick="clearFields()">クリア</button>
</div>
<h3>比較結果</h3>
<div id="result">
<!-- 結果表示エリア -->
</div>
</div>
<script>
function compareCodes() {
const code1 = document.getElementById('code1').value.split('\n');
const code2 = document.getElementById('code2').value.split('\n');
const resultContainer = document.getElementById('result');
resultContainer.innerHTML = '';
const maxLength = Math.max(code1.length, code2.length);
for (let i = 0; i < maxLength; i++) {
const line1 = code1[i] || '';
const line2 = code2[i] || '';
const lineClass = line1 !== line2 ? 'highlight' : '';
resultContainer.innerHTML += `
<div class="line">
<strong>行 ${i + 1}:</strong>
<span class="${lineClass}">コード1: "${line1}"</span> |
<span class="${lineClass}">コード2: "${line2}"</span>
</div>`;
}
if (!resultContainer.innerHTML.trim()) {
resultContainer.innerHTML = '<div>コードに違いはありません。</div>';
}
}
function clearFields() {
document.getElementById('code1').value = '';
document.getElementById('code2').value = '';
document.getElementById('result').innerHTML = '';
}
</script>
</body>
</html>