プログラミング

【HTML5入門】2-5 コード・改行・プリフォーマット

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

前回のおさらい

前回は、略語の正式名称の表示のさせ方や、名前の特記、住所表現について学んできました。

今回は、コード・改行・プリフォーマットについて学んでいきましょう。

プログラムのコードを表示する

例えば、本記事のような技術系の記事において、コードを表示させたいような時などに便利なタグがあります。

codeタグ

codeタグは、文字通り、「コード」を示すタグとなります。主にプログラム用語やコンピューター用語を示したい時に使用します。

改行をする

前回の記事でもちょっとだけ解説しましたが、改行を示すタグがあります。

brタグ

brタグは、「Line Break(改行)」という言葉を省略したものですが、実際にタグに用いられているのは「Break」の頭文字2文字です。これを入力することで、同一の段落であっても改行をして表示させることが可能になります。

HTMLファイルに入力した通りに表示させる

改行をしたい場合にbrタグを用いるなど、HTMLファイルから実際にWebページに表示させる際には一定の制約があります。これらを無視し、HTMLに記述したまま表示させることができるタグがあります。

preタグ

preタグは「pre-format」の省略です。これについては、説明をするよりも、実際にどのように表示されるかを見た方が分かりやすいと思いますので、進んでいきましょう。

HTMLに記述してみよう

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

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      If you try to execute the drive() function on the vehicle object, it goes on.
    </p>
    <p>
      思った通りに改行されないと、非常に読みづらくなります。
      特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
    </p>
  </body>
</html>

codeタグを使用してみよう

では、まずはcodeタグを使用してみましょう。1つ目の段落にある英文のうち、「drive()」と「vehicle」にcodeタグを適用してみます。適用後の記述は下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
    </p>
    <p>
      思った通りに改行されないと、非常に読みづらくなります。
      特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
    </p>
  </body>
</html>

この状態でWebブラウザを確認すると、下記のような表示になることが確認できると思います。

「drive()」と「vehicle」に注目してみてください。周りの表記と若干異なった表記になっているのが分かると思います。

brタグを使用してみよう

では次に、改行を表すbrタグを使用してみたいと思います。改行の結果がわかりやすいように、2段落目の文章をコピーして、3段落目を作りましょう。その上で、2段落目にbrタグを用いてみます。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
    </p>
    <p>
      思った通りに改行されないと、非常に読みづらくなります。<br>
      特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
    </p>
    <p>
      思った通りに改行されないと、非常に読みづらくなります。
      特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
    </p>
  </body>
</html>

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

brタグを適用した2段落目はしっかり改行されていることが分かりますね。

preタグを使用し、プリフォーマット表示をさせてみよう

最後に、3段落目にpreタグを用い、HTMLに書き込んだ通りの表示をさせてみましょう。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on.
    </p>
    <p>
      思った通りに改行されないと、非常に読みづらくなります。<br>
      特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
    </p>
    <pre>
      思った通りに改行されないと、非常に読みづらくなります。
      特に長い文章や、ニュース・ブログの記事だと、なお読みづらくなるでしょう。
    </pre>
  </body>
</html>

実際にどんな表示になるのか、Webブラウザで確認してみましょう。

preタグで囲んだ3段落目は、brタグを用いなくても改行がされていることが分かります。また、HTMLファイルで3段落目はpreタグの中の文章のインデントを1つ下げているので、左側が少し空いていることが分かります。

このように、HTMLファイルの記述を意図的にそのままWebブラウザでも表示させたい場合は、preタグを使用するのが有効です。

おわりに

今回は、コード・改行・プリフォーマットについて学んできました。長いコードの記述などをWebブラウザに表示させたい場合は、codeタグやpreタグを用いると、他の文章と視覚的に差別化できるので効果的です。

次の記事はこちら

【HTML5入門】2-4 略語・名前の特記・住所表現

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

前回のおさらい

前回は、引用表現について学んできました。

今回は、略語の正式名称の表示のさせ方や、名前の特記、住所表現について学んでいきましょう。

略語を示す

文章中に略語が存在する場合、それが略語であることを伝えたい場合があります。そんな時には下記のタグを用います。

abbrタグ

abbrタグは、「abbreviation」という難語の略で、略語という意味を持ちます。これを用いることで、囲んだ内容が略語であることを示すことができます。

title属性

title属性は、abbrタグと同時に使い、<abbr title="○○○">〜〜〜</abbr>のような形で使います。title属性を用いることにより、省略する前の言葉を画面に表示させることができるようになります。

引用元の名前を特記する

