メールアドレス:

  パスワード:

デモ表示

記事エディタ

HTMLの編集規則について

こちらはHTML初心者向けの内容となっています(中級者はこちら)

まず、HTMLは「タグ」と呼ばれるモノを使って記述します。種類が沢山あるので一部よく使うものを紹介していきたいと思います

  • h1タグ。「<h1>ホルンパート</h1>」このように記述します(下のように見えます)。h1タグは"タイトル"の表現として利用します。殆どのタグは「<○○>表示される文字</○○>」というように使用します。

    ホルンパート

  • pタグ。「<p>僕たちは、いつも元気なパートです!</p>」このように記述します。pタグは"段落"の表現として利用します。

    僕たちは、いつも元気なパートです!

  • imgタグ。「<img src="img/head.jpg" style="width:100%;">」このように記述します。imgタグに閉じタグはありません。srcのところに画像の場所を教えてあげることで画像を表示します。styleは定型文だと思ってください。中級者編にて紹介します。

    また、自分が持っている画像を使いたいという場合は管理者に依頼し、画像の場所を聞いてください。

  • tableタグ。エクセルのようなマス(表)を作ります。

    captionタグ。表のキャプション。

    theadタグ。多くは1行目に置かれる、この列がどんな項目か、を書くとこ(thタグ)をまとめる。

    trタグ。行をまとめる。

    thタグ。この列がどんな項目か、を書くとこ。

    tdタグ。表の1要素の中身。

    <table>
     <caption>ホルンのメンバー</caption>
     <thead>
      <tr>
       <th>学年</th><th>ニックネーム</th><th>どんな人?</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>5年</td><td>とみー</td><td>htmlの神</td>
      </tr>
      <tr>
       <td>3年</td><td>そーた</td><td>webデザイナ</td>
      </tr>
      <tr>
       <td>1年</td><td>たろー</td><td>HP改革の申し子</td>
      </tr>
     </tbody>
    </table>

    ホルンのメンバー
    学年ニックネームどんな人?
    5年とみーhtmlの神
    3年そーたwebデザイナ
    1年たろーHP改革の申し子
  • aタグ。「<a href="part.html?page=hr">ホルンパートのページ</a>」このように記述します。href=""のところにURLを記述します。

以上です。いかがでしょうか。

使わないでほしいタグも紹介しておきます。

  • fontタグ。「<font size="1">小さい文字</font>」なんてやると、簡単に小さい文字を作れます。

    やめてください。現代のhtmlではサポートされてません。使えるけどね。例えば、PCとスマホで見た目が大きく変わってしまう可能性を含んでいます。スマホだと読めるけど、PCだと文字が小さ過ぎたり…。

    正直、フォントサイズを変えたほうがいいなんてことほとんどありません。もしフォントサイズを変えたいならなら中級編style属性を見てください。

  • uタグ。アンダーラインが付きます。これも現代htmlで廃止されてます。そもそもアンダーラインなんてつけたらリンクっぽくなっちゃうからおすすめしません。

よろしくお願いします。

中級者編

ここからは初心者向けを読み、習得した人、htmlに詳しい人向けになっています。

まずはこちらをご覧ください。

imgはタグ名です。知ってますよね。

srcや、styleのことを属性と言います。

src属性について説明します。これはimgタグに適用される属性で、画像の場所を指定するときに使われます。

次はstyle属性について説明します。これは、見た目を調整することが出来ます。これは少し詳しく見てみましょう。以下はstyleの中に書けるものです。

  • 「width:100%;」これはimgに適用することで画像が横幅に合うように調整してくれます。100%でなく50%なども試してみると挙動がわかると思います。

    <img src="img/head.jpg" style="width:50%;">

    <img src="img/head.jpg" style="width:75%;">

  • 「color:red;」これはpやh1に適用することで文字色を変更できます。色は英語で主要なもの(blue, green, red, white, pinkなど)はほとんど使用できます。細かく設定したい場合は16進数RGBを利用できます。下の仕様例をご覧ください。

    <p style="color:red;">赤色</p>

    <p style="color:blue;">青色</p>

    <p style="color:#cccccc;">灰色</p>

    赤色

    青色

    灰色

  • 「font-size:50px;」これはpタグなどに適用することで文字サイズを変更できます。

    <p style="font-size: 10px; color: red;">ちいさいあか</p>

    <p style="font-size: 55px; color: blue;">おおきいあお</p>

    ちいさいあか

    おおきいあお

これくらいでしょうか。htmlもstyle属性(CSS)も、ネットで調べたら山ほど情報が載っています。上で取り上げたのはごくごく一部なのでもっとちゃんと組みたい人は調べてみてください。

コンタクト受信箱