今回解説していく内容は以下です！
本記事の内容
この記事を見れば「HTML」と「CSS」についてどんな言語かわかる内容になっています。
・HTMLに触れてみる
・CSSに触れてみる
・レイアウトを作る
・フッターを作る
・コンテンツ
・ソースコードの配布
概要（学習対象・準備・この記事の活用方法とは？）
このホームページもそうですがWebページは「HTML」と「CSS」という言語を組み合わせてデザインが作られています！ そこで今回は、この「HTML」と「CSS」について触れていきます！
「HTML」と「CSS」はプログラミングの基礎ともいえる言語で比較的に学習は簡単です。
学習対象者
・プログラミング初心者
・Webページを作成したい方
といった感じです。そのためサクッとどんなことをしているのか参考にしたい方は記事をみるだけでも構いません！
※また、自分のわかる範囲で詳しく「Progate」では説明がないとこまで補足しています。
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>
- <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 として記述することができます。
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以外は元々設定されてあるテキストサイズからどのくらい大きいか、どのくらい小さいかが決まる！
- 18px
- 18%
- 1.8em
- small medium large
font-family（フォントの種類変更）
font-family: フォントの種類; でフォントの種類の変更することができます。
- fantasy
- Meiryo
- 「fantasy」あいうえお / アイウエオ / abcde / 12345
- 「Meiryo」 あいうえお / アイウエオ / abcde / 12345
フォントの種類を一覧化させているサイトがあったため詳しくは以下をご覧ください！
コメント /**/
/**/ でコメントを書くことができます。 複数行の場合は/**/を使い１行の場合は//を使いましょう！
background-color（背景色）
background-color: 色; で背景色の指定ができます。また、backgroundと省略し記述しても大丈夫です！
- <span style=”background: #ffcc99;”>背景色（赤）</span>
- <span style=”background-color: #ccffff;”>背景色（青）</span>
- 背景色（赤）
- 背景色（青）
width（横幅）
width: ○px; で横幅の指定ができます。この設定もfont-sizeと一緒でpx以外にもいろんな指定ができます！
height（高さ）
height: ○px; 高さの指定ができます。この設定もfont-sizeと一緒でpx以外にもいろんな指定ができます！
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」を使った学習方法でも個人的にはありだと思います！
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></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-方向 : 太さ 線の種類 色;で線を引くことができます。
昔、線の引き方について説明している記事があったため詳しくは以下をご覧ください！
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を加えます！” />
ソースコードの配布
お疲れ様でした！ここまでまとめた内容をzipにしました。こちらをDownloadし中身の確認をおこなってみてください。また、ここから発展させて自分だけのWebサイトを作ってみてください！
まとめ
いかがでしたか？ちょっと長めになってしまいましたが、なんとなく作業をしながら「HTML」はこんなやつで「CSS」はこんなやつなのか！っと理解ができたのではないでしょうか？今回記事にまとめている部分は基礎になるためしっかり抑えておきましょう！
コメント