Toshi

小学生からわかるプログラミング、ということで今回から「Progate」というプログラミング学習サイトを利用して一緒に勉強していきましょう。まずは、基礎の「HTMLとCSS」について学んでいきましょう！これを学ぶとWebページが作れます！

今回解説していく内容は以下です！

本記事の内容

この記事を見れば「HTML」と「CSS」についてどんな言語かわかる内容になっています。

・概要（学習対象・準備・この記事の活用方法とは？）
・HTMLに触れてみる
・CSSに触れてみる
・レイアウトを作る
・フッターを作る
・コンテンツ
・ソースコードの配布

実際にHTMLとCSSを組み合わせてWebページを作る作業は「レイアウトを作る」からになります！作ったものに関しては「ソースコードの配布」からダウンロードすることができます！まず、どんなものを作るのか見たい方は先にダウンロードしていただいてもいいかと思います！

概要（学習対象・準備・この記事の活用方法とは？）

このホームページもそうですがWebページは「HTML」と「CSS」という言語を組み合わせてデザインが作られています！ そこで今回は、この「HTML」と「CSS」について触れていきます！

「HTML」と「CSS」はプログラミングの基礎ともいえる言語で比較的に学習は簡単です。

学習対象者

・小学生〜大人まで
・プログラミング初心者
・Webページを作成したい方

準備

・「Progate」の「学習コースHTML & CSS 初級編」を開く

このページの活用方法は？

・実際の作業は「Progate」の「学習コースHTML & CSS 初級編」で行ないますがこの記事はそのレッスンのまとめ
といった感じです。そのためサクッとどんなことをしているのか参考にしたい方は記事をみるだけでも構いません！
※また、自分のわかる範囲で詳しく「Progate」では説明がないとこまで補足しています。

では、さっそくHTMLに触れていきます！

HTMLに触れてみる

HTMLとは、「タグ(<>)」というものを使いテキストに意味をもたせる言語です。

「タグ(<>)」には基本的に開始タグと終了タグがあり開始タグは「(<>)」で終了タグは「(</>)」を入れます！

See the Pen
YgjvXZ by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

また、記述するときのポイントとしては＜＞全角でタグの指定をするのではなく<>半角で指定しましょう！

このタグの種類と記述のポイントさえしっかりと抑えておけばHTMLはスラスラ書けるようになります。

タグの種類

タグの種類はたくさんありますが、よく使うものを以下に一覧化してみました。

https://www.alloneslife-0to1work.jp/html_tag

この「Progate」で紹介されているタグは以下

見出し <H1>〜<H6>

<h1>〜<h6> 見出し 【heading（見出し）の略】

段落を表す <p>

<p> 段落を表す【pはparagraph（段落）の略】

コメント <！– –>

<！– –> コメント【Web上に表示させたくない内容を記載】

リンクタグ <a href=”#”>

<a href=”#”> リンクタグ【使用方法：<a href=”URL”>文章</a>】

新しいタグでリンクを開かせたい場合は、<a href=”#” target=”_back”>

イメージタグ <img src=”url“>

<img src=”url“> イメージタグ【画像を出力したいところに記述（終了タグはいらない）】

リスト作成 <ul> <li> <ol>

<ul>で箇条書きの・をつけることができ <li> 要素で構成されています。 <ol> は数字を連番でつけることができます。

<ul>＆<li>

<ul>&<ol>

また、以下のような構造となるため、インデント（隙間）を作ってあげることによりよりコードを見やすくしていきましょう！

HTMLまとめ

HTMLとは、「タグ(<>)」で構成されておりそのタグと使い方について知ることができました。ではCSSもみていきましょう！

CSSに触れてみる

CSSとは、HTMLに対して色、大きさ、配置などを指定し、ページをデザインするための言語です。HTMLとCSSはセットだということを覚えておきましょう！

See the Pen
HTML&CSS初級編1 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

CSSの記述方法

HTMLにそのまま style として記述することができます。

<h1 style=”color:red;”>sample</h1>

sample

ですが、HTMLと一緒にしているコード（プログラム）がわかりにくくなってしまうためできたら別ファイルから呼び出しましょう！サイトのHTMLファイルは一般的に index.html というファイル名がつけられているのに対して CSSのファイルは style.css となります。

セレクタとプロパティ

以下はセレクタとプロパティの関係を表しています。

h1(セレクタ){
color(プロパティ：色): red(赤);
}

HTML要素(h1) に対して効かせる変更内容がプロパティ(color) です！

プロパティの種類

プロパティの種類もタグと同じように、一覧化してみました。

https://www.alloneslife-0to1work.jp/css_property

color（色）

color : 色 ; で色を変更することができる。赤の表し方でもいろいろな表現方法がある。

red
#ff0000
hsl(0,100,50)
rgb(255,0,0)

font-size（文字サイズ設定）

font-size: ○ px; でテキストサイズの変更ができます。表現方法は以下一般的にはpxを使用。

px
%
em
small / medium / large

px以外は元々設定されてあるテキストサイズからどのくらい大きいか、どのくらい小さいかが決まる！

