【1日目】37才からHTML＆CSSに挑戦してみました

知識ゼロからHTML＆CSSに挑戦する記事です

目的は『1.アウトプットで理解を深めること』、『2.忘れたときに復習できること』

学習方法

▪国が許可した民間企業が実施している求職者支援訓練 (6カ月間)

▪Progate

求職者支援訓練は、職業訓練の一環でWebデザインについて学習します
すでにハローワークから申込み済で、受講が決定しています

Progateは無料で基礎を学習できるサイトです

【1日目】37才からHTML＆CSSに挑戦してみました

【1日目】37才からHTML＆CSSに挑戦してみました

今日はProgateへ登録して初めての学習をします

HTMLの属性の記述順序

id属性
class属性
style属性
他属性をアルファベット順で
WAI-ARIA(role属性とaria-属性)
data-属性
Microdata(item*属性)

HTMLの仕組み

HTMLの全体構造

決められた型がある

<!DOCTYPE html>　DOCTYPE宣言
<html>
<head>
<meta charset=”utf-8″>　文字コード（文字化け防止）
<title>Progate</title>　ページタイトル
<link rel=”stylesheet” href=”stylesheet.css”>　CSSの読み込み
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>　Font Awesomeの読み込み
</head>
<body>
</body>
</html>

タグについて

<!DOCTYPE html>DOCTYPE宣言
<html>
<head>Webページの設定に関する情報
<body>
<meta>
<title>
<link>
<div>グループ化
<header>
<footer>
<h1>見出し
<a>リンク
<p>段落
<!– –!>コメント
<img>画像
<li>リスト
<ul>黒点
<ol>数字
<span>

要素について

●要素を要素で囲むこと：入れ子
　入れ子構造の要素がある場合は、tabキーを押してインデント（字下げ）をする
●囲む方の要素：親要素
●囲まれる要素：子要素
●classを使うと要素に名前をつけれる
●要素＝セレクタ、HTMLでは要素という

□改行される要素（ブロック要素）
　親要素の幅いっぱいに広がる
width,height
margine,padding
縦並び

▪<h1>
▪<p>
▪<div>

□改行されない要素（インライン要素）
width,height　　　指定できない
margine,padding　左右のみ指定できる
横並び

▪<span>
▪<a>

□ブロックとインラインの両方の要素の特徴を持つ（インラインブロック要素）
width,height
margine,padding
横並び

▪<!DOCTYPE html>要素
DOCTYPE宣言、HTMLのバージョンを指定するために記述する

▪<html>要素
<head>要素と<body>要素が必要

▪<head>要素
Webページの設定に関する情報を記述する

▪<body>要素
実際に表示したい内容を記述する

▪<header>要素

▪<footer>要素

▪<meta>要素

▪<title>要素

▪<link>要素

▪<div>要素
division（区画）の略
レイアウト構成で使用する

▪<span>要素
インラインでグループ化

▪<h1>～<h6> 要素
heading（見出し）の略

▪<p>要素
paragraph（段落）の略

見出しや段落タグで囲むと改行される

▪<a>要素
リンクで使用

▪<!– –!>要素
コメントで使用

▪<img>要素
画像で使用、終了タグいらない

▪<li>要素
リストで使用

▪<ul>要素
【親要素】あたまに黒点がつく

▪<ol>要素
【親要素】あたまに数字がつく

▪<input>要素
1行のテキスト入力欄、終了タグいらない
ボタン作成でも使用する
記述例)<input type=”submit”>

▪<textarea>要素
複数行のテキスト入力欄

属性について

属性の書き方

開始タグの中に記述する
値を指定する際は、ダブルクォーテーションを忘れないように

▪href属性
リンクの飛び先を指定

<a href=”https://prog-8.com”>Progate</a>

▪src属性
画像のリンクを指定

>c=”https://prog-8.com/images/family.jpg”>
テキストを囲まないため終了タグが不要

▪rel属性
CSSファイルを読み込む宣言で使用

▪type属性
送信ボタン作成で使用する
記述例)<input class=”contact-submit” type=”submit” value=”送信”>

▪value属性
ボタンに表示される文字の変更で使用する
記述例)<input type=”submit” value=”保存”>

