はてなブログよく使うHTML (自分用)
記事作成時コピペ用。
投稿日、最終更新日
投稿日：2016/10/03 最終更新日：2016/10/19
目次
■[:contents]■
※「■」は不要。見たまま記法で記載して使用できる
囲み線
<div style="border-style: solid ; border-width: 1px;">■■実線囲み■■</div>
■■実線囲み■■
<div style="border-style: dotted ; border-width: 1px;">■■点線囲み■■</div>
■■点線囲み■■
<div style="border-style: dashed ; border-width: 1px;">■■破線囲み■■</div>
■■破線囲み■■
<div style="border-style: double ; border-width: 3px;">■■二重線囲み■■</div>
■■二重線囲み■■
<div style="border-style: solid ; border-width: 1px; background-color: #FFCCD8; ">■■背景色囲み■■</div>
■■背景色囲み■■
背景色
<div style="background-color: #FFCCD8; ">■■背景色のみ■■</div>
■■背景色のみ■■
<div style="background-color: #cccccc; ">■■灰色■■</div>
<div style="background-color: #f0f8ff; ">■■うすい水色■■</div>
<div style="background-color: #ccffff; ">■■蛍光水色■■</div>
<div style="background-color: #ffffcc; ">■■薄い黄色■■</div>
<div style="background-color: #ccccff; ">■■青■■</div>
<div style="background-color: #ffcccc; ">■■赤■■</div>
<div style="background-color: #ffff99; ">■■黄■■</div>
<div style="background-color: #ccffcc; ">■■緑■■</div>
ブログメインテーマカラー
#ff3366
ブログサブテーマカラー
#FFCCD8
カラーコードを選んでコピペしやすいサイト
ページ内リンクの貼り方
<a href="#aaa">「飛びたい場所」へ</a>
<a name="aaa">飛びたい場所</a>
※aaa部分は英数字ならなんでも可。一つのページ内で複数のページ内リンクを貼る場合には、そのページ内で重複しないようにする。
基本的なテーブル
<table border="3"><caption>「ニュースを見る」行動は能動的か</caption>
<tbody>
<tr><th>行動</th><th>受動的/能動的</th><th>INPUT/OUTPUT</th></tr>
<tr>
<td>何もしない</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>惰性でニュースを見る</td>
<td style="background: #ffcccc;">受動的</td>
<td>INPUT</td>
</tr>
<tr>
<td>意図的にニュースを見る</td>
<td>能動的</td>
<td>INPUT</td>
</tr>
<tr>
<td>気になったことを調べる</td>
<td>能動的</td>
<td>INPUT</td>
</tr>
<tr>
<td>考えたことを表現する</td>
<td>能動的</td>
<td>OUTPUT</td>
</tr>
</tbody>
</table>
| 行動 | 受動的/能動的 | INPUT/OUTPUT |
|---|---|---|
| 何もしない | - | - |
| 惰性でニュースを見る | 受動的 | INPUT |
| 意図的にニュースを見る | 能動的 | INPUT |
| 気になったことを調べる | 能動的 | INPUT |
| 考えたことを表現する | 能動的 | OUTPUT |
テーブルの結合
colspan="2" で水平方向に2つのセルを結合
rowspan="2" で垂直方向に2つのセルを結合
<table border="3">
<tbody>
<tr>
<td colspan="3">水平方向の結合</td>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
</tbody>
</table>
| 水平方向の結合 | ||
| データセル1 | データセル2 | データセル3 |
参考）HTMLタグ/テーブルタグ/セルを結合する - TAG index Webサイト
-------------------------------
以上
