ヒロミロさんのページ

編集方針

• 新記事は基本的に作るつもりはない
• 記事冒頭の「○○とは～」の○○を<strong>タグで囲みたい
• ゴミタグ（<span>など）は掃除したい
• 全角英数字は半角にしたい
• （思いつき次第追加予定）

 

よく参照する記事リンク

• ニコニコ大百科:HTML各要素のデフォルトCSS
• ニコニコ大百科:HTMLタグ一覧
• ニコニコ大百科:HTMLテンプレート集
• 凝ったレイアウトを作りたい人向け:スタイルシート活用講座
• ブラウザによるレイアウトの違い
• HTMLカラーコード
• ニコニコ大百科:お知らせ表示の一覧

 

覚え書き（どこぞから拝借したものを自分用に改変）

• テーブルあれこれ
• リスト

<img src="" alt="" title="" width="" height="">	画像貼り付け。titleに書いたテキストはツールチップとして表示される。
style="float: right;"	右へ回り込み。left; で左。
style="clear: both;"	回り込み解除。
style="text-decoration: line-through;"	打ち消し線。こんな感じになる。
style="margin: 1em;"	外側の余白。値を1つ指定→上下左右全てに適用。 1em＝1文字サイズ 本文領域 1em＝1文字サイズ
style="margin: 1em 2em;"	値を2つ指定→順に「上下」「左右」に適用。 1em＝1文字サイズ 本文領域 1em＝1文字サイズ
style="margin: 1em 2em 3em;"	値を3つ指定→順に「上」「左右」「下」に適用。 1em＝1文字サイズ 本文領域 1em＝1文字サイズ 1em＝1文字サイズ 1em＝1文字サイズ
style="margin: 1em 2em 3em 4em;"	値を4つ指定→順に「上」「右」「下」「左」に適用。 1em＝1文字サイズ 本文領域 1em＝1文字サイズ 1em＝1文字サイズ 1em＝1文字サイズ
style="margin-top: 1em;"	上側の余白だけを指定するときに使う。
style="margin-bottom: 1em;"	下側の余白だけを指定するときに使う。
style="margin-left: 1em;"	左側の余白だけを指定するときに使う。
style="margin-right: 1em;"	右側の余白だけを指定するときに使う。
<div style="border: solid 1px #D1D1D1; background: #F1F1F1; margin: 1em; padding: 1em;"></div>
背景色と枠つきのグレーdiv。 こんな感じの囲いができる。
<div style="overflow: auto; height: 300px;"></div>
スクロールバーを使った表示。↓のテーブル欄が例。

▼テーブルあれこれ▼

<table> <tbody> <tr> <th>あいう</th><th>かきく</th> </tr> <tr> <td>えお</td><td>けこ</td> </tr> </tbody> </table>

テーブルタグの基本系。 あいう かきく えお けこ

<table> <tbody> <tr> <th colspan="2">あいうかきく</th> </tr> <tr> <td>えお</td><td>けこ</td> </tr> </tbody> </table>

横方向にセル結合。 あいうかきく えお けこ

<table> <tbody> <tr> <th rowspan="2">あいうえお</th><th>かきく</th> </tr> <tr> <td>けこ</td> </tr> </tbody> </table>

縦方向にセル結合。 あいう えお かきく けこ

▼リスト▼

<ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul>	リストタグの基本形。 <ul>→<ol>にすると番号付きリストに。 リストA リストB リストC リストA リストB リストC
<ul> <li>リストA</li> <li>リストB <ul> <li>リストB-a</li> <li>リストB-b</li> <li>リストB-c</li> </ul> </li> <li>リストC</li> </ul>	リストタグの入れ子。 リストA リストB リストB-a リストB-b リストB-c リストC