Webサイト系

Webデザイン~検索データベースシステムが出来るまで~PART5 「タグ3」

本日はモバプロ2ではなくWebデザインで使うタグ紹介part3です。見る人減りそ~

HTML「タグ」

今回は文を書くときに使うタグと、テーブルエリアを作る時に使うタグをご紹介します。

<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>によってグループ化された縦列グループ内の1つ以上の縦列を表す要素です
<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>種類は20種程度</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なんかも使えるときもある。うーその辺ね。

では次回!ちゃお☆

ピックアップ記事

  1. Round1figh!!

関連記事

  1. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART4 「タグ2」

    タグ紹介二回目です。一回目は特にHTML5準拠からのタグをご紹介しま…

  2. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART2

    HTMLという言語を使う時は、adobeが提供しているdreamwe…

  3. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART1

    このタイトルでは、私一花が今まで独学で築き上げてきた技術やコツをこれ…

  4. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART3 「タグ」

    今回はHTMLでつかうタグの一例をご紹介します。特にHTML5の5か…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Twitter

  1. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART3 「タグ」
  2. モバプロ2レジェンド

    【スキマに届けっ!?—第二回は緑茶フラペのあの人!—】モ…
  3. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART5 「タグ3」
  4. 加工品

    Photoshopでipponグランプリ風に仕上げるには?
  5. モバプロ2レジェンド

    【スキマに届けっ!?—第四回はLP8枚投入、史上最強の木落坂さん!—】モバプロ2…
PAGE TOP