Webサイト系

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

タグ紹介二回目です。一回目は特にHTML5準拠からのタグをご紹介しました。今回は段落やリストのタグをご紹介します。

HTML「タグ」

<p>・・・文章を構築する際に一番使われるタグで、一つの段落を示します。
<ol>・・・これを配置すると、下部の<li>に番号が割り振られる。
<ul>・・・これを配置すると、下部の<li>に・が付く。
<li>・・・上記の<ol>や<ul>の中に配置し、それぞれの役割をこなす。私は「リスト」って呼んでます。
<dl><dt><dd>・・・これはよくセットで使われ、それぞれ先頭が<dl>、次に<dt>、最後に<dd>を配置します。<dl>に説明の表題を書き、<dt>でコンテンツを説明し、<dd>で詳しく説明する、なんて時に使われます。これらを配置すると、先頭にスペースが置かれたり体裁が変わります。
<hr>・・・区切りを示すのですが、<hr>を配置すると棒線が表示されます。
<br/>・・・改行します。これもよく使われますが、デザインを整える場合にはCSS推奨です。

リストタグなんかはそこまで沢山使うものではないですが、ふとしたときに使ったりするので覚えておくといいです。<hr>も、棒線を表示させたいときはCSSでborder-bottomなんかを使うことのほうが多いかもしれません。文章を書くときに使う<p>と改行の<br/>はよく使いますので、覚えましょうと言わなくても使うことになると思います。

<article>
<section>
<h1>ページの見出し</h1>
<p>ピータグの中にも文章いれられるよ</p>
<p>この中に<br/>いれると⇦で改行されるよ</p>
<hr>(棒線が引かれるよ)
<ol>
<li>番号1がふられるよ</li>
<li>番号2がふられるよ</li>
</ol>
<ul>
<li>・が先頭に付くよ</li>
<li>・が先頭に付くよ</li>
</ul>
<dl>段差の付くセクション
<dt>フルーツ2選
<dd>メロン</dd>
<dd>イチゴ</dd>
</dt>
</dl>
</section>
</article>

という感じで使われます。大きなタグの括りのなかに内部にもタグを置いて構築していく感じですね。そのタグの中にあるタグを子タグなんかと呼べますが、CSSを適用させるときに子タグの位置を親タグとの関係を考えて指定したりします。とりあえずは、タグとタグの関係がなんとなーく分かるようになればいいと思います。

うまく表示できない場合に考えられるのは、</p>といった「/」を入れた閉めタグをしていないとか、必要な親タグがないとかではないでしょうか。中には閉めタグがなくてもいいタグなんかもあってややこしいんですが、その辺は自転車と同じで慣れると意識しなくなります。今回紹介したタグでは棒線を引く<hr>なんかは閉めタグ必要ないですし、<br/>も「/」の位置が後ろにあったりしますね。う~ん、慣れです(笑)私もそういうもんだと記憶して使ってます。そういうタグはそんなに多くないんで、時間が経つにつれ自然と使えるようになると思います。頑張ってください。

ピックアップ記事

  1. Round1figh!!

関連記事

  1. Webサイト系

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

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

  2. Webサイト系

    鬼滅の刃 血風剣戟ロワイアル~攻略wikiの究極データベースを運営予定~

    こんにちは一花です。メインPCのディスプレイがスリープから解…

  3. Webサイト系

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

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

  4. Webサイト系

    バリスタの、バリスタによる、缶コーヒー飲み比べ.comのお引越し

    タイトルのサイトを置いていた無料のサーバーがサービス終了ということで…

  5. Webサイト系

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

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

  6. Webサイト系

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

    本日はモバプロ2ではなくWebデザインで使うタグ紹介part3です。…

コメント

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

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

Twitter

  1. レッドストーン

    RSPASS-50報酬~ペイトンユニークBOXからは何が出る?~レッドストーン
  2. モバプロ2レジェンド

    モバプロ2レジェンド選手考察~前回に続き、捕手は誰がいい??~
  3. レッドストーン

    金鯖初日~獣人育成日記1~レッドストーン
  4. レッドストーン

    2021 金鯖 装備晒し~祈りのかけらホシィ~レッドストーン
  5. レッドストーン

    アイテムドロップ情報まとめ~2.地下墓地B2編~レッドストーン
PAGE TOP