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

ただし(仮)のメモ

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

HTMLのお勉強(アウトライン)

参考書籍はHTML/CSSデザインの教科書

アウトラインとは

うん、よく分かりませんでしたw
私のなんとくの理解によると、ブラウザ上の表示には関係なく、人間やプログラムがソースコードを理解しやすくするために記述するもの。
今回学んだタグ

文章のまとまりを表すタグ
article 内容が単体で完結する部分。ブログの1記事など。
aside 関連はあるが本筋と外れる内容。補足や広告など。
nav サイトの主要なナビゲーション
section 上記以外の区分
構造を表すタグ
header 見出し、導入、ロゴ、タイトル、目次、検索など
footer 執筆者、関連リンク、コピーライトなど
う~んこうして書いてみてもよく分からないです。
適応例が多すぎるので実際に色々と例を見て使い方を覚えていこうと思います。

今回の勉強で作成したソースコード

ほとんど参考書にのっている通りですが、文章をそのまま流用はNGとのことなので、内容をモーニング娘。の紹介にしてそれに伴いソースコードも多少変更したものを載せておきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>モーニング娘。紹介</title> 
    </head>
    <body>
    <article>
        <header>
            <h1>モーニング娘。'17</h1>
            <p>モーニング娘。は1998年に結成されたアイドルグループ。<br>
               メンバーの卒業、増員を繰り返し今もなお成長し続けているハロプロ人気No1のグループ。</p>
        </header>

        <section>
            <h2>モーニング娘。'17のメンバー</h2>
            <p>2017年に2人の新メンバーが加入し現在13人で活動している。</p>
            <table>
                <caption>メンバー一覧</caption>
                <thead>
                    <tr>
                        <th>名前</th>
                        <th>イメージカラー</th>
                        <th>補足</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>譜久村聖</th>
                        <td>ホットピンク</td>
                        <td>リーダー</td>
                    </tr>
                    <tr>
                        <th>佐藤優樹</th>
                        <td>エメラルドグリーン</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>牧野真莉愛</th>
                        <td>ライトピンク</td>
                        <td>まりあんラブリン</td>
                    </tr>
                </tbody>
            </table>
            <section>
                <h3>譜久村聖</h3>
                <p>モーニング娘。'17のリーダー、おっとりしているように見えるが実はしっかり者。</p>
            </section>
            <section>
                <h3>佐藤優樹</h3>
                <p>いろいろとおかしいけど0歳から英語習ってたりピアノできたり馬に乗れたりするすごい娘。クロッキの料理教室を見ると凄さが分かるかも。</p>
            </section>
            <section>
                <h3>牧野真莉愛</h3>
                <p>人気急上昇中の12期メンバー、かわいい。とにかくかわいい。</p>
            </section>
        </section>

        <footer>
            <section>
                <h2>関連リンク</h2>
                <ul>
                    <li>ハロープロジェクト公式HP</li>
                    <li>モーニング娘。youtube公式チャンネル</li>
                    <li>クロッキの料理教室(佐藤優樹&牧野真莉愛)</li>
                </ul>   
            </section>

            <aside>
                <p>参考</p>
                <h2>wikipedia(モーニング娘。)</h2>
                <ul>                                            
                    <li>wikipediaのモーニング娘。のページ</li>
                    <li>wikipediaメインページ</li>
                </ul>
                <p>メンバーカラーの確認に使わせていただきました。</p>
            </aside>
        </footer>
    </article>    
    </body>
</html>

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

勉強用の書籍は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回くらい自力でやってみるのもいいよね。
仕組みを知るのはいいことだと思いますし、書いてみなきゃわからないこともある。
あとタグの英字が何の略かは絶対に調べた方がいい。それだけでかなり理解しやすくなった。
頭のいい人は見ただけでサラサラと理解しちゃうのかも知れませんが俺は俺のペースでやるぜ!

孤独の恐怖

私は孤独に強いほうだと思っていた。

一人でいることが好きだったし、友達もほとんどいないが大丈夫だと思っていた。

だが一人暮らしをはじめて3ヶ月、ほぼ誰ともしゃべらずメールすらしていない。

その結果、自殺を考えるまでのレベルになった。

人はなくなってはじめてその存在の大切さに気が付くとよくいうがその通りだった。

 

孤独どころか周りの人間がうるさいとすら感じでいる昔の自分のような方には、孤独になりたいのは、それ以上に幸せな人と関わりあうということが出来ているからなんだということを分かってほしい。

 

今日は3ヶ月以上ぶりに母親と母方の祖母とあった。

私は今まで塞ぎ込んでいて、周りの人間に本心を話すことはなかった。

だがネットでいろいろ調べて、自殺を考える前に自分が楽になることを考えようという結論に至った。

私の方から「人と喋らなくておかしくなりそうだから会いたい」とメールした。

自分の方から誘うことも初めてだし、このような自分の弱さを見せるような内容のメールをしたのも初めてである。

色々なことを聞いて、私のことを心配してくれている気持ちが伝わってきた。

自分の方も素直に思っていることをさらけ出そうと思ったが、少ししか話せなかった。泣きたくなった時もあったが我慢してしまった。

まぁ外の店で泣くのもおかしいしなと言い訳しておく。

 

ともかく久々に人と会って話すことができたし、自分の思いを多少なりとも伝えることができたし、自分をこれ程までに心配してくれる人間がいるのかと感謝することができた

私にとっては大きな一歩だったと思う。

 

だからと言って気分が晴れたとかそういうことはなく、頭は相変わらずボーっとしているんですけどね。

でもまぁ生きていこうと思う気持ちが多少は回復したかな。