新 MDN 翻訳用スニペット

by ethertank

HTML

<h1>新 MDN 翻訳用スニペット</h1>

<h2>Label(header)</h2>
<table>
    <tbody>
        <tr>
            <th>要・レビュー</th>
            <td><input type="text" value="&lt;div&gt;{{NeedsTechnicalReview()}}&lt;/div&gt;" /></td>
        </tr>

        
        <tr>
            <th>時代遅れ</th>
            <td><input type="text" value="&lt;div&gt;{{outdated('最終更新日は xxxx 年 xx 月 xx 日です。英語版の最新の内容も合わせてご覧下さい。')}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>HTML5 で導入</th>
            <td><input type="text" value="&lt;div&gt;{{HTMLVersionHeader('5')}}&lt;/div&gt;" /></td>
        </tr>

        <tr>
            <th>Gecko 9.9 で導入</th>
            <td><input type="text" value="&lt;div&gt;{{Gecko_minversion_header(9.9)}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>Firefox 9.9 で導入</th>
            <td><input type="text" value="&lt;div&gt;{{fx_minversion_header(9.9)}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>JavaScript 9.9 で導入</th>
            <td><input type="text" value="&lt;div&gt;{{js_minversion_header(9.9)}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>翻訳中（マルチリンガル）</th>
            <td><input type="text" value="&lt;div&gt;{{translationInProgress()}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>非標準</th>
            <td><input type="text" value="&lt;div&gt;{{non-standard_header()}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>廃止</th>
            <td><input type="text" value="&lt;div&gt;{{obsolete_header()}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>非推奨</th>
            <td><input type="text" value="&lt;div&gt;{{deprecated_header()}}&lt;/div&gt;" /></td>
        </tr>
        <tr>
            <th>Thunderbird 3 の新機能に関する記事</th>
            <td><input type="text" value="&lt;div&gt;{{tb_minversion_header('3')}}&lt;/div&gt;" /></td>
        </tr>
    </tbody>
</table>





<h2>Note</h2>
<table>
    <tbody>
        <tr>
            <th>JS バージョン情報</th>
          ...

CSS

body {
    font-size:13px;
    font-family: Arial, sans-serif;
    background: #f9f9f9; margin:0; padding: 10px 10px 40px;
    max-width: 850px;
}

h1, h2 { font-family: KozGoPro-regular, Arial, Helvitica, Meiryo, Sans-Serif; }
h2 { font-size: 1.25em; }

table {
    width: 100%; border-collapse: collapse;
}

thead, tbody {
    border: 4px solid #222;
    border-width: 4px 3px;
}

th, td { border: 3px solid #222; border-width: 4px 3px; }
th { background: #e9e9e9; font-weight: 400; text-align:left; width: 215px; padding: 3px; }
td { background: #f3f3f3; padding: 0; }


input[type="text"], textarea {
    display: block;
    width: 100%;
    font-family: monospace;
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
    -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
         box-sizing: border-box;
    margin: 0;
    border: 1px solid #999;
    padding: 4px 3px;
    -moz-box-shadow: inset 1px 1px 3px 0 #999;
    box-shadow: inset 1px 1px 2px 0 #999;
}

input[type="text"]:hover,
textarea:hover { background: #ff9; }

JavaScript

jQuery(function($) {
    $('input[type=text], textarea').on('click', function() {
        $(this).select();
    });
});