引用元の名前(映画・本などのタイトル)を特記するには、下記のタグを用います。

citeタグ

citeタグを使用することで、本タグで囲まれた言葉が何かの名前であるということを示すことができます。

住所を表記する

住所を表記したい場合には、下記のタグを用います。

addressタグ

addressタグを使用することで、本タグで囲めれた言葉が住所である、ということを示すことができます。

HTMLに記述してみよう

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

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      HTMLは勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画はターミネーターです。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

brタグ

上記のHTMLにしれっと登場していますが、brタグのbrは「break」の略で、改行を意味します。段落内で改行をしたい場合に用いられることの多いタグですので、この機会に覚えておきましょう。

abbrタグを使用してみよう

では、まずはabbrタグを「HTML」という単語に使用してみましょう。HTMLは略語ですので、abbrタグで囲んでみます。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr>HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画はターミネーターです。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

この状態でWebブラウザを見ても、一見何の変化も無いように思われるかもしれませんが、これでOKです。

abbrタグにtitle属性を付与してみよう

では次に、abbrタグに、正式名称を表示させるためのtitle属性を付与してみます。HTMLは「Hypertext Markup Language」の略ですので、これをtitle属性に適用していきます。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画はターミネーターです。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

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

HTMLに下線がかかり、カーソルを合わせると、title属性で入力した正式名称が表示されました。これによって、単語が何の略語なのかが理解しやすくなりました。

citeタグを使用し、名前を特記してみよう

続いて、次の段落の「ターミネーター」という映画のタイトルに、citeタグを適用して、名前を特記した形にしてみましょう。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画は<cite>ターミネーター</cite>です。
    </p>
    <p>
      何かあればこちらまで。<br>
      東京都渋谷区○○1丁目2番3号
      □□ビル 5階
    </p>
  </body>
</html>

実際にどんな表示になるのか、Webブラウザで確認してみましょう。

「ターミネーター」が斜体表示されました。強調表現の時と同様、斜体にするために使うタグではありませんので、気をつけましょう。

addressタグを使用し、住所表現をしてみよう

では最後に、addressタグを用いて、最後の段落の住所表記に適用してみましょう。コードは下記の通りとなります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画は<cite>ターミネーター</cite>です。
    </p>
    <p>
      何かあればこちらまで。<br>
      <address>
        東京都渋谷区○○1丁目2番3号
        □□ビル 5階
      </address>
    </p>
  </body>
</html>

pタグの中にaddressタグを用いていおり、改行も発生しているので、インデントを見易く揃えています。細かいところですが、コードの量が増えれば増えるほど、少しでも見やすいコードを記述することが重要になってきます。

では、実際にどのように表示が変わるのか、Webブラウザで確認してみましょう。

こちらも斜体表示されました。これもWebブラウザの解釈によるもので、他の表現をしたい場合は、「CSS」という言語で細かく設定をすることができます。

「□□ビル 5階」は、コードを見ると、改行しておきたい文章であることがわかるので、<br>タグを追加しておきましょう。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr>は勉強し続けるとわかるし、便利なものだ。
    </p>
    <p>
      私の好きな映画は<cite>ターミネーター</cite>です。
    </p>
    <p>
      何かあればこちらまで。<br>
      <address>
        東京都渋谷区○○1丁目2番3号<br>
        □□ビル 5階
      </address>
    </p>
  </body>
</html>

もう一度Webブラウザで確認をしてみましょう。

このように改行されていればOKです。

おわりに

今回は、略語の説明、名前の特記、住所表現について学んできました。それぞれの役割は独立しているタグですが、まとめて使われることも多くありますので、ぜひ身につけてみてください。

次の記事はこちら

【目的別】プログラミング言語の特徴まとめ

本記事では、各プログラミング言語の特徴や、実際にどんな形でよく使われるのかの概要を目的別に簡単にまとめたものです。

本記事で取り扱う言語は、下記の通りです。

  • HTML
  • CSS
  • JavaScript
  • Ruby
  • PHP
  • Python
  • Swift
  • Java
  • Kotlin

Webサイトを作りたい!

まずはプログラミング初心者でも、比較的とっつきやすい「Webサイトを作る」という目的に注目して、言語を見ていきたいと思います。

HTML

HTMLの正式名称は、Hyper Text Markup Languageとなり、Webページに書かれる文書を作る言語となります。

正確には、プログラミング言語ではなく、マークアップ言語と呼ばれ、実際に表示させるための文章などを書くのがHTMLとなります。

実際のコード例を見てみましょう。

<h1>Hello World!!</h1>

このように記述するだけでも、以下のように簡単に出力をすることができます。

CSS

CSSの正式名称は、Cascading Style Sheetsとなり、HTMLで書かれた文書にスタイルを付与するための言語です。

例えば、HTMLに記述した文字の色を変更したり、文字の大きさを変えたり、場所を移動したり、他にもできることは沢山あります。

例として、上で見たHTMLに色を付けてみましょう。コードは下記の通りとしてみます(便宜上、HTMLファイル内にCSSを記載しています)。

<h1 style="color:orange;">Hello World!!</h1>

この記述によって、以下のように文字色がオレンジに変化させることができます。

JavaScript

JavaScriptは、Webサイトに動きを持たせるために使われることが多い言語です。もちろん、それ以外にも沢山のことができる言語で、プログラミング言語の中で最も需要が高い言語のひとつです。

例えば、文字をクリックすると色を変える、というような動きを付けることができます。

こちらも、実際のコード例を見てみましょう(便宜上、HTMLファイル内にCSS, JavaScriptを記載しています)。

<h1 id="target", style="color:orange;">Hello World!!</h1>
<script type="text/javascript">
document.getElementById('target').addEventListener('click',function(){
  document.getElementById('target').style.color='blue';
});</script>

見てわかるように、JavaScriptは基本的に記述が長いのが特徴の1つです。上記記述により、文字をクリックすることで、オレンジだった文字を青にすることができます。

Ruby

Rubyは、これまで説明した言語とは毛色が違うもので、主にWebサイトの裏側を作るための言語です。

例えば、Webページ上の特定のリンクをクリックすると、指定する別のページに遷移するような記述などを書くことができます。これは、Ruby単体で作るというよりも、Ruby on Railsというフレームワークを用いると、とても整理された状態でプログラムを書くことができます。

Webページの裏側を作るための言語の中では、比較的、取得難易度の低い言語で、プログラミング初心者にとっても扱いやすい言語のひとつです。

PHP

PHPも、Rubyと同様、Webサイトの裏側を作るための言語です。Rubyとの違いは、HTMLファイルに直接書き込むことができる、という点です。

またPHPは、動的なWebコンテンツの制作に特化した言語でもあります。WordPressで使用されるプログラミング言語にもPHPが採用されています。

AI、機械学習のプログラムを作りたい!

昨今、高い注目を浴びているAI(人工知能)や機械学習のおけるプログラムを作りたいのであれば、最初に学ぶ言語は一択です。

Python

Pythonは、AIの分野で最も注目されている言語です。言語開発当初から、データ分析などの分野で用いることができるように作られている言語のため、結果的に、人工知能やディープラーニングとも非常に相性が良い言語という評価がなされています。

AIと聞くと、とても難しい言語という印象を受けられるかもしれませんが、Python自体の難易度はそれほど高くはありません。

同じ分野で他にも学んでおきたい「R言語(主に統計などで使われる)」というものもありますが、こちらは習得難易度が比較的高いため、AIやディープラーニングに関するプログラミング言語の入り口としては、Pythonの習得をおすすめします。

スマホアプリを作りたい!

スマホが普及して久しい昨今、アプリを通して、我々はスマホで多くのことができるようになりました。「パソコンの使い方はよくわからないが、スマホなら自在に使える」という”スマホ世代”という言葉も生まれています。

ここでは、スマホアプリを作るのにおすすめの言語を見ていきましょう。

Swift

Swiftは、Apple社が開発したiOS・MacOSなどのApple製品で使用できるアプリを開発するための言語です。Apple社開発ということもあり、Windows環境では使用できないのも特徴の1つです。比較的まだ歴史の浅い言語で、2014年に発表されました。

難易度は中程度ですが、これからご紹介するJava/Kotlinよりは少し簡単な印象です。

Java/Kotlin

これに対して、Android端末で使用できるアプリの開発に使われるのが、JavaやKotlinといったプログラミング言語です。

Kotlinは、Javaをベースに作られた言語のため、どちらの習得から始めたとしても、もう一方の言語取得が容易になる、というメリットがあります。

難易度的にはJavaよりもKotlinの方が若干低いと言えます。

おわりに

今回は、プログラミングの目的別に、それぞれの言語の特徴をまとめてみました。

正直なところ、本記事の説明のみでは各言語の魅力をしっかりお伝えできてはおりませんし、本記事で取り扱うことのできなかった言語も沢山ありますが、ぜひ、本記事をきっかけに、自分の興味のありそうな分野の言語を学ぶ足掛かりにして頂ければ幸いです。