『HTML』について(1) ブロガーさんのためのHTML | 線路の外の風景

線路の外の風景

様々な仕事を経験した管理人が、日々思っていることなどを書き綴ります。基本的に,真面目な内容のブログです。

 今回は、Web関係の仕事をするには必須スキルの1つである,HTMLについての話題です。

 

 HTMLについては,Webの専門家ではなくても,名前くらいは聞いたことがあるという人が多いと思いますが,正式名称はHyperText Markup Languageといい,インターネット上に掲載されるWebページの内容を記述するための言語です。

 もっとも,最近はHTMLに関する知識が無い素人さんでも,簡単なWebページを作ることができるように,様々なサービスが開発されていますが,そうしたサービスを利用して作られるWebページでも,作者の投稿した内容が自動的にHTMLに変換される仕組みになっているだけで,HTMLが使用されていないというわけではありません。

 このアメブロもそうしたサービスの1種であり,各ブロガーさんの投稿した記事の内容を,アメブロさんの方で自動的にHTMLに変換して,ブログ記事としてWebページに掲載してくれるわけです。

 

 そのため,HTMLに関する知識が全く無い人でも,このアメブロを使ってブログを開設し,記事を投稿することは十分出来るわけですが,HTMLに関する知識が全く無意味というわけではありません。

 アメブロで記事を書く際の画面には,『通常表示』と『HTML表示』という2種類の表示モードがあり,『通常表示』の方は,単にWord文書などを書くのと同じような感覚でブログ記事を書くことが出来ますが,『HTML表示』に切り替えると,HTMLで記事を書くことも出来ます。

 アメブロの『通常表示』には,例えば記事本文の中に見出しを作ったり,文字の一部を太字斜字にしたり,文字に色を付けたりマーカーを付けたり,下線取り消し線を付けたり,他のウェブサイトにリンクを貼ったり,記事を左揃えではなく中央揃えや右揃えにしたり,箇条書きにしたりといった機能があり,これらの機能を利用するにあたっては,別にHTMLを使う必要はありません。

 しかし,記事を書くにあたって,こうした『通常表示』にない機能を利用したい場合には,『HTML表示』の出番となります。

 

 

 例えば,管理人の書いた前回の記事では,このような表が出てきました。

 

<過去5年間における司法試験合格者数等の推移>
  合格者数 対受験者合格率 合格基準点
平成27年 1,850人 23.1% 835点
平成28年 1,583人 22.9% 880点
平成29年 1,543人 25.9% 800点
平成30年 1,525人 29.1% 805点
令和元年 1,502人 33.6% 810点


 このような表を作る機能は,アメブロの『通常表示』には無いので,管理人がこの表を作るにあたっては,HTML表示機能に切り替えた上で,最近インターネット・アカデミーで習ったばかりの知識を活用して,以下のとおり入力しました。

 
<table border="1" cellpadding="10" width="500">
    <caption><span style="font-weight:bold;"><過去5年間における司法試験合格者数等の推移></span></caption>
    <tbody>
        <tr align="center">
            <th>&nbsp;</th>
            <th>合格者数</th>
            <th>対受験者合格率</th>
            <th>合格基準点</th>
        </tr>
        <tr align="right">
            <td>平成27年</td>
            <td>1,850人</td>
            <td>23.1%</td>
            <td>835点</td>
        </tr>
        <tr align="right">
            <td>平成28年</td>
            <td>1,583人</td>
            <td>22.9%</td>
            <td>880点</td>
        </tr>
        <tr align="right">
            <td>平成29年</td>
            <td>1,543人</td>
            <td>25.9%</td>
            <td>800点</td>
        </tr>
        <tr align="right">
            <td>平成30年</td>
            <td>1,525人</td>
            <td>29.1%</td>
            <td>805点</td>
        </tr>
        <tr align="right">
            <td>令和元年</td>
            <td>1,502人</td>
            <td>33.6%</td>
            <td>810点</td>
        </tr>
    </tbody>
</table>
 
 HTMLに馴染みのない方は,「一体何のこっちゃい?」などと思われるかも知れませんが,この程度のことはHTMLの中でもごく初歩的な技術なので,せいぜい数時間程度の勉強で使いこなせるようになります。また,アメブロの『HTML表示』には入力補助機能があるので,一からHTMLを使ってWebページを作る作業に比べれば,比較的使いやすいです。
 ただし,ここでは記事が冗長になるので,各記述がそれぞれどのような意味を持つかという説明はしません。興味があるという方は,以下のサイトなどを参照してください。
<参照>
『ごく簡単なHTMLの説明』(The Web KANZAKI)
 

 ただし,このようにHTML表示機能を使って表を作る場合の注意点として,読みやすさ(アクセシビリティ)に細心の気配りをする必要がある,ということを指摘しておかなければなりません。
 実際,管理人が前回の記事を投稿するにあたり,読みやすい形にするために表の仕様をいろいろ工夫する必要があったほか,開設当初のブログデザインでは表全体が表示されないという不具合があったため,ブログデザインを変更して記事の表示される範囲を広くする必要がありました。それでも,読者さん側の環境によっては,こうした表は読みにくいという事態が生じる可能性も皆無とは言えません。
 少なくとも,記事の内容に照らし,わざわざ表を作る必要などないのに,ブログ上でやたらと大きな表を作りまくるような行為は,読者さんの迷惑になるだけなので,止めた方がいいでしょう。
 また,HTMLには表を作る以外にも様々な種類や機能があり,中にはアメブロさんの『HTML表示』では対応していないという機能もあると思いますので,その点についても注意してください。