読者です 読者をやめる 読者になる 読者になる

ただし(仮)のメモ

平塚在住,無職,うつ病,孤独

HTMLのお勉強(基本構造、見出し、段落、リスト、表)

HTML/CSS

勉強用の書籍はHTML/CSSデザインの教科書です。

はてな記法に変えました。

HTML/CSSの勉強を始めたのでソースコードを張り付けたいと思い調べたところ、はてな記法スーパーpre記法(シンタックス・ハイライト)の機能を使う方法が簡単そうだったので見たまま編集から思い切ってはてな記法に変えちゃいました。
見たまま編集と違って表示がHTMLっぽい感じになっちゃうのが難点ですけど、HTML/CSS勉強するなら丁度いいよなぁということで。
行数が書かれていないのがちょっと不便ですが…

勉強したことのまとめ

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ページのタイトル</title> 
    </head>
    <body>
        コンテンツ
    </body>
</html>

以上のコードがHTMLを記述するうえでほぼ必須のコードのようです。

ソースコードの概要

  • DOCTYPE HTMLのバージョン指定
  • <html> HTML文書であることを示す
  • <head> ページの設定情報を記述(ブラウザ上に非表示)
  • <body> ページのコンテンツ(ブラウザ上に表示)

<html>のように<と>で囲まれたものをタグと呼び、<html lang="ja">のように属性を付けることができる。属性は半角空白で区切って複数付けることが可能。

< と > のHTMLでの記述方法

HTMLで<や>を書くためには&lt;や&gt;と書く必要があり、さらに&lt;や&gt;を書くためには&amp;lt;や&amp;gt;と書く必要があります。以下同様のことをやろうとすると&をどんどんamp;に変えていく必要があります。めんどいw

見出しタグと段落タグ

<h1>大大大見出し</h1>
<p>はてなブログでは記事のタイトルがh1タグで囲まれるようです。</p>
<p>大大大見出しという名前は私が勝手に付けただけです(笑)</p>

<h2>大大見出し</h2>
<p>はてなブログでは自分でHTMLで書かない限りh2タグが抜けるそうです。</p>
<p>h2タグを入れるべきどうかは問題になっているようですが、<br>
    私のような初心者にはよく分からないのでそのままにしておきます。</p>

<h3>大見出し</h3>
<p>はてなブログの大見出しで記述する場合にh3タグが挿入されます</p>

<h4>中見出し</h4>
<p>はてなブログの大見出しで記述する場合にh4タグが挿入されます</p>

<h5>小見出し</h5>
<p>はてなブログの小見出しで記述する場合にh5タグが挿入されます</p>

<h6>小小見出し</h6>
<p>はてなブログでは自分でHTMLで記述しない限りは記述されることはない</p>

<p>は段落タグで名前まんまの意味。<br>は改行。
<h1>~<h6>までは見出しタグと呼ばれ、こちらも名前のまんまの意味です。
上のソースコードの様な使い方は最悪だと思いますのでご注意ください(笑)
ブラウザ上での表示は以下の通り

大大大見出し

はてなブログでは記事のタイトルがh1タグで囲まれるようです。

大大大見出しという名前は私が勝手に付けただけです(笑)

大大見出し

はてなブログでは自分でHTMLで書かない限りh2タグが抜けるそうです。

h2タグを入れるべきどうかは問題になっているようですが、

私のような初心者にはよく分からないのでそのままにしておきます。

大見出し

はてなブログの大見出しで記述する場合にh3タグが挿入されます

中見出し

はてなブログの大見出しで記述する場合にh4タグが挿入されます

小見出し

はてなブログ小見出しで記述する場合にh5タグが挿入されます

小見出し

はてなブログでは自分でHTMLで記述しない限りは記述されることはない

リストタグ

<ul>
    <li>嗣永桃子</li>
    <li>山木梨沙</li>
    <li>森戸知沙木</li>
    <li>小関舞</li>
    <li>梁川奈々美</li>
    <li>船木結</li>
</ul>
<ol>
    <li>モーニング娘。</li>
    <li>℃-ute</li>
    <li>アンジュルム</li>
    <li>Juice=Juice</li>
    <li>カントリーガールズ</li>
    <li>こぶしファクトリー</li>
    <li>つばきファクトリー</li>
</ol>

こちらも名前の通りの使い方です。
<ul>はUnordered Listの略で順序の関係ないリスト。
<ol>はOrdered Listの略で順序の関係あるリスト。
ちなみに上記のULはカントリーガールズのメンバー全員の名前。
OLは現在のハロプロのグループを人気順で並べました。カンガルとこぶしは逆かも。
ブラウザ上の表示は以下

  1. モーニング娘。
  2. ℃-ute
  3. アンジュルム
  4. Juice=Juice
  5. カントリーガール
  6. こぶしファクトリー
  7. つばきファクトリー

テーブルタグ

<table>
    <caption>℃-ute</caption>
    <tr>
        <th>矢島舞美</th>
        <td>正統派リーダー</td>
    </tr>
    <tr>
        <th>鈴木愛理</th>
        <td>ギャグ担当、人気No1(多分)</td>
    </tr>
    <tr>
        <th>岡井千聖</th>
        <td>バラエティ担当</td>
</table>

こちらも(ry
<caption>は表のタイトル
<tr>はTable Rowの略で直訳すれば表の行。
<th>はTable Headerの略でセルの内容が「見出し」となるヘッダセルを作成。
<td>はTable Dataの略。
ブラウザ上の表示は以下。

℃-ute
矢島舞美 正統派リーダー
鈴木愛理 ギャグ担当、人気No1(多分)
岡井千聖 バラエティ担当
ちなみに

<table border="1">
    <caption>購入金額表</caption>
    <thead>
        <tr>
            <th>商品名</th>
            <th>単価</th>
            <th>個数</th>
            <th>合計</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>写真集</th>
            <td>2000円</td>
            <td rowspan="2">3個</td>
            <td>6000円</td>
        </tr>
        <tr>
            <th>BD</th>
            <td>7000円</td>
            <td>21000円</td>
        </tr>
        <tr>
            <th>CD</th>
            <td>1500円</td>
            <td>7個</td>
            <td>10500円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3">合計</th>
            <td>31500円</td>
        </tr>
    </tfoot>
</table>

こんな感じに記述すると

購入金額表
商品名 単価 個数 合計
写真集 2000円 3個 6000円
BD 7000円 21000円
CD 1500円 7個 10500円
合計 37500円

勉強した感想

今日は調子が良かったので2時間以上勉強できたと思います。
とりあえずサンプル通りに書いてみて思ったのは面倒くさいの一言w
最後の表なんてこの程度の大きさでも作るのはかなり大変でしたからね。
なので実際はツールを使って作るんでしょうが、1回くらい自力でやってみるのもいいよね。
仕組みを知るのはいいことだと思いますし、書いてみなきゃわからないこともある。
あとタグの英字が何の略かは絶対に調べた方がいい。それだけでかなり理解しやすくなった。
頭のいい人は見ただけでサラサラと理解しちゃうのかも知れませんが俺は俺のペースでやるぜ!