第20回：HTML&CSS講座本編2「見たまま編集の内容を、HTMLで書いてみよう」
どうも、シノです。
皆さん、免許の更新ってちゃんとしていますか？私はギリギリまで忘れていて、慌てて更新してきました。気を付けましょうね…(特大ブーメラン)
ちなみに、期限を過ぎても半年以内なら+数千円で再発行ができます。過去に一度やったことがあるのですが、期限が切れてからこの再発行するまでの間は無免許状態なので、早めに更新するようにしましょう。
さて、今回はHTML&CSS講座第3回です。
タイトルの通り、はてなブログの見たまま編集の内容を、HTMLで書くとどうなるかを説明していきます。また、それだけではなく、他に重要かなと思った内容も追加しようかなと思っています。
そして、今回の本当の目的は、「具体的なタグを参考に、HTMLを書くことに慣れていく」ことです。前回でなんとなく理解できたと思います。なので、それをアウトプットして使える武器にしていきましょう。もちろん、これらのタグが使えるようにもなってほしいですが（笑）
目次は以下の通りです。項目ごとに目次を作ったので長くなってしまいました(´・ω・｀)
- 0.前回の復習
- 1.見出し
- 2.箇条書き＆番号付きリスト
- 3.リンク
- 4.続きを読む
- 5.引用
- 6.目次
- 7.脚注
- 8.太字、斜体、打消し線、下線、文字サイズ、文字色
- 9.オマケ：インデント
- 10.オマケ：コメント
- まとめ
0.前回の復習
前回は、とりあえずHTMLを書いて表示してみようということで、サンプルコードを書いて、表示してみました。以下の記事です。
どうでしたでしょうか、皆さん表示できましたか？改めてサンプルコードや表示結果は貼りませんが、最後にまとめとして貼ったタグを再掲しておきます。とりあえずここら辺は知っておこうという内容でしたね。
- <title>と</title>の中に、ブラウザタイトルを入れる。
- <body>と</body>の中に、実際のページ内容を書いていく。
- <h1>と</h1>の中に、見出しを書く。数字は1が一番大きい見出しで、6が一番小さい見出し。
- <p>と</p>の中に、1段落を書く。
- <br />と書くと、そこで改行される。
これらは、どんなHTMLでも必ず使うと言っても過言ではないだろうレベルで使用します。ただ、現状はサンプルをコピーしてきて、h1タグの数字を変えて別の見出しを作ってみたり、pタグで段落を作ったり、brタグで改行したりくらいしかできません。
そのため、今回紹介する内容も是非身に付けてください。
なお、今回は前回と異なり、解説の細かさは1種類にします。前回は、サンプルを全部見せて、とりあえずの方向けの解説を全部やり、そのあとにしっかり理解したい方向けの解説をしました。なんで前回解説の深さを2種類にしたかというと、俗に言う「おまじない」が入っていたからですね。まあ、おまじないの一言で済ませるのが嫌で、詳しい解説を書いたというのが本音なのですが（笑）
今回は、各項目で、以下の順番で解説します。
- 見出し：見たまま編集のボタンにカーソルを合わせたときに出る説明
- 表示例：ブラウザで表示した結果例
- タグ・説明：HTMLタグ(<title>と</title>など)
- サンプル：サンプルHTML(該当タグのみ記載)
いったん説明してからサンプルを見た方が分かりやすいでしょう。また、サンプルを見た後でいいので、自分で表示例と同じものが再現できるかも是非挑戦してみてください。
では、早速本編開始です！
1.見出し
…いきなりですが、これは前回やってしまいました。h1～h6タグです。見たまま編集で作成できるのはh3～h5タグですね。もう解説済みなので飛ばしちゃいます。これ入れると目次を自作しなきゃいけなくて面倒なので許してください(´・ω・｀)
2.箇条書き＆番号付きリスト
この2つは使い方が似ているので、両方同時に見ていきます。まずは表示例を。
箇条書き
- 一つ目
- 二つ目
Shift+Enterを押すと項目内の改行もできます。 - 三つ目
番号付きリスト
- 一つ目
- 二つ目
こちらもShift+Enterで項目内改行可能です。 - 三つ目
はい、こんな感じです。よく見るかと思います。次に、このHTMLのタグですね。
まず、箇条書きや番号付きリストは、全体をそれぞれ以下のタグで囲みます。
箇条書き：<ul>と</ul>
番号付きリスト：<ol>と</ol>
そして、両方とも1つの項目は<li>と</li>で囲みます。両方とも同じ構造で、一番外側だけ番号をつけるかつけないかで変わるイメージです。
具体例を見た方が分かりやすいでしょう。上の2つのHTMLは以下のようになっています。赤字のタグがそれぞれの全体、青字のタグが1つの項目になります。
箇条書き
<ul>
<li>一つ目</li>
<li>二つ目<br />Shift+Enterを押すと項目内の改行もできます。</li>
<li>三つ目</li>
</ul>
番号付きリスト
<ol>
<li>一つ目</li>
<li>二つ目<br />こちらもShift+Enterで項目内改行可能です。</li>
<li>三つ目</li>
</ol>
この例を見ていただけると分かると思うのですが、項目内で改行をするときは、<br />を入れてあげます。そうすると、新しい点や番号をつけずに改行することができます。
3.リンク
これは、3種類のリンクを貼ることができる機能ですね。試しに、WikipediaのHTMLの項目をこのボタンで貼ってみましょう。
埋め込み
えー…貼ってわかったのですが、一般的に「リンク」と言われているタグを使っているのはURLとタイトルみたいですね。埋め込みは、全く別のタグを使っていました。さらに、このあと別の記事で解説するつもりのCSSもガンガン使ってます。ここでは、いったんHTMLの部分だけ見ていきましょう。
3-1.aタグ
リンクを貼る際に使用するのは、aタグです。書き方は以下の通り。
<a href="(リンク先のURL)">リンクさせたい文字列</a>
URL、タイトル両方でこのタグが使われています。違うのはリンクさせたい文字列だけです。なお、このhref="(リンク先のURL)"がオプションなのですが、このオプションは必須です。行先がないと、リンクのしようがないですからね。
上のサンプルのソースコードは以下の通りです。
URL
<a href="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">https://ja.wikipedia.org/wiki/HyperText_Markup_Language</a>
タイトル
<a href="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">HyperText Markup Language - Wikipedia</a>
これで、リンクを貼ることができました。これも非常によく使うので、覚えておきましょう。
ちなみに、このままだとリンクをクリックしたときに同じページで開いてしまいます。別タブで開きたい場合は、「 target="_blank"」をhref="(リンク先のURL)"の直後に入れてあげましょう。これもオプションなのですが、オプションを複数入れるときは、半角スペースで区切ってください。
3-2.iframeタグ
埋め込みリンクで使用されているタグです。厳密には、この下にaタグが使われています。aタグは上で解説したので、ここではiframeタグのみを見ていきましょう。
まず、埋め込みについて、HTMLタグのみに直して表示してみます。
埋め込み
ちょっと枠が小さくなりましたね。ここのCSSでやっていたのは、どうやら枠の大きさの調節みたいです。
で、この埋め込みは、iframeタグを使っています。これは、HTML内に別のHTMLをフレームとして埋め込むものです。だから、iframeという名前なんですね。
<iframe title="(フレームのタイトル)" src="(埋め込むHTMLのURL)" frameborder="0" scrolling="no"></iframe>
ボタンによる設置だと、4つのオプションがあります。必須は、前の2つですね。後ろ二つは、HTML5のバージョンだと非推奨(というか廃止？)だそうです。のちに解説するCSSで設定するようにしましょう。
title：そのフレームのタイトルを入力する。
src：埋め込むHTMLのURLを入力する。別サイトでももちろんOK。
ひとつ補足。titleオプションは、音声読み上げ等への補助です。表示には直接関係ありませんが、埋め込む先のページタイトル等を入れてあげるようにしましょう。
ここまでを踏まえて、実際のソースを見てみます。
埋め込み
<iframe title="HyperText Markup Language - Wikipedia" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fja.wikipedia.org%2Fwiki%2FHyperText_Markup_Language" frameborder="0" scrolling="no"></iframe>
これを使えば、別ページを埋め込んであげることができます。あと、動画を埋め込んだりGoogleMap埋め込んだりはよくこのタグが使われています。
4.続きを読む
これは、上で解説した内容で説明できちゃいます。
この機能は、そもそもブログトップにアクセスした際に、全部を表示するのではなく、途中までを表示し、「続きを読む」を押すと記事のページに移動するものです。つまり、トップでは途中までと記事へのリンクを貼っているんですね。ということは、aタグで再現可能です。
5.引用
別のサイトや本などから内容を持ってくるときに使うものですね。表示例は以下の通りです。
ここに引用する内容を書きます。
ここには箇条書き等も入れることができます。
はい、たまーに使っているやつです。これは簡単で、引用にしたい部分を<blockquote>、</blockquote>というタグで囲むだけです。囲んだ部分が引用になります。
上の引用部分は以下のようなソースになっています。
<blockquote>
<p>ここに引用する内容を書きます。</p>
<p>ここには箇条書き等も入れることができます。</p>
</blockquote>
6.目次
ページの最初の方でやっている、記事の一覧です。これは、はてなブログですと[:contents]という文字列を入れればそこに、h1～h6タグから自動で生成された目次が入るようになっています。
これも実はaタグで実現できるのですが…ちょっと説明することがあまりに多くなってしまいそうなので、詳細は書きません。別の記事にしたいと思います。
7.脚注
これは私の記事では使ったことないですね…
ちょっと使ってみましょう。
脚注をつける文章*1
これでつけられてますでしょうか…プレビューを見た感じ大丈夫そうですね。で、これもうまいことaタグを利用してつけられています。半分くらい目次と同じ方法です。
ということは…はい、すみませんがこれも説明は別の記事とさせてください。現時点でかなりの長さで、読む皆さんも大変だと思います。
8.太字、斜体、打消し線、下線、文字サイズ、文字色
こんな見出しになっているので、勘のいい方は気づいているかもしれませんね（笑）
これらの項目は、ここでは解説しません！あ、ちょっと待って。しっかり理由があるんです。
これらの項目は、他とは違うことにお気づきでしょうか。
もともと、HTMLは「文章の意味づけ」をする、CSSは「見た目」を変えると説明したかと思います。
で、これまで説明してきたものは、全て「文章の意味づけ」です。見出し、箇条書き、番号付きリスト、リンク(続きを読む、目次、脚注もこれ)、引用。全て、その文章自体に意味がつけられていますよね。
それに対し、太字、斜体等は、確かに重要だという意味をつけることができますが、どちらかというとそれによって「見た目」を変えることの意味合いが強いです。
結局何が言いたいかというと、これらは全てCSSで表現できます。というか、見た目なのでCSSで表現すべきだと思います。そのため、CSSの説明部分でこれらを説明していきます。
9.オマケ：インデント
さて、ここまではHTMLのタグについて解説してきましたが、ここからはオマケです。
インデントというと、通常の文章でもある通り、意味が細かくなると行を下げて書き始めたりしますよね。
それと同じことを、HTMLでもやってあげます。
目安としては、タグが一つ深くなると、行頭もタブ一個分か半角スペース4個分くらい下げて始めます。
私はタブ一個分下げてます。これまでのサンプルコードでもやっているので、よかったら参考にしてみてください。これをやるのとやらないのでは、ソースコードの見やすさが段違いです。
10.オマケ：コメント
もう一つ、覚えていると使えるものを紹介します。
HTMLを書いていて、「ここにメモしたい」って思ったことはありませんか？そんなときは、このコメントを使いましょう。
このコメントは、HTMLには記載されるのですが、実際にページを表示する際には何の影響も与えません。その名の通り、その場所にコメントを残すんですね。
書き方は以下の通りです。
<!-- ここにコメントを書きます。 -->
はい、<!--と-->で囲むだけです。この中は改行もできます。
これ、実は使い方がもう一つあります。「いったんここの表示を消したいけど、またあとで使うかも…」となったとき、そこの部分をこのコメントで囲ってあげましょう。
すると、そこは表示されなくなります。でも書いた内容はHTMLに残っているので、再度表示するときもこのコメントを消すだけです。
この、いったんコメントにすることをコメントアウトと言い、よく使う技法です。覚えておきましょう。
まとめ
非常に長くなってしまいましたね。ここまで読んでくださった方、お疲れ様でした！
今回は、見たまま編集の内容をHTMLで書く場合に使うタグを紹介してきました。
これらが使えるようになれば、ウェブページに記載できることが増えてきます。また、このあたりまで来れば、今度は自分で「こんなことがしたい」っていうのが出てくるのではないでしょうか。
さすがにこのブログで全てのタグを網羅することは不可能なので、「こんなことがしたい」があれば、是非調べてみてください。
次回は、ようやく（笑）ですがCSSに手を出してみようと思います。これまでは意味をつけてきましたが、今度はその見た目を変えていきます。
これができるようになると見た目が華やかになるので、モチベーションも上がってくるのではないでしょうか。
更新情報はTwitterでも呟いてますので、よかったらフォローをお願いします！！！
次回：CSSを書いてみよう(2019/1/11投稿しました！！！)
それでは。
*1:脚注の内容
