tableタグを使ってKing&Princeを簡単表記してみる
先日ちらっとKing&Princeに触れたのと、
メンバー6人、表にするにはちょうどいいと思ったので、書いてみた。
さっそく完成形のコードをみてみよう。
<!DOCTYPE html> <!--tableタグとその関連するタグの練習--> <html> <head> <meta charset="UTF-8"> <title>King&Prince メンバーカラー</title> <style type="text/css"> table, td, th { border: 2px solid silver; } td, th { padding: 4px; } <!--なんかみんな使ってるらしい游ゴシック体を使ってみる--> @font-face { font-family: "YuGothic M"; src: local("Yu Gothic Medium"), local("Yu Gothic"); font-weight: 500; } p { font-size: 0.9em; font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif; } </style> </head> <body> <table> <tr> <th>名前</th> <th>年齢</th> <th>メンバーカラー</th> </tr> <tr> <td>岸優太</td> <td>22歳</td> <td bgcolor="#9900FF" ;>紫</td> </tr> <tr> <td>神宮寺勇太</td> <td>20歳</td> <td bgcolor="#00FFFF">ターコイズブルー</td> </tr> <tr> <td>岩橋玄樹</td> <td>21歳</td> <td bgcolor="#FF1493">濃いピンク</td> </tr> <tr> <td>平野紫耀</td> <td>21歳</td> <td bgcolor="#FF0000">真紅</td> </tr> <tr> <td>永瀬廉</td> <td>19歳</td> <td bgcolor="#000000">漆黒</td> </tr> <tr> <td>髙橋海人</td> <td>19歳</td> <td bgcolor="#FFFF00">ひまわりイエロー</td> </tr> </table> <P>※年齢は記事投稿時現在の年齢です</P> </body> </html>
こんな感じに今どきの10代女子がキャーキャー言いそうな単語が並んでいる。
「ひまわりイエロー」がなんとも言えない(笑)
なんでそこだけかわいいんだ(笑)
実際、人もかわいいから馴染んでる部分もある。
さて、今回新たに出てきたワードを詳しくみていくと、
<table></table>
tableタグ。tr、th、td要素を囲むタグ。
<tr></tr>
trタグ。行。table rowの略。
<th></th>
thタグ。見出し。table headerの略。
<td></td>
tdタグ。内容。table dataの略。
そしてブラウザに表示させた結果がこちら。
ちゃんと表示されてますね。
ただ、永瀬廉くんのメンバーカラーの文字が色と馴染んじゃってww
実際には、「漆黒」。
あと、岸くんのメンバーカラー「紫」て。まんまやないかいw
そして今回tableタグの表記でわかったことは、
td要素(Excelでいうセル)単位で色を指定できること。
th要素単位でも指定できるかも。
タグ内に、bgcolor="色"を追加すればOK