旧 MDN 翻訳用スニペット

by ethertank

HTML

<h1>旧 MDN 翻訳用スニペット</h1>
<h2>Headline</h2>
<table>
  <tbody>
    <tr>
      <th>Description</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Description'])}}説明" /></td>
    </tr>
    <tr>
      <th>Summary</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Summary'])}}概要" />
      </td>
    </tr>
    <tr>
      <th>Syntax</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Syntax'])}}構文" />
      </td>
    </tr>
    <tr>
      <th>Parameters</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Parameters'])}}引数" />
      </td>
    </tr>
    <tr>
      <th>Value</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Value'])}}値" />
      </td>
    </tr>
    <tr>
      <th>Values</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Values'])}}値" />
      </td>
    </tr>
    <tr>
      <th>Properties</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Properties'])}}プロパティ" />
      </td>
    </tr>
    <tr>
      <th>Specification</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Specifications'])}}仕様" />
      </td>
    </tr>
    <tr>
      <th>Specifications</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Specifications'])}}仕様" />
      </td>
    </tr>
    <tr>
      <th>Attribute</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Attribute'])}}属性" />
      </td>
    </tr>
    <tr>
      <th>Attributes</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Attributes'])}}属性" />
      </td>
    </tr>
    <tr>
      <th>Method</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Method'])}}メソッド" />
      </td>
    </tr>

    <tr>
      <th>Methods</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Methods'])}}メソッド" />
      </td>
    </tr>
    <tr>
      <th>Usage context</th>
      <td><input type="text" value="{{wiki.template('英語版章題',['Usage context'])}}使用可能な場所" />
     ...

CSS

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

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

table {
    width: 100%; border-collapse: collapse;
    box-shadow: 1px 1px 3px #666;
}

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: 165px; 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 rgb(102, 102, 102);
    box-shadow: inset 1px 1px 2px 0 rgb(102, 102, 102);
}

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

JavaScript

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