18px
18%
1.8em
small medium large

font-family（フォントの種類変更）

font-family: フォントの種類; でフォントの種類の変更することができます。

fantasy
Meiryo

「fantasy」あいうえお / アイウエオ / abcde / 12345
「Meiryo」　あいうえお / アイウエオ / abcde / 12345

フォントの種類を一覧化させているサイトがあったため詳しくは以下をご覧ください！

font-familyで指定できるフォント名一覧

CSSのfont-familyプロパティで指定できるフォント名・総称ファミリ名を総称ファミリ名と各OS標準の和文フォントで分類し一覧表にしました。

コメント //**

/**/ でコメントを書くことができます。複数行の場合は/**/を使い１行の場合は//を使いましょう！

background-color（背景色）

background-color: 色; で背景色の指定ができます。また、backgroundと省略し記述しても大丈夫です！

<span style=”background: #ffcc99;”>背景色（赤）</span>
<span style=”background-color: #ccffff;”>背景色（青）</span>

背景色（赤）
背景色（青）

width（横幅）

width: ○px; で横幅の指定ができます。この設定もfont-sizeと一緒でpx以外にもいろんな指定ができます！

width

<div style=”background: black; width: 10px;”></div>

width

<div style=”background: black; width: 10%;”></div>

width

<div style=”background: black; width: 10em;”></div>

height（高さ）

height: ○px; 高さの指定ができます。この設定もfont-sizeと一緒でpx以外にもいろんな指定ができます！

<div style=”background: black; width: 10px; height: 10px;”></div>

height

<div style=”background: black; width: 10%; height: 10%;”></div>

height

<div style=”background: black; width: 10em; height: 10em;”></div>

id、class 属性

ちょっとCSSの冒頭で「HTMLファイルは一般的に index.html というファイル名がつけられているのに対して CSSのファイルは style.css となります。」という話をしたかと思います。

HTMLファイルからCSSファイルに書かれている CSS を呼び出すには、idやclassといった属性をつけてあげる必要があります。

どういうことなのか、以下をみてください！

See the Pen
HTML&CSS初級編2 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

レイアウトを作る

ここからは、HTML ＋ CSSでレイアウトを作っていきます。最終的な仕上がりはこちら！

See the Pen
HTML&CSS初級編6【終了】 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

「Progate」で勉強をすすめていくのも良いのですが実際にファイルを作成してみましょう。テキストエディターはなんでも良いのですが私は「Atom」を使用しています！また、テキストエディターを使用するのではなく「CodePen」を使った学習方法でも個人的にはありだと思います！

【CodePen】Webブラウザ上でプログラミング簡単学習！

Webデザイン（プログラミング）を学習しよう！といった時、いろいろな準備がありますがこの「CodePen」を使ってしまえば、「HTML」「CSS」「JavaScript」がWebブラウザ上で簡単に学習できてしまいます！この魅力的なツール「CodePen」につてお伝えしたいと思います！

HTML&CSS初級編.zip

上記のファイルを作って学習をすすめてみてください！Zipをダウンロードしてもらって使っても構いません。

HTML構造

<html>の中には<head>と<body>があります。<head>にはページに関する情報、<body>には実際に表示したい内容を書きます。

<!DOCTYPE html><!--これはこのテキストがHTMLですよ！という宣言です。-->
  <head>
    <meta charset="utf-8"><!--文字コードの宣言-->
    <title></title><!--ページタイトル-->
    <link rel="stylesheet" href="style.css"><!--style.cssからCSSを呼び出しindex.htmlに適応-->
  </head>
  <body>
     <!--ここがWebサイトのメイン。コンテンツの部分です！-->
  </body>
</html>

文字コードを宣言することにより文字化けを防ぎます。

文字化けとは、「文字化け」と書いているのに対して表示される時に「 æ–‡å—åŒ–ã ‘ 」や「譁ｭ怜喧縺」といった形で表示されてしまうこと。

全体のレイアウト

全体のレイアウトは ページ上部<heder> メイン<body> ページ下部<footer> で構成されています！

ページ上部<heder>

メイン<body>

ページ下部<footer>

このホームページを例にあげるとページ上部<heder>にはメニューとホームページロゴ、メイン<body>にはブログとサイドバー、ページ下部<footer>にはオススメ記事等のコンテツがあることがわかります。

では実際にヘッダー、フッター、コンテンツにわけて作っていきます！

ヘッダーを作る

ヘッダーを作る際は、<heder></heder>タグ内で行ないます！ここではメニューを作りたいので<li>リストを使ってメニューを作成していきます！実際に作成したものが以下になります。

See the Pen
HTML&CSS初級編3 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

おこなったこととしてはメニューを作るため

liを使ったリスト作成・を消すためにstyle-list:none;の指定
float: left; でリストを横並びにする
padding を使用した余白調整

style-list:none; （・を消す）

style-list:none; ・を消すために指定してます。

float: left; リストの横並び

float: left; リストの横並びの指定をしています。 leftと指定していますが、center、rightといった指定もできます。
これは

左詰めなのか

中央なのか

右詰めなのか

という指定です。

