小学生からわかるプログラミング HTML&CSS初級編

HTML
スポンサーリンク
Toshi
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はスラスラ書けるようになります。

タグの種類

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

この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>
  1. <ul>&<ol>

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

NG

<ul>
<li></li>
<li></li>
</ul>

OK

<ul>
 <li></li>
 <li></li>
</ul>

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) です!

プロパティの種類

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

color(色)

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

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

font-size(文字サイズ設定)

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

  • px
  • %
  • em
  • small / medium / large

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

  1. 18px
  2. 18%
  3. 1.8em
  4. small medium large

font-family(フォントの種類変更)

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

  • fantasy
  • Meiryo
  1. fantasyあいうえお / アイウエオ / abcde / 12345 
  2. Meiryo」 あいうえお / アイウエオ / abcde / 12345 

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

コメント /**/

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

background-color(背景色)

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

  • <span style=”background: #ffcc99;”>背景色(赤)</span>
  • <span style=”background-color: #ccffff;”>背景色(青)</span>
  1. 背景色(赤)
  2. 背景色(青)

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以外にもいろんな指定ができます!

h
<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を使った学習方法でも個人的にはありだと思います!

上記のファイルを作って学習をすすめてみてください!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; 値; で余白(内側)の調整ができます。指定の仕方は3つあります!

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>ブロック要素</h1>

インライン要素とは?

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

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

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

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

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

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

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

コンテンツ

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

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

です。

border(線を引く)

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

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

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

margin; 値; で余白(外側)の調整ができます。指定の仕方は3つあります!

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>は1行のテキスト入力を欄で

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

 

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

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

ソースコードの配布

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

まとめ

Toshi
Toshi

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

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
HTMLCSSCODE
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント