プログラミング

【HTML5入門】2-3 引用

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、文章内で使用する強調表現や重要性の表現、区切りについて学びました。

今回は、引用表現について学んでいきましょう。

「引用」の際に用いる2つのタグ

文章の中で、どこか別のWebサイトから引用してきたような場合に、通常の表記とは違った見せ方をすることができます。モラル的にも、どこかから引用した文章は、それが「引用」であることが読者に伝わるのが望ましいでしょう。

ここでは、引用表現をすることができる2つのタグをご紹介します。

blockquoteタグ

blockquoteタグは、段落をまとめて引用するような場合に使用します。

「block」は、ブロック全体を意味します。そして「quote」には、引用という意味があります。これらを合わせてblockquoteとなります。長い単語ですが、その意味を分けて理解すれば覚えやすいと思います。

qタグ

qタグは、先ほど説明した「quote」という意味の略で、文章内の一部分のみに引用表現を用いたい場合に使うことのできるタグです。

引用元を表記するには

上記2つのタグを用いて、「引用表現」自体は行うことができるのですが、どのWebサイトから引用されたのかを示すことができていません。これは。上記タグに「属性」をつけてあげることで可能になります。

cite属性

cite属性は、タグに合わせて使用し、どのWebサイトを参照しているのかを表記することができます。

cite属性の書き方は、「cite=”URL”」となります。URL部分に、参照元のWebサイトのURLを記載すればOKです。

HTMLに記述してみよう

では、今回学んだ2つのタグと1つの属性を使って、実際にHTMLファイルに記述をしてみましょう。今回は、以下のようなHTMLを使用します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox.
    </p>
    <p>
      ある人は言った 我思う故に我あり
    </p>
  </body>
</html>

「The quick〜」の文章について

この文章は、アルファベットのAからZと、「.(ドット)」と「,(カンマ)」を全て網羅していることから、よくフォントの表示のチェックに使用されるテキストとなります。こういう文章があることを覚えておいても良いかもしれません。

blockquoteタグを使用してみよう

では、まずはblockquoteタグを「The quick〜」の文章に適用してみましょう。コードは以下のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <blockquote>
      <p>
        The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox.
      </p>
    </blockquote>
    <p>
      ある人は言った 我思う故に我あり
    </p>
  </body>
</html>

pタグを囲むようにして使用しています。同時に、pタグは一段インデントを下げているのが確認できると思います。

実際にこれをWebブラウザで表示すると、以下の画像のように表示されます。

下の文章に比べて、文頭にスペースができているのがわかりますね。blockquoteタグによって、この文章全体が「引用」であることを示しています。

qタグを使ってみよう

では次に、2段落目の文章の「我思う故に我あり」にqタグを使用してみましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <blockquote>
      <p>
        The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox.
      </p>
    </blockquote>
    <p>
      ある人は言った <q>我思う故に我あり</q>
    </p>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。以下のようになると思います。

qタグで囲んだ部分がかぎかっこで囲われたのがわかりますね。これはWebブラウザやバージョンの違いによって「”〜”(ダブルクォーテーション)」で囲われる場合もあったりします。

タグにcite属性を付与して、引用元を表記してみよう

では、上記2つの引用タグに、引用元を表記するためにcite属性を付与していきましょう。実際にタグにcite属性を付与する場合は、下記のような書き方となります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <blockquote cite="http://www.example.com/story.html">
      <p>
        The quick brown fox jumped over the lazy dog. Then, the dog chased after the fox.
      </p>
    </blockquote>
    <p>
      ある人は言った <q cite="http://www.example.com/philosophy.html">我思う故に我あり</q>
    </p>
  </body>
</html>

実際にcite属性を付与したのみでは、Webページを更新しても何の変化もないように見えるかもしれません。しかし、実際にこれで引用元の表記は完了しています。

実際にこれをどのようにページ上に引用元を表記したり、引用元をリンクで参照したりすることができるようになるか、というのは、また別のところで学習するので、今回はcite属性の使い方をマスターできればOKです。

おわりに

今回は、引用表現について学びました。HTML自体ではあまり使わないかもしれませんが、実際に文章を書くときにも、引用に関する表現はよく使用します。HTMLではタグや属性付与によって引用表現が可能になる、ということを覚えておくと良いでしょう。

次の記事はこちら

GitHubの有用性

エンジニアがコードを共有するために使われるGitHub。私自身も、実際に使うまでは、使い方がよくわからなかったサービスの1つですが、いざ使ってみると、その有用性の高さに驚きます。

GitHubは、誰かにコードを共有するために使われるのみならず、自分自身のコードの保存、いわゆる「セーブデータ」を作成する役割も持ちます。これにより、開発に行き詰まった時に、一旦最後に保存した点まで戻る、ということが可能になります。

今回は、GitHubを使用することの有用性について述べていきたいと思います。

GitHubとは

そもそもGitHubとはどんなサービスなのかを少し整理してみることにします。

GitHubは、「Git」と呼ばれるソフトウェアのバージョン管理システムに、よりチーム開発に適した機能を兼ね備えた、いわばGitの進化系のようなものです。

Git自体は、PCに様々なコマンドを打ち込むことでバージョン管理を可能にするものですが、それを視覚的にわかりやすくしたものが、GitHubといえます。

GitHubの持つ機能

GitHubには、例えば以下のようなチーム開発を助けるための様々な機能が備わっています。

  • issues
  • Pull Request

Issues

issuesは、主にプロジェクトのバグを管理する時などに使われます。問題が起きた時に、issuesに内容を投稿することで、現在、自分の開発環境にどんな問題が起きているのかをチーム開発メンバーが知ることができます。