CSSの仕組み

●HTMLの要素に対して色、大きさ、配置などを指定しページをデザインする
●HTMLと別のファイルに記述する
「どこの」「何を」「どうする」か指定する
●フォント名にスペースがある場合は、ダブルクォーテーションで囲む
●class名でCSSを指定する場合、先頭にドット「.」が必要
●セレクタ＝要素、CSSではセレクタという
●対象（要素名）をセレクタ、変更項目をプロパティと呼ぶ

書き方(例)
h1{
color:red;
}

複数のセレクタにまとめて指定する書き方(例)

input, textarea{
border:3px solid #ff0000;
}

CSSのコメントは /* */ で囲む

プロパティについて

要素を中央寄せする方法

margin:0 auto;
text-align:center;

margin ← ブロック要素（広い範囲を囲うような場合）で使う

text-align ← インライン要素・インラインブロック要素(テキストやボタン)で使う

▪colorプロパティ：文字の色を変える

▪font-sizeプロパティ：文字の大きさを指定

▪font-familyプロパティ：フォントの種類を指定

▪background-colorプロパティ：背景色の色を変える

▪widthプロパティ：横幅を変える

▪heightプロパティ：高さを変える

▪list-styleプロパティ：リスト内の先頭に表示されるマーカーの設定を変える

▪floatプロパティ：並び順を変える

▪paddingプロパティ：内右下左の順で入力する）と2値指定するパターン（上下左右の順で入力）がある

▪marginプロパティ：外側の余白を変える、値の指定の方法はpaddingと同じ

▪borderプロパティ：枠線をつける、top bottom left rightで方向を指定できる、太さ・種類・色の順で指定を記述する

▪background-imageプロパティ：背景画像の指定
　background-size:cover;で表示範囲を埋め尽くすように、表示を自動調整

▪opacityプロパティ：要素の中身すべてを透明にできる

▪rgbaプロパティ：背景のみ透明にできる、色の指定がRGBになる
記述例)
background-color:rgba(84,190,238,0.5);
(この時の0.5は透過度)

▪letter-spacingプロパティ：文字間隔を指定できる

▪displayプロパティ：インラインブロック要素に変更できる
block（ブロック要素）、inline-block（インラインブロック要素）、inline（インライン要素）を指定できる
記述例)
display:blick;

▪border-radiusプロパティ：角を丸めることができる

▪text-alignプロパティ：要素・インラインブロック要素の配置を指定できる
left 左寄せ、center 中央揃え、right 右寄せ

▪transitionプロパティ：アニメーションがつけれる
記述例)
div{
transition:all 1s;
}

▪line-heightプロパティ：指定した高さの中心に文字を配置できる

▪font-weightプロパティ：文字の太さを変えれる

▪box-shadowプロパティ：ボックスに影をつけれる

▪cursorプロパティ：マウスカーソルが要素に乗ったときにカーソルを変えれる
<a>タグはデフォルトでcursor:pointer;が設定されている

▪positionプロパティ：位置変更

▪z-indexプロパティ：

class名の例

▪半角スペースで区切ると、複数指定することができる
記述例)<div class=”btn blue”></div>

▪header

▪header-logo

▪header-list

▪logo1

▪logo2

▪section-title

▪main

▪copy-container

▪contents

▪contents-item

▪contact-form

▪footer

▪footer-logo

▪footer-list

▪top-wrapper

▪lesson-wrapper

▪message-wrapper

▪container

疑似クラス

▪hover
セレクタ:hover{}と記述する（セレクタの所はクラスでも可）
記述例)

値の例

▪none：無

▪top：上

▪bottom：下

▪left：左

▪center：中央

▪right：右

▪solid：線の種類の種類

▪submit：送信ボタンで使用

▪auto
横幅は自動できないのでwidthを指定する

▪all

▪red：赤

▪white：白

▪normal：

▪bold：文字の太さで使用

▪active：～のときだけ作用する

▪absolute：絶対位置

▪relative：相対位置

▪fixed：指定した位置に固定

facebookボタンにアイコンを表示する

<head>要素でFont Awesomeの読み込みを記述する
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>　