プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus（プログラス）

You are here: Home / Archives for プログラミング入門

プログラミング入門

px, em, rem, vw, vh, % の違いとは? font-sizeの指定の仕方について解説！

By

この記事では、CSSでfont-sizeプロパティを用いてフォントサイズを指定する方法について説明します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – プログラミング をはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のサポート記事です

font-sizeプロパティとは

CSSでは、font-sizeプロパティを用いることでフォントのサイズを調整することが出来ます。

以下はaタグに対して50pxの文字サイズを指定する例です。

a {
  font-size: 50px;
}

フォントサイズ指定の単位

font-sizeでは、様々な単位を用いてフォントサイズを指定することができます。

pxを用いる方法

ピクセル数で指定する方法です。ピクセルとはコンピューター上で画像を扱う際の最小単位を指します。

ブラウザの表示領域の大きさも縦×横のピクセル数で表されるので、フォントサイズをピクセル値で指定することで、環境によらず同じ大きさでフォントを表示することが可能です。

pタグで表示する文字サイズを20ピクセルに指定したい場合は、20pxと指定します。

p {
   font-size: 20px;
}

%を用いる方法

親要素の大きさの相対的な割合で指定する方法です。

例えば以下の場合は、divタグの子セレクタであるpタグには、20pxの50%で、10pxがフォントサイズとして適用されることになります。

div {
  font-size:20px;
} 
div > p {
  font-size:50%;
}

emを用いる方法

親要素のフォントサイズを基準に指定する方法です。%と似ていますが、emの場合は親要素のフォントサイズを基準として、その割合で指定します。すなわち100%が1emになり、50%が0.5emに相当します。

例えば以下の場合は、pタグには、divタグのフォントサイズの半分である10pxが適用されます。

div {
  font-size:20px;
}
div > p {
  font-size:0.5em;
}

%やemについては、親要素のフォントサイズを基準としているため、親要素のフォントサイズが変われば子要素のフォントサイズも合わせて変化する、という点に注意してください。

remを用いる方法

root要素、すなわちブラウザにデフォルトで設定されているフォントサイズを基準に指定する方法です。

ブラウザのデフォルトのフォントサイズは16pxであることが多いです。emと同様、root要素のフォントサイズを1として、0.5remなどと割合で指定します。

すなわち以下の場合では、ブラウザのデフォルトのフォントサイズが16pxの時、pタグの文字は8pxの大きさで表示されることになります。

p { 
   font-size: 0.5rem;
}

vw, vhを用いる方法

ビューポートの大きさを100として指定する方法です。

ビューポートとは「表示領域」のことで、パソコンやタブレット、スマートフォンなどディスプレイの大きさの異なる端末で開いた場合でも、統一的にフォントの大きさを決めることが出来ます。

ですので、vwやvhはレスポンシブ対応に適したフォントサイズの単位であると言えます。

以下の場合では、pタグに対して10vwの大きさを指定しています。

p {
   font-size: 10vw;
}

よって以下のように5つの文字を横に並べた場合、幅は合計で50vwとなり、表示領域の半分の大きさを閉めることになります。

まとめ

この記事ではフォントサイズの5種類の単位の指定の仕方について解説しました。

フォントサイズを指定する際は、どのようなレイアウトを実現したいかに応じて、適切に単位を使い分けてみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

JavaScriptのundefinedとnullの違いを徹底解説！0や空文字列についても確認しよう

By

はじめに

困っている男性

JavaScriptのコンソールで「undefined」や「null」といった単語を目にしたことはありませんか？

どちらも変数を参照した時のエラー発生時等に出てくるワードですが、この2つの違いは何なのだろう？0(ゼロ)や空文字列（””）とはどう違うの？

といった疑問を初心者の時は特に抱えやすいです。

この記事では、そんなモヤモヤを解決します！

undefinedは「存在しないデータ」

まずundefinedはどんな時に登場するのでしょうか。下記の例を見てください。

var value = 1;
console.log(value);　//1

このように、変数valueを宣言し、その時に値を代入すればログに出力するために参照されても問題なくその値を表示することができます。しかしこの時、値を代入しないとどうなるでしょうか？

var value;
console.log(value);　//undefined

上記のように、valueという変数を宣言したけれどもまだ値を何も入れていない場合、この変数の中身を表示しようとしても何も表示できず「undefined」となります。

JavaScriptでは変数の中身に応じたサイズの「入れ物」（メモリのこと）を確保しますが、上記のように、宣言されただけでまだ何の値も入っていない場合はどんなサイズの入れ物を用意すればいいのかわからないため、実はまだ入れ物すら用意されていない状態です。つまりデータとしてまだ存在していません。

また、下記の例も見てください。

var list = {id: 1, name: "apple"};
console.log(list.price);    //undefined

listという連想配列に、id、nameというキーがありますね。nameにappleという要素が入っているので、商品管理用か何かのデータと想像してください。

ここに、価格を表すキーがあっても良さそうなので、次の行で「list.price」というふうにpriceというキーを呼び出しています。

しかしそのようなキーは存在せず、ここでもundefinedが返ってきます。

このように、存在していないデータ・または宣言されただけでまだ値の代入がされていないデータを参照しようとした時に返されるのがundefinedです。

nullは「値なし」

undefinedと混同されやすいものに「null」があります。

nullとは「意図的にオブジェクトの値が存在しないことを表す値」です。下記の例を見てください。

var zip1 = "112-0004";
var zip2 = "112004";
var pattern = /^\d{3}-\d{4}$/g;
console.log(zip1.match(pattern));   //[ '112-0004' ]
console.log(zip2.match(pattern));   //null

上記ではmatchメソッドを用いてパターンとのマッチングを行い、与えられた文字列が郵便番号として成り立つかどうかを確認しています。

matchメソッドは特定のパターンとマッチする文字列があればその文字列を返しますが、もしない場合は何を返すでしょうか？

空の文字列？そうではありません。

あまり無いケースですがもし入力文字列も検索文字列も空文字列「””」であった時、空文字列が見つかりそのまま空文字列が返されることになりますが、ここで「見つからなければ空文字列を返す」というルールだと矛盾が生じてしまうからです。

似たようなことは他のメソッドでもあり得ます。

そこで、「該当はありませんよ」ということを明示的に表すための値が必要です。

これがnullですね。

実際に上記のコードでzip1とzip2という文字列を郵便番号パターンに該当するかどうかmatchメソッドで確かめています。

zip1には該当文字列があったためその文字列が返されていますが、zip2はパターンとマッチする文字列がなかっためnullが返ってきていますね。

注意したいのが、このzip1.match(pattern)もzip2.match(pattern)もそれぞれmatchメソッドの返り値として存在するデータであり、前者には文字列が、後者にはnullが入っているということです。

このように、データとして存在はしているが「値なし」であることを明示的に示すための値がnullです。

0や空文字列””は「値あり」

同じようにundefinedやnullと混同されがちなのが0（ゼロ）や空文字列（””）です。

立派な値としての0・空文字列

ゼロや空文字列は立派な値です。

nullも値ですが、先述の通り「値なし」を表す特殊な値でした。undefinedはそもそもデータとして存在しないことを表します。

例として山田さん・鈴木さん・佐藤さんからなるクラスでテストを実施したとしましょう。

山田さんの点数は70点、鈴木さんは0点、佐藤さんは遅刻したためテストを受けられませんでした。

ここで、田中さんの点数は何点でしょう？鈴木さんは？佐藤さんは？

答えは順に「undefined、0、null」となります。田中さんはこのクラスに存在していないですし、佐藤さんは存在していますがテストを受けられなかったので点数はつけられません。

鈴木さん（と山田さん）だけがテストの点数という値を持っていて、0点ではありますがこれもれっきとした点数であり、ここが田中さん（undefined）や佐藤さん（null）との違いです。

混同されやすい理由

なぜこれらは混同されやすいのでしょうか。それはよく条件分岐などで書かれる下記の記述が原因かもしれません。

if(!data) { //処理; }

このdataには例えば新規メールの件数が入っていて、もし新しいメールが来ていたら読み上げる処理をするといったことができます。

もしくはdataには何かのアンケートの備考欄に書かれた内容が入っていて、もし何か入力されていたらアラートを出すといったこともできますね。

いずれもdataがゼロだったり空文字列だったりするとその処理をする必要がないため上記のコードのように「!dataが正ならばこの処理をする」（!dataで「dataの否定」という意味になります）と書かれるのが一般的です。

同様に、dataがそもそも存在しないデータ(undefined)だったり、nullが入っていてもこの書き方ではじいて処理をさせないようにできます。

実際に、真偽判定（trueかfalseか判定すること）では下記の通り全て偽（false）となります。

console.log(0 == true);             //false
console.log("" == true);            //false
console.log(null == true);          //false
console.log(undefined == true);     //false

そのため、この4つ（undefined・null・0・””）は同じなのでは？と混同されやすいようです。

しかし、先述の通りれっきとした違いがありますので混同しないように注意しましょう。

まとめ

講師が生徒に教える様子

undefined・null・ゼロ（と空文字列）の違いを解説しました。

初心者の時にはなかなか掴みにくい概念ですが、少しでも理解の助けになれば幸いです。

今すぐにわからなくても書きながら次第に理解が進んでいきますので、頑張りましょう！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Pythonでできること6選！初心者にもわかりやすく解説！

By

はじめに

Pythonのプログラミング画面

「Python」というプログラミング言語をご存知ですか？

近年何かと話題になっている言語ですね。

HTMLやJavaScriptならWeb開発に使われることは知っているけれど、Pythonでは何ができるんだろう…？

そんな疑問を抱く方も多いのではないでしょうか。

この記事ではPythonでできることをプログラミング初心者の方にもわかりやすく解説します。

動画で学習する

チャンネル登録してね。

Pythonとは？

まずPython（読み：パイソン）とは何なのか？簡単に説明します。

Pythonの概要

Pythonは1991年にオランダ人プログラマーであるグイド・ヴァン・ロッサム氏が趣味で開発したプログラミング言語です。

シンプルかつ高機能で、誰もが簡単に習得でき皆の開発時間を短縮できるような言語を目指して開発したとされています。

そんな開発時の思想の通り、今では米国ソフトウェア業界アナリスト企業であるRedMonkが実施するプログラミング言語人気ランキングでJavaScriptに次ぐ2位の座を獲得するほど広まりました。

RedMonk: Programming Language Rankings: January 2020

Pythonには様々な強みや使い道があるため、多くのIT企業でも使用されています。

Pythonの強み

人気のPythonですが、どのような強みがあるのか見ていきましょう。

シンプルで覚えやすい

開発者が目指した通り、Pythonは非常にコードが短く簡潔に書けるように設計されています。

例えば、「Hello World!」と出力したいとき、C言語とPythonではそれぞれ次のように記述します。

C言語

#include 

int main(void)
{
  printf("Hello World!");
  return;
}

Python

print("Hello World!")

同じことをするのにもPythonであれば1行で書けてしまいますね。

関数の名前なども簡易な英語で意味のわかりやすいものに統一されているので覚えやすいです。

また、C言語はコンパイラ言語、Pythonはインタープリタ言語と呼ばれています。

違いは一言でいうと実行方法で、前者はソースコードを実行する前にコンパイルという、機械がわかる言語に翻訳しておく作業が必要です。

これに対しインタープリタ言語では実行しながら都度翻訳をしていくのでこの作業が必要ありません。

このこともPythonが「簡単でシンプルである」ことに寄与しています。

豊富なライブラリ

Pythonには元々多くのライブラリ（ソースコードの中で簡単に呼び出して使用できる機能群のこと）があるだけでなく、後から追加できる外部ライブラリもたくさんあります。

これは後述する様々な用途でPythonが使用できる理由の一助となっています。

充実したリファレンス

Python公式サイトに多くの役立つリファレンスがあることももちろん、人気言語であることもあり、Pythonの使い方を詳しく紹介する書籍やサイトが大変充実しています。

これから学習を始めようとする方にとっては心強いですね。

Pythonでできること

ここからはPythonを使って何ができるのか、代表的な用途について見ていきましょう。

機械学習・AI開発

ロボットと人工知能

まず、Pythonがこれだけの注目を集める一因となったといっても過言ではない、AI分野での活用が挙げられます。

AI開発に欠かせない機械学習を実装したPythonライブラリが多く開発されたため、Pythonはこの分野では必修の言語といえるでしょう。

中でもGoogle社のTensorFlowやFacebook社のPyTorchが有名です。

特にPyTorchは古くからPythonの機械学習で必修とされてきたNumpyと使い方が似ていることもあり人気があります。

ブロックチェーン

ビットコインとブロックチェーン技術

ビットコインで一躍注目を集めたブロックチェーンの技術にもPythonが使用されています。

ブロックチェーンの実現には膨大な計算量が必要ですが、Pythonには多くの数値計算ライブラリがあるため使用事例が多いです。

有名なところではLINE社の仮想通貨事業でもPythonが活用されていますね。

ビットコインに限らず、金融システムや保険、在庫管理等様々な分野での応用が進められています。

ビッグデータ解析

ビッグデータ

インターネットがますます普及し、従来は店頭や対面で済まされていた取引ややりとりの記録が多く蓄積されるようになりました。

このデータを活用しビジネスに活かす方法や仕組みを実現するためのビッグデータ解析が注目されています。

データを集めるためのライブラリであるSleniumや、データの読み込みに使用されるPandasなど役立つライブラリが豊富にあるため、ここでもPython活用事例が非常に多いです。

BIツールとして有名なTableauでもデータ分析や可視化のためにPythonが活用されています。

タスクの自動化

働く夫

Pythonが使えるのは何も解析や数値計算などの科学技術だけではありません。

パソコンで行うオフィスワークの自動化にも使えると注目されています。

例えばエクセルやパワーポイントでのタスクを自動化するopenpyxlやpython-pptxが有名です。

PyPDF2というライブラリではPDFの簡単な編集作業が自動でできます。

プログラミングでPythonを使用するのは敷居が高くても、これならば明日から使ってみることができそうですね。

画像処理

顔の画像解析

画像処理や画像解析の分野でもPythonが活用されています。

例えば ECサイトで商品画像を元にカテゴリ分けをしたり、実店舗でも来店した顧客の識別に応用できますね。

元々C言語のライブラリであったOpenCVは画像処理や機械学習に使われていましたが、Pythonでも使用できるようにPython版がリリースされています。

Pythonは画像処理に限らず、データ解析全般を得意とするので音声解析等にも応用可能です。

これらの解析技術はマーケティングと相性が良く、ビジネス分野でも注目を集めています。

Web開発

コードを見るエンジニア達

Web開発といえばJavaScriptやRubyなどが主流ですが、実はPythonも十分活用することができます。

有名なのはDjangoで、Web開発に必要なひと通りの機能が全て詰まったフレームワークです。RubyでいえばRuby on Railsのようなものと考えてください。

また、web2pyというフレームワークも人気があります。

こちらはWindows、Mac、Linuxなど異なるプラットフォーム上での実行が可能なため、開発環境を選ばずに開発することができるのが人気の理由です。

まとめ

話し合う仲間たち

人気上昇中のPythonというプログラミング言語について、その概要とできることを紹介しました。

様々な使い道があり、用途の大変広い言語です。

オープンソースであるため、多くのPythonユーザが開発コミュニティに属し日々ライブラリの開発に取り組んでいます。

また、リリース済みのライブラリについても多くのプログラマがバグ修正やアップデートに勤しんでいるため、常にパワーアップしているのも利点です。

Pythonと言う言語自体の柔軟性もあって、今後もより多くの用途に導入されることでしょう。

興味のある方は身近な用途から取り入れてみてはいかがでしょうか。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

前置演算と後置演算の違いについて！変数へ代入した結果が異なる理由を徹底解説！

By

はじめに

電卓と赤いペン

JavaScriptで演算を行う時、予想と違う結果になって悩んだことはありませんか？

バグのもとにもなりますし、理由がわからないと修正方法もわからず困ってしまいますよね。

この記事では、よくある原因の１つである前置演算・後置演算の挙動の違いについて解説します。

意外に正しく理解できていないことも多いので、自信のない方はぜひこの機会に学習してくださいね。

前置演算・後置演算とは

まず、前置演算・後置演算とは何かについて説明します。

インクリメント・デクリメント

JavaScriptに限らず、多くのプログラミング言語に存在する演算方法としてインクリメント・デクリメントがあります。

前置演算と後置演算はこの演算に関わるトピックであるため、先にこの内容について理解しておきましょう。

インクリメント（increment）は英語で増加の意味で、値を１増やすことです。

下記のように変数の横にプラスを２回書くとインクリメントされて値が１増えます。

var x = 10;
x++;  //インクリメント
console.log(x);  //11

デクリメント（decrement）は英語で減少の意味で、値を１減らすことです。

下記のように変数の横にマイナスを２回書くとデクリメントされて値が１減ります。

var x = 10;
x--;  //デクリメント
console.log(x);  //9

前置演算・後置演算とは、このインクリメント・デクリメントを変数の前に書くか（前置）、後に書くか（後置）のことを指します。

前置演算の場合

前置演算では、変数の前に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
++x;  //前置演算
console.log(x);  //11

後置演算の場合

後置演算では、変数の後に演算子を書きます。

例えばインクリメントする場合は下記のようになります。

var x = 10;
x++;  //後置演算
console.log(x);  //11

変数単体の演算では同じ結果になる

上記のように、変数x（初期値：10）について、前置・後置に関わらず演算後の変数の値は同じ（11）です。

この通り、変数単体で演算を行う場合の結果は前置演算・後置演算とも同じとなります。

変数への代入結果

前置演算・後置演算で挙動が異なるのは別の変数への代入時です。

下記の例を見てください。

var x = 10;
var y;

var a = 10;
var b;

var y = ++x;  //前置演算
var b = a++;  //後置演算

console.log(x);  //11
console.log(y);  //11
console.log(a);  //11
console.log(b);  //10

このように、前置演算と後置演算で代入先の変数の値が異なっていますね。

一体なぜなのでしょうか。

前置演算と後置演算の違い

実は、前置演算では先にインクリメント（またはデクリメント）を行ってから他の処理を行い、後置演算では先に他の処理を行ってから最後にインクリメント（またはデクリメント）を行うという挙動の違いがあります。

文章では理解しづらいため、実際にインクリメントするときに起きていることをコードを見ながら確認しましょう。

前置演算で実際に起きていること

前置演算では先にxをインクリメントした後、yにxを代入します。

var x = 10;
var y;

y = ++x;  //「++x; の後に y = x;」と同じ

console.log(x); //11
console.log(y); //11

そのため、前置演算での代入の後、yは１増えた後のx（つまり11）、xはインクリメントされた値（つまり11）となる訳です。

後置演算で実際に起きていること

後置演算では先にbにaを代入した後、aをインクリメントします。

var a = 10;
var b;

b = a++;  //「b = a; の後に a++;」と同じ

console.log(a); //11
console.log(b); //10

そのため、後置演算での代入の後、bは１増える前のa（つまり10）のまま、aはインクリメントされた値（つまり11）となる訳です。

まとめ

パソコンの前で計算する男性

JavaScriptでの前置演算・後置演算の違いについて解説しました。

実はJavaScriptに限らず、C言語やJava等の一般的なプログラミング言語でも同じ違いがあります。

慣れるまではややこしいですが「前置演算は（代入の）前に演算」「後置演算は（代入の）後に演算」と語呂合わせで覚えるのがおすすめです。

正しく理解し使い分けて、バグを未然に防ぎましょう！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

簡単なウェブページを作りながらHTMLの基礎を習得しよう！演習形式で徹底解説！

By

はじめに

講師が生徒に教える様子

HTMLを学んでいるみなさん、学習は順調ですか？

やはりHTML学習の醍醐味といえばウェブページを自分で作れるようになることですよね。

この記事では、簡単なウェブページ作成を通してHTMLの基礎習得に欠かせないHTML要素を網羅的に学習します。

演習形式で回答も丁寧に解説するので、手っ取り早くHTMLの基礎を習得したい方や、これまで学んできた基礎知識をおさらいしたい方にもおすすめです！

動画解説

本記事の内容を動画でも解説しています。

演習問題：HTMLの基礎

演習回答：HTMLの基礎

演習問題

それでは早速ですが演習問題です。

完成イメージ

下記のようなウェブページを制作してください。

演習の完成イメージ

前準備：素材の入手

テキスト

こちらのリンク先からコピー＆ペーストして使用してください。

画像

こちらのリンク先からダウンロードし、これから作るhtmlファイルと同階層に配置してください。

情報のグループ化

ウェブページの見た目には影響しませんが、情報のグループ化は意味付けや後からデザインをつける時の利便性の観点で非常に重要です。

今回は下記のようにグループ化してください。

演習-情報のグループ化イメージ

ヒント

「三毛猫モモの紹介ページ」はページ自体のタイトルですのでh1要素、他の見出し（プロフィール、好きな食べ物、SNS）はh2要素を使いましょう。

画像の表示にはimg要素が使えますね。

プロフィールは順序付きリスト、好きな食べ物は説明リストを使います。

「フォロー」の部分はご自身のツイッターアカウント、または講師の中村のアカウント（https://twitter.com/ynakayu）をa要素で記述しましょう。

著作権表示はsmall要素でできます。

演習回答

ウェブページは作成できましたか？ここからは回答例を解説していきますので、必ず自分で演習ページを作ってから見てくださいね。

まずは簡単におさらい

コードの全体例に入っていく前に、それぞれの要素についておさらいしていきましょう。

まず先に答えが見たい方はスキップして下の方の「回答コード例」を先に見ても構いませんが、間違えた箇所があったらここに戻って各要素の詳細を確認してください。

見出し

各話題に入る前の冒頭部で、そこで記述される内容のテーマをわかりやすく目立たせるために使われるのが見出しです。

見出しの大きさによってh1、h2、h3、h4、h5、h6までの要素が用意されており、数字が小さいほど大きい見出し、大きいほど小さい見出しになります。

<h2>見出しにしたい部分</h2>

簡単なようでいて、忘れがちな細かいルールもあるので自信がない方は下記の記事で復習しておきましょう。

HTMLで見出しを書いてみよう！意外と知らないルールについても解説！

画像

画像を表示させるにはimg要素を使用します。この要素ではsrc属性を使って画像のパスを指定するのでしたね。

<img src="cat.jpg">

どこにある画像を指定するかによって、パスの指定方法が異なります。下記の記事で詳しく説明しているので、気になった方は確認してください。

HTMLに欠かせない「属性」とは？画像の表示方法を例にわかりやすく解説！

説明リスト

プロフィールの部分で生年月日等を説明しているように、ある用語や文言の説明に特化したリストを説明リストと呼びます。

<dl>
  <dt>用語1</dt>
    <dd>説明1</dd>
  <dt>用語2</dt>
    <dd>説明2</dd> 
  <dt>用語3</dt>
    <dd>説明3</dd>
</dl>

各タグの意味や使い方を忘れてしまった方は下記の記事からおさらいしましょう。

説明リストとは？HTMLで用語説明ページを作るのに最適！使い方を確認しよう

順序付きリスト

好きな食べ物など、文言を順番つきで列挙する用途には順序付きリストを使用します。

<ol>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
  ・・・略・・・
</ol>

順序のない箇条書きを使うこともできます。これらの違いやタグの意味については下記から確認してください。

HTMLでリストを書く方法！箇条書きと順序付きリストの違いは？入れ子にする方法も確認しよう

著作権表記

著作権や商標登録など、ページ全体に関する細目を表記するにはsmall要素を使用します。

<small>ここに細目を記述</small>

詳しくは下記の記事も参考にしてください。

HTML文書で著作権表示などの細目を表記するには？small要素の使い方をマスターしよう！

情報のグループ化

文章の内容に合わせてarticleやsection等の要素を使い分けてグルーピングすると、文章の構造がわかりやすくなる、スタイルを当てやすくなるというメリットがあります。

自信のない方は下記記事で詳しく説明していますので、目を通してみましょう。

情報のグループ化は重要！div要素だけでなく意味に応じてarticleやsection等を使い分けよう！

回答コード例

それでは、今回の演習の回答コード例はどのようになるのか見てみましょう。

お手元のコードと比較し、間違いがあったら前項に戻って復習をお忘れなく！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三毛猫モモの紹介ページ</title>
</head>
<body>
  <header>
    <h1>三毛猫モモの紹介ページ</h1>
    <p>三毛猫のモモについて紹介します。</p>
  </header>

  <main>
    <article>
      <h2>プロフィール</h2>
      <img src="momo.jpg">
      <dl>
        <dt>生年月日</dt>
        <dd>2020年1月1日</dd>

        <dt>性別</dt>
        <dd>メス</dd>
        
        <dt>出身地</dt>
        <dd>東京</dd>
      </dl>
    </article>

    <article>
      <h2>好きな食べ物</h2>
      <ol>
        <li>焼き魚</li>
        <li>刺身</li>
        <li>かつお節</li>
      </ol>
    </article>
  </main>

  <aside>
    <h2>SNS</h2>
    <p>Twitterで<a href="https://twitter.com/ynakayu">フォロー</a>してください。</p>
  </aside>

  <footer>
    <small>&copy; 2020 Momo.</small>
  </footer>
</body>
</html>

よくある質問

演習について、受講者の方からよくいただく質問と回答を掲載します。

講師と同一の手順で記述していく必要がありますか？

動画を見ながら進めてくださった方の中には、講師の記述していく順番と全く同一の方法で書いた方がいいのか気にされる方もいらっしゃるようです。

答えはNoで、同じ手順で書く必要はありません。

実際、どんな順番で書いたとしても最終的に正しい記述になっていれば全く同じ表示結果となります。

詳しくは下記の記事でも解説していますので参考にしてください。

HTMLの正しい書き順は？タグが先？コンテンツが先？

表示されたページの見た目（文字サイズやフォント）が若干違います

お手元の演習回答のウェブページ表示結果が、この記事や動画内で解説している表示結果と若干異なることを気にされる方もいらっしゃるようです。

文字のサイズやフォントのみの違いであれば、全く問題ありません。

使用しているブラウザやOSによってこの辺りは若干見え方が異なるためです。

HTML文書の構造が同じであれば正しく記述できていますので、問題ありません。

まとめ

パソコンの前でいいねポーズ

演習方式でHTMLの基礎となる代表的な要素の使い方を解説しました。

簡単なウェブページを作りながら進めると、表示結果を確認しながら楽しく学べますね。

ぜひ、覚えた知識をもとにご自身でも簡単な紹介ページを作ってみてはいかがでしょうか。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する