読者です 読者をやめる 読者になる 読者になる

どどらぼ -Kan8's DoDoLab-

頭の中の妄想Planだけで終わる人生から、一歩踏み出したい。Do!Do!

はてなブログよく使う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サイト

------------------------------- 

以上