issuesにはフィードバック機能があり、絵文字レスポンスやコメントなどが可能です。

Pull Request

Pull Requestは、一単位分の開発が一通り終わった時に使用する機能で、コードをアップすることで、チーム開発メンバーからレビューをもらうことができます。

実際にアップされたコードを引用して指摘することが可能なので、フィードバックを受けた側も、どこを訂正すべきかなどを探しやすくなっています。

この他にも、GitHubには、チーム開発を助けるための機能が沢山あります。

GitHubの最も大きなメリット

GitHubを使用する最も大きなメリットは、「多様な公開ソースコード」にあると思います。GitHubは、チーム開発だけでなく、世界中のあらゆるエンジニアやサービスのソースコードが公開されており(もちろん、公開可能なものに限る)、そこから開発のヒントを得ることも可能です。

例えば、Ruby on Railsで使われる「Gem」と呼ばれるプログラムの部品のようなものがあるのですが、ものによっては、特定のGemがどのような動きをするものなのかがGitHub上で公開されている場合があります。

筆者自身は、開発時に、ユーザー管理が簡単にできる「devise」というGemが思ったように挙動してくれなくて、GitHubを参照した経験があります。そこからうまくいかない部分をピックアップして、自分のRailsアプリケーションに記述を取り込んだりしました。

もし、作業に行き詰まることがあったら、ぜひGitHubで先人のソースコードなどを参照してみるのも良いかもしれません。

【HTML5入門】2-2 強調・重要性の表現と区切り

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、文章における段落と見出しの作り方について学びました。

今回は、文章を目立たせたい時に使う強調・重要性の表現や、段落の区切りを示したい時に使えるタグについて、見ていきましょう。

「強調」を示すタグ

文章の中で、ある特定の単語や表現を強調させたいような場合があると思います。その時に、該当する単語や表現を、「emタグ」によって囲むことによって、強調表現ができます。

emタグ

emタグの「em」は、emphasize(強調する)という英単語の略です。

<em>〜</em>とすることで、間で囲まれた部分が“斜体表示”されるのが一般的です。

斜体表示させたいからemタグを使う→×

Google Chromeをはじめとする多くのWebブラウザで、emタグを使うと斜体表示されるように初期設定がされていますが、あくまでもそれはWebブラウザの設定上の話です。ですので、斜体表示させるために場合には、別の言語「CSS」について学ぶ必要があります。

ここでは、「あくまでも斜体表示は、強調された結果によるもの」である、という認識をしておく必要があります。

「重要性」を示すタグ

次に、文章内で「この部分が重要である」ということを伝えたい時に使われるタグをご紹介します。

strongタグ

strongタグは、その言葉の意味通り、特定の単語・表現の強さを示す場合に使われます。

<strong>〜</strong>とすることで、間で囲まれた部分が“太字表示”されるのが一般的です。

太字表示させたいからstrongタグを使う→×

emタグと同様、strongタグにも同様のことが言えます。こちらも、「あくまでも太字表示は、重要性を示した結果によるもの」である、という認識をしておきましょう。実際の強調表現などのカスタマイズは、「CSS」で、様々な「強調」や「重要性」の表現の仕方を学ぶことによって可能になります。

「区切り」を示すタグ

段落間の区切りをわかりやすい形で伝えたい場合は、以下のタグを使用します。

hrタグ

hrタグは”horizontal rule”の略で、水平方向の罫線という意味があります。基本的に文章のセクションを示す意味で使われます。

閉じタグは必要なく、段落の間などに<hr>と入力するだけで使用することができます。

上記タグをHTMLに記述してみよう

では、実際にご紹介した3つのタグを、HTMLファイル記述していきましょう。

最初のHTMLは、前回の記事で使用した以下の状態にしておきます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <h2>これはh2です</h2>
    <h3>これはh3です</h3>
    <h4>これはh4です</h4>
    <h5>これはh5です</h5>
    <h6>これはh6です</h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

emタグを使ってみよう

では、まずは1つ目の段落の「Lorem ipsum」の表記を強調表示させてみましょう。記述は下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <h2>これはh2です</h2>
    <h3>これはh3です</h3>
    <h4>これはh4です</h4>
    <h5>これはh5です</h5>
    <h6>これはh6です</h6>
    <p>
      <em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで表示すると、以下のようになると思います。

わかりやすいように、変えた場所を選択してみました。斜体表示されているのが確認できますね。

strongタグを使ってみよう

では次に、2段落目の「Lorem ipsum」を重要な部分として示すために、strongタグを使用してみましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <h2>これはh2です</h2>
    <h3>これはh3です</h3>
    <h4>これはh4です</h4>
    <h5>これはh5です</h5>
    <h6>これはh6です</h6>
    <p>
      <em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      <strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。以下のようになると思います。

選択した部分が、しっかりと太字表示されていますね。

hrタグを使ってみよう

最後に、hrタグを用いて、1段落目と2段落目の間に区切り線を挿入してみましょう。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <h2>これはh2です</h2>
    <h3>これはh3です</h3>
    <h4>これはh4です</h4>
    <h5>これはh5です</h5>
    <h6>これはh6です</h6>
    <p>
      <em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr>
    <p>
      <strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで確認すると、下記画像のようになると思います。

段落の間に線が引かれているのが確認できますね。これがhrタグの効果となります。

おわりに

今回は、文章の強調表示や重要な部分の表示、そして区切り線を入れるためのタグについて学びました。ページの作成に絶対に必要なタグというわけではありませんが、読者に意図を正確に伝えるために役に立つことの多いタグですので、ぜひ、積極的に使ってみてください。

次の記事はこちら