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デザイン~検索データベースシステムが出来るまで~PART5 「タグ3」

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

  2. Webサイト系

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

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

  3. Webサイト系

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

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

  4. Webサイト系

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

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

コメント

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

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

Twitter

  1. モバプロ2レジェンド

    モバプロ2レジェンド[スキマに届けっ!?-第一回-]
  2. モバプロ2レジェンド

    新Spread5名考察~新時代のヒーロー特性キターー!!~モバプロ2レジェンド
  3. 幻影戦争

    FFBE幻影戦争 #1 | 初心者の館 ジザ&幻音の鈴を手に入れよう
  4. モバプロ2レジェンド

    モバプロ2レジェンドオーダー考察~レジェC編~
  5. モバプロ2レジェンド

    残りのヒーロー登場か!?~これでまた強くなる…~モバプロ2レジェンド
PAGE TOP