今日はHTML＆CSSを総復習してみた！【前編】
開始タグと終了タグ
-
<x>開始タグ -
</x>終了タグ
見出しをつける
-
<h>見出し</h>- hはheadingの頭文字
-
<h1>,<h2>,<h3>,,,<h6>,,,と数字が大きくなるにつれて見出しは小さくなる
段落をつける
-
<h2>タイトル</h2>-
<h2>要素で囲むと改行される -
<p>テキスト</p>- pはparagraphの頭文字
-
コメント
-
<!--コメント-->で囲むとブラウザに表示されない
リンクをつける
<a ref="URL">アンカーテキスト</a>
画像をつける
<img src="画像URL">- テキストを囲むことがないので終了タグが不要
リストをつける
- 親要素：囲む方の要素
-
<ul>子要素</ul>：黒点が先頭につく -
<ol>子要素</ol>：数字が連番でつく
-
- 子要素：囲まれる要素
*<li>テキスト</li>- 入れ子構造がある場合はインデント（字下げ）をすることで親子関係が分かりやすくなる
CSSとは
- HTMLの要素に対して色・大きさ・配置を指定しページをデザインするための言語
- 例：HTMLのh1要素の色を赤にする場合
h1{color:red;}
- 例：HTMLのh1要素の色を赤にする場合
- HTMLとは別のファイルに記述する
- 変更項目を「プロパティ」、要素名を「セレクタ」と言います
- プロパティの末尾にコロん(:)を付け、行末にセミコロン(;)を付ける必要がある
- CSSを書くときもインデント（字下げ）を行う
- コメントは
/*コメント*/で囲う
文字の色
- 文字の色はcolorプロパティで変更できる
-
color:#ff000;のように16進数のカラーコードで色を指定する- 主要な色であれば
color:red;のように指定できる - 「#dddddd」のように値が連続する場合は「#ddd」と短縮できる
- 主要な色であれば
文字の大きさ
- 文字の大きさはfont-sizeプロパティで変更できる
- font-sizeはpx(ピクセル)という単位を用いて指定する
- 例：h1の大きさを50pxにする場合
h1{font-size:50px;}
- 例：h1の大きさを50pxにする場合
文字の種類
- 文字の種類はfont-familyプロパティで変更できる
- 「font-family:フォント名;」で変更できる
- 例：h1のフォントをserifにしたい場合
- h1{font-family:serif;}
- 例：h1のフォントをserifにしたい場合
- フォント名にスペースがある場合はダブルクォーテーションで囲む
- 例：h1のフォントをAvenir Nextにしたい場合
h1{font-family:"Avenir Next";}
- 例：h1のフォントをAvenir Nextにしたい場合
- font-familyには様々なフォントを指定できる
- 「明朝体」：serif,YuMicho
- 「ゴシック体」：sans-serif,"Lucida Grande"
幅と高さ
- 要素の横幅を変更するにはwidthプロパティを用いる
- 例：h1の横幅を50pxに変えたい場合
h1{width:50px;}
- 例：h1の横幅を50pxに変えたい場合
- 要素の高さを変更するにはheightプロパティを用いる
- 例：h1の高さを50pxに変えたい場合
h1{height:50px;}
- 例：h1の高さを50pxに変えたい場合
背景の色
- 背景の色を変えるにはbackground-colorプロパティを用いる
- 例：h1の背景色を#ddddddに変えたい場合
h1{background-color:#dddddd;}
特定のHTML要素を変更したい場合
- 特定の要素だけCSSを適用するにはHTMLタグをclass名で命名し、「.」を付けて指定する必要がある
- 例：HTML内の一部のリストだけを指名する場合
-
<ul><li class="selected">リスト１</li><li>リスト２</li><li>リスト３</li>
</ul>
-
- 例：CSSで命名した要素をclassで指定する場合
.selected{color:red;}
- 例：HTML内の一部のリストだけを指名する場合
- 複数の要素に同じclassをつけると全てに同じCSSが適用される
HTMLの全体構造
- HTMLファイルには決められた型を書いていく必要がある
-
<html>要素の中に<head>要素と<body>要素が必要です。-
<head>要素にはページに関する情報を記述 -
<body>要素には実際に表示したい内容を記述
-
-
- HTMLバージョンを指定する
- HTMLのファイルではHTMLのバージョンを宣言する必要がある
- 最新バージョンのHTMLを使うために宣言される
<!DOCTYPE html>はDOCTYPE宣言と呼ばれる
<head>要素の特徴
-
<head>要素ではWebページの設定に関する情報を書く -
<head>要素内に記述した内容はWebページには表示されない -
<head>要素には必ず入れる3つの要素がある- ①文字コードの指定
- ②ページタイトルの設定
- ③CSSの読み込み
<head>要素の3つ
- ①文字コードの指定
- 定型文：
<meta charset="文字コード"> - 文字コードを指定することで文字化けを防ぐことができる
- HTMLで推奨されてるコードは"UTF-8"
- 定型文：
- ②ページタイトルの設定
- 定型分：
<title>タイトル</title> - 指定されたタイトルはブラウザのタブ上に現れる
- 定型分：
- ③CSSの読み込み
- 定型文：
<link rel="stylesheet" href="CSSのファイル名"> - CSSを反映するにはHTMLの方で読み込む必要がある
- 定型文：
全体のレイアウト
- webページのレイアウトは3つの要素で構成されている
- ヘッダー：ページの上部メニュー
- メイン：ページの主なコンテンツ
- フッター：ページ下部のメニュー
- レイアウトは
<div>要素で構成されている- ヘッダーの
<div>要素<div class="header"></div>
- メインの
<div>要素<div class="main"></div>
- フッターの
<div>要素<div class="footer"></div>
- ヘッダーの
エディタの自動補完機能
- タグ名を入力し「Tab」キーを押すと終了タグまで自動で記述してくれる
- 例：「div」と打つ→「Tab」キー→
<div></div>が記述される
- 例：「div」と打つ→「Tab」キー→
ヘッダーの構造
- （HTML）ヘッダーの枠組みをロゴの要素とリストの要素で作成
- 例
-
<div class="header"><div class="header-logo">Progate</div><div class="header-list"> </div>
</div>
-
- （CSS）リスト要素はlist-styleプロパティを用いてnoneを指定することで先頭のマークを消す
- 例
li{list-style: none;}
ヘッダーの要素を横並びにする
- 要素を横並びにする場合はfloatプロパティを用いる
- 例：リストを左から順に横並びにする場合
li{float:left;}
- 例：ヘッダーのロゴとリストを横並びにする場合
.header-logo{float:left;}
- 例：リストを左から順に横並びにする場合
ヘッダーの余白
- 要素に余白を入れる場合はpaddingプロパティを用いる
- 上下左右の全ての方向に同じ幅の余白を入れる場合
- 全方向に20pxの余白：
{padding:20px;}
- 全方向に20pxの余白：
- 上下左右のそれぞれの方向に異なる幅の余白を入れる場合
- 上だけ20px：
{padding-top:20px;} - 下だけ20px：
{padding-bottom:20px;} - 左だけ20px：
{padding-left:20px;} - 右だけ20px：
{padding-right:20px;}
- 上だけ20px：
- 上下左右の全ての方向に同じ幅の余白を入れる場合
- [省略形①]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上から時計回りに指定）
- 上40px右30px下20px左10px：
{padding:40px 30px 20px 10px;}
- 上40px右30px下20px左10px：
- [省略形②]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上下・左右で指定）
- 上20px右10px下20px左10px：
{padding:20px 10px;}
- 上20px右10px下20px左10px：
フッターの構造
- フッターは基本的に
<div>でロゴとリストで分けたHTML構造になっている
入れ子のセレクタ
- 入れ子の中にある任意の要素にCSSを反映させる時はclass名と要素名をセレクタにする
- class名footer-listの
<div>内にある<li>要素だけ右寄せにする - 例：
.footer-list li{float:right;}
- class名footer-listの
<span>要素-
<span>要素とは - HTMLの文中の一部にCSSを適用させたい場合にHTMLを
<span>要素で囲んで<span>タグへCSSを指定する - 例：h1タイトルの一部を赤色にしたい場合
- HTML
<h1>ようこそ<span>Hollo World</span>へ</h1>
- CSS
span{color:red;}
- HTML
ブロック要素とインライン要素
- ブロック要素：前後で改行が入り、親要素の幅いっぱいに広がる要素
- 例：
<div>要素、<h1>要素、<p>要素
- 例：
- インライン要素：改行されない要素
- 例：
<span>要素、<a>要素
- 例：
ボーダー（枠線）
- ボーダーを着けたい場合はborderプロパティを用いて太さ・種類・色を指定します
- 定型分：
{border:太さ 種類 色;} - 特定の場所にのみ付けたい場合は「border-方向」を指定します
- 上だけに付けたい場合：border-top
- 下だけに付けたい場合：border-bottom
- 右だけに付けたい場合：border-right
- 左だけに付けたい場合：border-left
ボックスモデル
- ボックスモデルはHTMLの全ての要素にborderがあり、要素と枠線の間の余白がpadding、枠線と外側の余白がmarginで構成されていると認識する概念
paddingとmargin
- padding：HTMLの要素とborderの間の余白を作る
- 例：全方位に10pxの余白を作りたい場合
{padding:10px}
- 例：全方位に10pxの余白を作りたい場合
- margin:borderと外側の余白を作る
- 例：全方位に10pxの余白を作りたい場合
{margin:10px;}
- 例：全方位に10pxの余白を作りたい場合
上下左右の余白を細かく指定したい場合
- 上下左右の特定の余白だけ指定したい場合
- 上だけ20px：
{padding(もしくはmargin)-top:20px;} - 下だけ20px：
{padding(もしくはmargin)-bottom:20px;} - 左だけ20px：
{padding(もしくはmargin)-left:20px;} - 右だけ20px：
{padding(もしくはmargin)-right:20px;}
- 上だけ20px：
- [省略形①]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上から時計回りに指定）
- 上40px右30px下20px左10px：
{padding(もしくはmargin):40px 30px 20px 10px;}
- 上40px右30px下20px左10px：
- [省略形②]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上下・左右で指定）
- 上20px右10px下20px左10px：
{padding(もしくはmargin):20px 10px;}
- 上20px右10px下20px左10px：
入力欄を作る要素
- input要素：入力された１行のテキストを受け取る要素
- textarea要素：入力された複数行のテキスト入力を受け取る要素
送信ボタンの作り方
- 送信ボタンはinput要素を用いて作る
- type属性を指定して入力する内容の種類を選べる
- submitを指定すると送信ボタンになる（テキストはデフォルトで「送信」になる）
- 例：
<input type="submit">
- 例：
- value属性を指定して表示されるテキストを変更できる
- 例：
<input type="submit" value="送信">
- 例：
- submitを指定すると送信ボタンになる（テキストはデフォルトで「送信」になる）
- type属性を指定して入力する内容の種類を選べる
複数のセレクタに同じCSSを指定する方法
- 複数のセレクタに同じCSSを指定するには複数のセレクタをコンマ(,)で区切ることで同じCSSを適用できる
- 例：
input,testarea{border:3px solid #ff0000}
- 例：
- 例