本日はモバプロ２ではなくWebデザインで使うタグ紹介part３です。見る人減りそ～
ＨＴＭＬ「タグ」
今回は文を書くときに使うタグと、テーブルエリアを作る時に使うタグをご紹介します。
<a>・・・<a href=”xxx”>⇦のxxxの箇所にURLを入れてリンクを作ります。<a href=”xxx”>名前など</a>と作ると「名前など」にhrefのURLに飛ぶように指定できます。
<em>・・・括った言葉が強調（斜め）される。
<strong>・・・これも強調したい時に使うが、これは太文字になる。SEO対策でも使われることがある、のはもう昔なのかな？
<span>・・・このタグは特に意味はないんだけど、その場所だけidとかcrassを指定してCSSを掛けたいときに使用する結構万能なタグ。
<table>・・・テーブル（表）エリアを作る
<caption>・・・tableタグの中で使うが、テーブルに表題を付けられる。
<colgroup>・・・縦列をグループ化するときに使う
<col>・・・<colgroup>によってグループ化された縦列グループ内の１つ以上の縦列を表す要素です
<thead>・・・テーブルのヘッダを示す
<tbody>・・・テーブルのボディを示す
<tfoot>・・・テーブルのフッターを示す
<tr>・・・テーブルの横一行を作る
<th>・・・テーブルの見出し（太文字）を示す
<td>・・・テーブルのデータを示す
<body>
<header>
<a href=”xxx”>リンクタグです</a>
<p>この文章の内、<em>斜め強調</em><strong>太字強調</strong>となります</p>
</header>
<article>
<table>
<caption>スタバホットコーヒーひかくぅ～</caption>
<colgroup span=”1″ class=”yellow”></colgroup>
<colgroup>
<col span=”2″ class=”green”></col>
<col span=”3″class=”blue”></col>
</colgroup>
<thead>
<tr><th>お豆の名前</th><th>苦味</th><th>酸味</th><th>コク</th><th>ロースト</th><th>香り</th></tr>
</thead>
<tbody>
<tr><th>カシシエロ</th><td>強い</td><td>普通td><td>やや強い</td><td>普通</td><td>ローストの香り中</td></tr>
<tr><th>コロンビア</th><td>強い</td><td>弱い><td>弱い</td><td>普通</td><td>シンプル</td></tr>
</tbody>
<tfoot>
<tr><th>種類は２０種程度</th><td>強いものが多い</td><td>物による><td>物による</td><td>物による</td><td>基本はない</td></tr>
</tfoot>
</table>
</article>
</bofy>
などと表記したらいけるかな？テーブルについては、spanの数分、横に領域が確保されるので、それと同じ数の<th>+<td>を<tr>の中に作っていく、ということです。<tr>で一行作り、中に<th><td>で中身を入れる。thは太文字に強調されるので、見出しなんかは<th>で作って、内容は<td>で作るイメージですね。
まとめ
テーブルはfloatを使わずに横に文章を置いていける書き方なんですが、これをするとパソコン表記とスマホ表記の両方に対応できない場合もあるので、私は多用は避けてます。中身の領域を％指定にすればスマホ表記もうまくいくときもあるかもですが、そうすると言葉が長い場合改行されまくることになります。テーブル全体が横長になる場合は、CSSでoverflowを使って表示方法を指定してあげるといいですね。
次回はビギナーにつまづきやすいfloatタグの説明しようかな。横に並べられるfloatですけど、うまく使わないと解除できなかったりでデザインが崩れやすいのよね。columsなんかも使えるときもある。うーその辺ね。
では次回！ちゃお☆
この記事へのコメントはありません。