HTMLとは
HTMLはHyper Text Markup Languageの略です。
何のことだ！？と思う人もいると思いますが、ウェブサイトを作るための基本的な言語の事です。
ホームページやブログなど、身近なところで多く使われています。
はてなブログでも編集できるようになっており、「HTML編集」をみるとHTMLで書かれた裏側を見ることができます。そして編集する事ができます。
エクセルやGoogleドライブで作ったデータをエクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を使って表の形をしたHTMLを作ることができます。
それを利用して、ブログ用にカスタマイズするやり方を書いていきたいと思います。
何故THMLを使ってカスタマイズするのか
ツールによって作成されたHTMLは、そのままブログに使うことができます。
PCやタブレット、スマートフォンで見ても形や色が崩れないので、大変便利です。
しかし項目の色を変えたり、文字の大きさを変えたりした方が、ブログにしっくりくると感じることも。
細かなカスタマイズをすることで、ブログ全体を整えるのと見やすくするために役に立ちます。
HTMLでカスタマイズしてみよう
HTML、カスタマイズと聞くと難しいと思うかもしれません。
実際やってみると簡単です。
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)で作成されたHTMLをそのまま貼り付けてみました。
| a | b |
|---|---|
| 1 | 3 |
| 2 | 4 |
＜上の表のHTML＞
<style>
<!-- 表全体の設定 -->
table {
border-collapse: collapse;
}
<!-- 表のヘッダの設定（見出し部分) -->
th {
border: solid 1px #666666;
color: #000000;
background-color: #ff9999;
}
<!-- 表の行列の設定（値の部分） -->
td {
border: solid 1px #666666;
color: #000000;
background-color: #ffffff;
}
</style>
<!-- 表の形と値 -->
<table>
<thead>
<tr>
<th>
a
</th>
<th>
b
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
1
</th>
<td>
3
</td>
</tr>
<tr>
<th>
2
</th>
<td>
4
</td>
</tr>
</tbody>
</table>
実際に目にするときは表だけですが、このようなHTMLがブログにかかれています。
カスタマイズ方法
ここではstyle内で全体の設定を行っています。
テーブル全体に関する事ならtable{}の中に書き込みます。
見出し項目に関する事なら、th{}の中に書き込みます。
背景を赤色にするなら
th {
border: solid 1px #666666;
color: #000000;
background-color: red;
}
調整に使えるタグ
表の調整でよく使うであろうタグをまとめてみました。
実際はもっと調整できる要素があるので、検索してみるのをおすすめします。
| タグ | 意味 | 設定値 | 例 |
|---|---|---|---|
| border-collapse | 枠の設定 | separate(分離した枠） | border-collapse: callapse |
| callapse(分離してない枠） | |||
| border-style | 枠線の種類設定 | none(枠線無し) | border-style: solid |
| hidden(枠線無し) | |||
| solid(実線) | |||
| double（2重線) | |||
| border-color | 枠の色 | 16進数かカラーネーム | border-color: red |
| width | 幅の設定 | pxか％ | width: 300pc |
| height | 高さの設定 | pxか％ | height: 200px |
| background-color | 背景色 | 16進数かカラーネーム | background-color: #cd5c5c |
| color | 文字の色 | 16進数かカラーネーム | color: #ffff00 |
表の形がうまく作れない、結合があるなら
HTMLで表の形から作る時、表の形だけ最初に欲しい時。
そんな時に便利なツールがあります。
表のレイアウトを自在に作れます。
結合などがあるとき、便利です。
表のレイアウトだけ作っておいて、値を該当箇所に入れていく手段も便利です。
