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

37才からのHTML&CSS

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

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

学習方法

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

Progate

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

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

スポンサーリンク

【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ファイルを読み込む宣言で使用

<link rel=”stylesheet” href=”stylesheet.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”> 

<span class=”fa fa-facebook”></span>

コメント

タイトルとURLをコピーしました