【プロゲート】HTML & CSS 初級編の学習内容まとめ
ここではオンライン学習サイト「プロゲート」の学習内容をまとめていきます。
HTML & CSS 初級編
1.HTMLに触れてみよう
プログラミングの世界へようこそ
・Webページは「HTML」と「CSS」という言語を組み合わせて作られている
HTMLの仕組み
・HTMLでは、テキストに「タグ」と呼ばれる印を付けていく
・テキストをタグで囲むことで、意味を持つ
開始タグと終了タグ
・タグには開始タグと終了タグがあり、終了タグには「/」が必要
２.見出しと段落
見出しをつける
・見出しタグは<h1>～<h6>まである
・hはheading（見出し）の略
・<h1>が一番大きな見出しで、<h6>が一番小さな見出しになる
段落を作成する
・段落タグは<p>
・pはparagraph（段落）の略
・<h2>や<p>で囲んだテキストは改行される
見出しと段落
・<h1>～<h6>の要素は見出しの大きさや重要性に応じて使い分ける
・見出し以外の文に関しては、<p>要素を用いる
コメント
<!-- -->で囲んだテキストはコメントになり、ブラウザには表示されないので、メモとして使うことができる
3.リンク
リンクを作成する（1）
・リンクは<a>タグ
・実際に表示されるテキストは<a>タグに囲まれた部分
リンクを作成する（2）
・リンクの飛び先指定は、href属性を追加する
・<a href="url">のように書き、url部分にリンク先のURLを指定する
属性の書き方
・HTMLではhrefのような属性が数多くあり開始タグの中に記述する
・値の指定はダブルクォーテーション（"）を忘れないように注意
４.画像
画像を表示する
・画像の表示は<img>タグ
・<img src="url">のように書き、url部分に画像のリンクを指定する
・<img>要素はテキストを囲むことがないため終了タグは無い
5.リスト
リストを作成する
・リストを作るには<li>タグ
・箇条書きにしたいテキストをそれぞれ<li>タグで囲む
<ul>要素
・<li>要素は囲む要素によって種類が変わる
・<ul>要素で囲むと黒点が先頭につく（番号無しリスト）
・<ol>要素で囲むと数字が連番でつく（番号付きリスト）
・要素を要素で囲むことを入れ子と言う
・囲む方の要素を親要素、囲まれる要素を子要素と呼ぶ
インデント
・入れ子構造の要素がある場合は、インデント（字下げ）をすることで親子関係がわかりやすくなる
・行の先頭で「tab」キーを押すとインデントができる
６.文字の色
CSSとは？
・CSSはHTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語
CSSに触れてみよう
・CSSはHTMLとは別のファイルに記述する
・HTMLで用意した要素に対して、CSSを用いて「どこの」「何を」「どうする」かを指定できる
・対象(要素名)をセレクタ、変更項目をプロパティと言う
文字の色を変える
・文字の色を変えるのはcolorプロパティ
・color: #ff0000;のように16進数のカラーコードで色を指定する
・主要な色であればredなどのように指定することもできる
CSSを書くときの注意点
・CSSを書くときもインデントをする
・CSSプロパティの末尾にはコロン（:）行末には セミコロン（;） が必要
CSSのコメント
・CSSファイルにもコメントを記述することができる
・/* */で囲んだ行がコメントになる
７.文字の大きさと種類
文字の大きさを変える
・文字の大きさを指定するのはfont-sizeプロパティ
・font-sizeは、px(ピクセル)という単位を用いて指定する
・pxを書き忘れないように注意
文字の種類を変える
・フォントの種類を指定するのはfont-familyプロパティ
・font-family: フォント名;とすることで要素にそのフォントを適用できる
・フォント名にスペースがある場合はダブルクォーテーションで囲む
font-familyの種類
・font-familyには明朝体やゴシック体など様々なフォントを指定できる
・フォントの名前は覚える必要はない
8.高さと幅と背景色の色
背景色を変える
・背景色を変えるのはbackground-colorプロパティ
・色の指定の方法はcolorプロパティと同様
・#ddddddのように同じ値が続く場合は#dddと省略できる
横幅、高さを変える
・要素の横幅を変更するのはwidthプロパティ
・要素の高さを変更するのはheightプロパティ
・width, height共にpxで指定する
・pxを書き忘れないように注意
9.タグに名前をつける
特定の要素にCSSを適用するには？
・<li>要素が複数ある場合にliにCSS指定すると全てのリスト要素が赤くなってしまうが、1つのリスト要素だけを赤くするにはどうすればよいか？
タグに名前をつける
・要素にはclassを使って名前をつけることができる
・classをつけることでそれぞれの要素を識別し、別々のCSSを適用できる
・class名でCSSを指定する場合、先頭にドット「.」が必要な点に注意
classに同じCSSを適用する
・複数の要素に同じclassをつけた場合それら全てに同じCSSが適用される
classにCSSを指定する際の注意点
・classにCSSを指定する際に先頭のドット（.）を忘れると適用されない
・classの場合はドットが必要で、タグの場合は必要ないことを覚えておく
10.HTMLの全体構造
HTMLの全体構造
・実際のHTMLファイルには、決められた型を書いていく必要がある
・<html>要素の中に<head>要素と<body>要素が必要
・<head>要素にはページに関する情報を書く
・<body>要素には実際に表示したい内容を書く
・これまで勉強してきた要素は、<body>要素の中に記述していく
HTMLバージョンを指定する
・<!DOCTYPE html>の部分はDOCTYPE宣言と呼ばれるもので、HTMLのバージョンを宣言するためのもの
・今回は最新バージョンのHTMLを使うため<!DOCTYPE html>を使用するが、この辺りは特に気にせず必ず記述するものだと覚えておく
<head>要素
・<head>要素にはWebページの設定に関する情報を書く
・<head>要素内に記述した内容はWebページには表示されない
11.HTMLの全体構造（2）
<head>要素の中身
・<head>要素の中では、①文字コードの指定、②ページのタイトルの設定、③CSSの読み込みなどを行っていく
・これらは定型文のようなものなので完全に覚える必要はないが、どのようなものがあるかは知っておく
文字コードを指定する
・文字コードを指定することでページの文字化けを防ぐことができる
・<meta charset="utf-8">とすることで、そのページの文字コードをUTF-8に指定することができる
・UTF-8は、HTMLで推奨されている文字コード
ページのタイトルをつける
・ページのタイトルを指定するのは<title>タグ
・<title>要素で指定されたタイトルは、ブラウザのタブ上に現れる
CSSの読み込み
・これまでProgate上では「stylesheet.css」で記述したCSSが結果に反映されていたが、本来はHTMLの方で読み込む必要がある
・HTMLからCSSを読み込むためには<link rel="stylesheet">を用いる
・<link rel="stylesheet" href="stylesheet.css">のように、href属性で読み込むCSSファイルを指定する
12.全体のレイアウト
レイアウト
・レイアウトはWebサイトを作る上で最も重要な部分
<div>要素
・レイアウトは<div>タグによって構成していく
・<div>要素のdivはdivisionの略で要素をグループ化するために使用される
エディタの補完機能（PCの場合）
・ここからはタグを記述する量が増えてくるが、これらを一つ一つ書いていくのは面倒な上、タイプミスもしやすいので、エディタの補完機能を使う
・タグ名を入力し、「Tab」キーを押すと終了タグまで補完をしてくれる
※タグによっては余計なものまで補完される場合もあるので注意
13.ヘッダーを作ろう
ヘッダーの枠組み
・ヘッダーには「Progate」のロゴと、ヘッダーメニューのリストがあり、
この二つの部分を<div>要素を用いてグループ化する
リストのマークをなくす
・<li>要素にlist-styleプロパティを用いてnoneを指定すると、リストの先頭のマークを消すことができる
・基本的に先頭の黒点は必要ないので、消す
14.ヘッダーのレイアウト
ヘッダーの中身を横並びにする
・HTMLで記述した要素は基本的に縦に並んでいくので、横並びにするにはCSSが必要
floatプロパティ
・floatプロパティを用いることで、指定した要素を横並びにできる
・float: left;を指定すると要素が左から順に横に並ぶ
ヘッダーのリストを横並びにする
・<li>要素全体にfloat: left;を指定することで、それぞれの<li>要素が一つずつ左から並んでいき、横並びにすることができる
ヘッダーのロゴとリストを横並びにする
・「header-logo」にfloat: left;を指定することで、ロゴとリスト全体を横並びにできる
15.ヘッダーの余白
要素に余白を入れる
・要素に余白を作りたい場合は、paddingを用いる
・「padding: 値;」とすると上下左右すべての方向にその大きさの余白が追加される
paddingをある方向のみ指定する
・上下左右ではなく、ある方向のみに余白を指定したい場合は、
「padding-top: 値;」などとすると、その方向のみに余白が追加される
・他にpadding-bottom、padding-left、padding-rightなどがある
paddingをまとめて書こう
・指定したい値が方向ごとに異なる場合、個別で指定する方法もあるが、まとめて書くことも可能
・値を4つ、スペース区切りで指定した場合、「上」「右」「下」「左」の順で適用される
・値を2つ指定した場合、「上下」「左右」の順に適用される
16.フッターの構造
フッターのレイアウト
・ヘッダーを作った時に<li>要素全体にfloatとpaddingを指定したものはフッターの<li>要素にも適用されてしまう
・floatとpaddingをヘッダーの<li>要素にのみ適用されるようにするにはどうすればいいのでしょうか？
入れ子のセレクタ
「.header-list」の後にスペースを空けてliと続けると「header-list」の中の<li>要素にのみCSSを適用できる
17.フッターのレイアウト
ロゴとリストの配置
・フッターのロゴとリストは、左端と右端に配置されている
・要素を左から横並びにするのにはfloat: leftを用いたが、左右に横並びにするにはどうすればいいのでしょう？
float: right
・float: rightを用いると、指定した要素を右から順に横並びにできる
要素を左右に配置する
・float: leftとfloat:rightを組み合わせることで、ロゴとリスト全体を左右に配置できる
・左端に配置したい「footer-logo」にはfloat: left;を、右端に配置したい「footer-list」にはfloat: right;を指定する
18.メインのレイアウト
<span>要素
・文中の一部にCSSを適用させたい場合は、<span>要素で囲む
・<span>要素の前後には改行は入らない
・前後に改行が入るタグと入らないタグに関して、次のスライドで一旦整理してみましょう。
ブロック要素・インライン要素
・HTMLの要素には、改行される要素と改行されない要素がある
・前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素と言う
・これまで勉強してきた<div>要素や<h1>要素、<p>要素はブロック要素
・それに対して、<span>要素や<a>要素のように改行されない要素をインライン要素と言う
19.コンテンツの構造
次はコンテンツの部分を作っていく
20.ボーダー
ボーダー
・要素にボーダー（枠線）をつけるには、borderプロパティ
・枠線の太さ、種類、色を指定して使用する
・上下左右すべてに線を付けたい場合はborderとし、特定の場所にのみ付けたい場合は「border-bottom」のように、「border-方向」とする
・他にborder-top、border-left、border-rightなどがある
21.paddingとmargin
paddingとmargin
・paddingはborderの内側の余白を作る
・borderの外側に余白を作りたい場合はmarginを用いる
・値の指定の方法は、paddingと同じ
ボックスモデル
・border, padding, marginは、ボックスモデルという概念に基いている
・HTMLの全ての要素には、border（初期状態では表示されない）があり、その外側の余白はmargin, 内側の余白はpadding
marginをまとめて書こう
・marginもpaddingと同様に、各方向の余白をそれぞれ指定したり、まとめて指定したりすることも可能
22.お問い合わせフォームのレイアウト
・最後にお問い合わせフォームを作っていく
23.お問い合わせフォームのレイアウト（2）
<input>, <textarea>
・<input>要素は１行のテキスト入力を受け取るための要素
・<textarea>要素は複数行のテキスト入力を受け取るための要素
・<input>要素は終了タグが不要な点に注意
送信ボタンを作ろう
・送信ボタンにも、<input>要素を用いる
・<input>要素にはtype属性を指定することができ、type属性にsubmitを指定すると、入力欄ではなく、下の図のような送信ボタンになる
・ボタンに表示されるテキストは、日本語のブラウザではデフォルトで「送信」になる
value属性
・ボタンに表示されるテキストを変更することも可能
・value属性に任意の値を指定することで、ボタンに表示されるテキストを変更できる
複数のセレクタに同じCSSを指定する
・複数のセレクタをコンマ（,）で区切ることで、同じCSSを適用できる
この記事が気に入ったらサポートをしてみませんか？