padding（余白（内側）調整）

padding; 値; で余白（内側）の調整ができます。指定の仕方は３つあります！

padding-top:○px;「上」
padding-right:○px;「右」
padding-bottom:○px;「下」
padding-left:○px;「左」

一つ一つ、「上」「右」「下」「左」と指定するやり方。

padding : ○px ○px ○px ○px;

paddingで「上」「右」「下」「左」をいっきに指定するやり方。

padding: ○px ○px;

paddingで「上下」「左右」を指定してあげるやり方。

フッターを作る

フッターを作る際は、<footer></footer>タグ内で行ないます！実際に作成したものが以下になります。

See the Pen
HTML&CSS初級編4 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

おこなったこととしてはこちらもヘッダーとは違うメニュー作りです。

ヘッダーと作り方が似てるためこちらは割愛させていただきます。気になる方はコードを確認してください！

メインレイアウト

メインレイアウトは<body>内で作っていきます！

See the Pen
HTML&CSS初級編5 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

おこなったこととしては

ブロック要素、インライン要素について理解する
<span>タグを使って一部の色を変更する

です！

ブロック要素とは？

ブロック要素は、見出し・段落・表など、文書を構成する基本要素で、一つのかたまり（ブロック）として認識されます。どんなタグがブロック要素になるかというと…

<blockquote>
<div>
<form>
<h1>〜<h6>
<hr>
<ul>
<ol>
<p>
<pre>
<table>

等がブロック要素です。

＜h1＞ブロック要素＜/ｈ１＞

インライン要素とは？

インライン要素は、ブロック要素の中に含まれている要素になります。どんなタグがインライン要素になるかというと…

<a>
<b>
<br>
<code>
<img>
<input>
<label>
<span>
<strong>
<u>

等がインライン要素です。

＜h1＞ブロック要素の中の<span>インライン要素.</span>＜/ｈ１＞

コンテンツ・お問い合わせを作る

コンテンツ・お問い合わせも作り終わった完成版が以下です！

See the Pen
HTML&CSS初級編6【終了】 by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

コンテンツ

コンテンツを作る際おこなったことは

borderを使用し線を引く
marginを使った外側の余白付
imgを使って画像を挿入

です。

border（線を引く）

border-方向 : 太さ線の種類色;で線を引くことができます。

昔、線の引き方について説明している記事があったため詳しくは以下をご覧ください！

https://www.alloneslife-0to1work.jp/all/css_title

margin（余白(外側)）調整）

margin; 値; で余白（外側）の調整ができます。指定の仕方は３つあります！

margin-top:○px;「上」
margin-right:○px;「右」
margin-bottom:○px;「下」
margin-left:○px;「左」

一つ一つ、「上」「右」「下」「左」と指定するやり方。

margin : ○px ○px ○px ○px;

marginで「上」「右」「下」「左」をいっきに指定するやり方。

margin: ○px ○px;

marginで「上下」「左右」を指定してあげるやり方。

※paddingの設定とかわりません

img（画像挿入）

<img src=”URL”> で画像挿入が可能となります！

お問い合わせ

お問い合わせは<input>や<textarea>から作られています！

<input>は１行のテキスト入力を欄で

<textarea>は複数行のテキスト入力ができます。

また<input type=”submit”>とすることにより送信ボタンが作成できます！

ボタンの文字を変えたいときは<input type=”submit” value=”valueを加えます！” />

ソースコードの配布

HTML&CSS初級編（終了）.zip

お疲れ様でした！ここまでまとめた内容をzipにしました。こちらをDownloadし中身の確認をおこなってみてください。また、ここから発展させて自分だけのWebサイトを作ってみてください！

まとめ

Toshi

いかがでしたか？ちょっと長めになってしまいましたが、なんとなく作業をしながら「HTML」はこんなやつで「CSS」はこんなやつなのか！っと理解ができたのではないでしょうか？今回記事にまとめている部分は基礎になるためしっかり抑えておきましょう！

概要（学習対象・準備・この記事の活用方法とは？）

HTMLに触れてみる

タグの種類

見出し <H1>〜<H6>

段落を表す <p>

コメント <！– –>

リンクタグ <a href=”#”>

イメージタグ <img src=”url“>

リスト作成 <ul> <li> <ol>

HTMLまとめ

CSSに触れてみる

CSSの記述方法

sample

セレクタとプロパティ

プロパティの種類

color（色）

font-size（文字サイズ設定）

font-family（フォントの種類変更）

コメント /**/

background-color（背景色）

width（横幅）

height（高さ）

id、class 属性

レイアウトを作る

HTML構造

全体のレイアウト

ヘッダーを作る

style-list:none; （・を消す）

float: left; リストの横並び

padding（余白（内側）調整）

フッターを作る

メインレイアウト

ブロック要素とは？

＜h1＞ブロック要素＜/ｈ１＞

インライン要素とは？

コンテンツ・お問い合わせを作る

コンテンツ

border（線を引く）

margin（余白(外側)）調整）

img（画像挿入）

お問い合わせ

ソースコードの配布

まとめ

コメント

コメント //**