HTML/CSSの勉強をProgateで勉強したことのまとめ

2018.06.27

この間書いたスケジュールで進めるため、まずはHTMLとCSSについて、Progateで勉強しました。

ものすごく内容が充実しているんだけど、全部やるのにかかったのは5-6時間くらいかな。
僕は一回ドットインストールで勉強していたので、復習としてはちょうどよかったです。
ただ、すぐに忘れてしまいそうなので、簡単にダイジェストというか、僕が覚えておきたい要点だけまとめておこうと思います。
最初はやったコースの所感で、後半は覚えておきたい内容になってます。

Contents

1 HTML & CSS 初級編（学習コース）
2 HTML & CSS 中級編（学習コース）
3 HTML & CSS 初級編（道場コース）
4 HTML & CSS 中級編（道場コース）
5 HTML & CSS 上級編
6 HTMLのタグ
7 CSSのプロパティ
8 その他

HTML & CSS 初級編（学習コース）

これは3h50mのコースでしたが、2hかかりました。
ただ、このブログを書きながらだったので、正味1h-1.5hくらいじゃないでしょうか。
このコースでは実際にありそうなWebページのトップ画面1ページまるまる自分でコードを打って作る感じなので、これだけでも十分Webサイトは作れそう。
でも僕的には物足りないので、中級編もやります。

HTML & CSS 中級編（学習コース）

これは4h30mのコースですが、2.5hくらいかかりました。これもブログ書きながらなので、2ｈもかからないはず。
そしてやってから気づいたんですが、Progateは現時点で６５レッスンを提供していて、そのうちの一部(16レッスン)は無料だけど残りは有料なようです。
でも月９８０円なので、さくっとやって、さくっと終えられれば980円ですみますし、逆にダラダラ学習にならないからいいかも。
内容的には初級編の応用で、より綺麗に、最近主流の表示を行うためのテクニックというか小技がたくさん含まれていました。

HTML & CSS 初級編（道場コース）

これは、2h30mのコースで、どれくらいかかったかな。。。ちゃんと計らなかったのであれですが１時間位かな。
同じタイトルの学習コースで作成したものを、自力で作るのが道場コースです。
自分で考えて作ろうとするのが一番勉強になるなと実感するコースでした。やって損はないというか、絶対やった方がいいと思います。

HTML & CSS 中級編（道場コース）

なんかどう見ても、見た目が同じように出来上がったんだけどなぜか合格をもらえず、先に進めなくなってしまったので途中でリタイア。
なんか仕様書に書いてないことのほうが多くなり過ぎて、結局正解を開発者ツールを駆使して確認して作る感じになるので、あんまり。。。。
ま、クリアできてないので、いいわけですがｗ

HTML & CSS 上級編

これは2hのコースです。実際には1hもかからなかったかな。
上級という名前だから難しいかと思いましたが、レスポンシブデザインに対応するためのテクニックや、表示崩れにならないようにするためのテクニックなどの紹介がメインでした。
なので、難しいというよりは、より細かくきれいなサイトを作るための内容が盛りだくさんという感じです。
これもやっておいて損はないかと。

以降は学んだことのまとめです。

HTMLのタグ

見出しタグ(<h1>、<h2>、<h3>…..)

見出しを示すタグ。数が大きくなるほど、小項目になる。

<h1>見出し1</h1>
<h2>見出し２</h2>

1 2	<h1>見出し1</h1> <h2>見出し２</h2>

ｐタグ

段落を示すタグ。見出し以外で使う。

<p>文章をここに書く</p>

1	<p>文章をここに書く</p>

aタグ

リンクとして使う。href属性でURLを指定。

<a href="https://yowatana.com">Do not live to eat!</a>

1	<a href="https://yowatana.com">Do not live to eat!</a>

imgタグ

画像を表示する。src属性に画像のURLを指定する。終了タグは不要。

<img src="https://i1.wp.com/yowatana.com/wp-content/uploads/2018/06/IMG_3606-e1528300049970.jpg?ssl=1">

1	<img src="https://i1.wp.com/yowatana.com/wp-content/uploads/2018/06/IMG_3606-e1528300049970.jpg?ssl=1">

リスト(ulタグ、olタグ、liタグ)

リストを作成する。ulタグを使うと黒ポチ、olタグを使うと数字で表示される。

<!-- 黒ポチの箇条書き -->
<ul>
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
</ul>

<!-- 連番の箇条書き -->
<ol>
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
</ol>

<ul>

</ul>

<ol>

</ol>

divタグ

要素をグループ化するために使用する。

<div class="header">
   <p>ここはヘッダー</p>
</div>
<div class="main">
   <p>ここはメイン</p>
</div>
<div class="footer">
   <p>ここはフッター</p>
</div>

<p>ここはヘッダー</p>

</div>

<p>ここはメイン</p>

</div>

<p>ここはフッター</p>

</div>

でも、headerやfooterはそもそもheaderタグやfooterタグがあるので、そっち使いましょうとのこと。

spanタグ

これも部分的にグループ化するタグだが、divタグと違い、文中で使える。改行は行われない。

<p>新しい<span>海水魚</span>飼いたいな。</p>

1	<p>新しい<span>海水魚</span>飼いたいな。</p>

入力フォーム(input、textarea タグ)

inputタグは１行だけの入力フォーム。
textareaタグは複数行。終了タグが必要。

<!-- １行の入力フォーム -->
<input>

<!-- 複数行の入力フォーム -->
<testarea></textarea>

<!-- 送信ボタン。value で表示されるボタンの文字を指定できる-->
<input type="submit"　value="保存するよ">

<input>

CSSのプロパティ

対象(要素名)をセレクタ、変更項目をプロパティと呼ぶ。
プロパティは:（コロン）で区切って値を指定し、;（セミコロン）で終える。
classをセレクタにする場合は”.”を使う。
idをセレクタにする場合は”#を使う。

colorプロパティ

文字色を指定する。

h1 {
   color: #ff0000;
}

h1 {

color: #ff0000;

}

opacityプロパティとrgba

要素の透明性。0に近いほど透明で1だと不透明。

.top-wrapper h1{
opacity: 0.7;
}

ただ、opacityは要素全体を透過するため、例えば背景だけ透かしたいとかだとrgbaを使う必要がある。
以下は背景色の指定でrgbaを使っている。左から赤、緑、青、透過度の順で指定。

div {
   background-color: rgba(84,190,238,0.5)
}

div {

background-color: rgba(84,190,238,0.5)

}

letter-spacingプロパティ

文字と文字の間のスペースの大きさを指定する。

.top-wrapper h1{
  letter-spacing: 5px;
}

.top-wrapper h1{

letter-spacing: 5px;

}

line-heightプロパティ

行の高さを指定。
要素と同じ大きさを指定すると、文字が垂直方向の中央に表示されるので、そういう使い方もできる。

dev {
   line-height: 30px;
}

dev {

line-height: 30px;

}

font-sizeプロパティ

文字サイズをピクセルで指定する。

h1 {
   font-size: 30px;
}

h1 {

font-size: 30px;

}

font-wightプロパティ

文字の太さを指定する。normalかbold。
hxタグは最初からboldになっている。

h2 {
   font-weight: normal;
}

h2 {

font-weight: normal;

}

font-family プロパティ

使用するフォントを指定。

h1 {
   font-family: serif;
}

h1 {

font-family: serif;

}

background-color プロパティ

背景色を指定。

h1 {
   background-color: #dddddd;
}

h1 {

background-color: #dddddd;

}

background-image プロパティ

背景画像を指定。既定だと埋め尽くすまで繰り返し表示されるので、background-sizeを使用して拡大表示させたりする。

div {
   background-image: url(top.png)
   background-size: cover;
}

div {

background-image: url(top.png)

background-size: cover;

}

height、width プロパティ

要素の幅と高さを指定。
ピクセルでも指定できるし、親要素に対する割合（%）でも指定できる。

h1 {
   width: 500px;
   height: 80px;
}

h1 {

width: 500px;

height: 80px;

}

list-style プロパティ

リストのスタイルを指定する。

li {
   /* 黒ポチをなくす */
   list-style: none
}

li {

/* 黒ポチをなくす */

list-style: none

}

float プロパティ

要素を横並びにしたりする時に使う。
値にleftを指定すると、左から並ぶ。
rightなら右から。

li {
   list-style: none;
   float: left;
}

li {

list-style: none;

float: left;

}

余白について

padding プロパティは要素の内側の余白。
margin プロパティは要素の外側の余白。

初めてProgateを使ってみたけど、とてもわかりやすい。
解説も要点だけで読みやすいし、わかりやすい図まで付いてて、本買うより絶対いい。 pic.twitter.com/ExNtcFdDtE

— ワタナベヨウスケ (@yowatana1987) 2018年6月24日

書き方は同じ。

.header-logo {
  /* 上下のpaddingを20px、左右のpaddingを40px */
  padding: 20px 40px;
}

.header-logo {

/* 上下のpaddingを20px、左右のpaddingを40px */

padding: 20px 40px;

}

中央寄せについて

画面中央に要素を表示させるにはmarginプロパティで左右をautoを指定する。
autoを使うときはwidthも指定する。

div {
   margin: 0 auto;
   width: 300px;
}

div {

margin: 0 auto;

width: 300px;

}

borderプロパティ

要素の枠線についての指定。
左から太さ、種類、色。

.section-title {
  border: 2px solid #dee7ec;
}

.section-title {

border: 2px solid #dee7ec;

}

hoverとactive

hoverはマウスのカーソルが乗ったときのスタイルを指定する。
activeはボタンをクリックしている間だけ適用するスタイルを指定する。
記述方法は同じ。

div:hover {
   background-color:red;
}

div:hover {

background-color:red;

}

/border-radiusプロパティ

borderの角の丸みを作る。

div {
   background-color: red;
   border-radius: 10px;
}

div {

background-color: red;

border-radius: 10px;

}

transition

アニメーションをつける。
変化の対象プロパティと変化にかかる時間を指定する。
プロパティをallにすると全てに適用できる。hoverと併用することが多い。
hoverのセレクタではなく、オリジナルの方に記述する。

div {
   transition: all 1s;
}

div:hover {
   background-color:red;
}

div {

transition: all 1s;

}

div:hover {

background-color:red;

}

text-alignプロパティ

インライン要素とインラインブロック要素の配置を指定する。
値はleftで左寄せ、rightで右寄せ、centerで中央寄せ。

p {
   text-align: center;
}

p {

text-align: center;

}

positionプロパティ

position: absoluteというプロパティを使用して、画面左上からの距離を指定する。
距離を指定するときは、topとかleftとかを使う。
これを使えば、要素と要素を重ねることもできる。

div1 {
   position: absolute;
   top: 50px;
   left: 70px;
}

div2 {
   position: absolute;
   top: 120px;
   left: 140px;   
}

div1 {

position: absolute;

top: 50px;

left: 70px;

}

div2 {

position: absolute;

top: 120px;

left: 140px;

}

また、親要素でpositon:relativeを指定すると、小要素は親要素の左上を基点とするようになる。

.parent {
   position: relative;
}

.child {
   position: absolute;
   top: 25px;
   left: 40px;
}

.parent {

position: relative;

}

.child {

position: absolute;

top: 25px;

left: 40px;

}

さらに、単に要素でposition:relativeを指定した時に、一緒にtopやleftも指定すると、その要素自身の基準点をずらすことができる。

div {
   position: relative;
   top: 20px;
   left: 30px;
}

div {

position: relative;

top: 20px;

left: 30px;

}

最後に、position: fixedというのもあり、これを使うと、例えばヘッダーなどを常に画面上部に表示させたままにできたりする。

div {
   position: fixed;
   top: 20px;
   left: 30px;
}

div {

position: fixed;

top: 20px;

left: 30px;

}

z-indexプロパティ

要素が重なった時に、どちらの要素を上にするかを決める要素。
値が大きいほど上に表示される。

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  top: 0;
  z-index: 10;
}

header {

height: 65px;

width: 100%;

background-color: rgba(34, 49, 52, 0.9);

position: fixed;

top: 0;

z-index: 10;

}

box-shadowプロパティ

ボックスの影とその色を指定する。
左から水平方向、垂直方向、色を指定している。

div {
   box-shadow: 10px 10px #FFFFFF;
}

div {

box-shadow: 10px 10px #FFFFFF;

}

cursorプロパティ

要素をポイントしたときの、マウスカーソルの表示を指定する。
指マークにするとか。pointer,textが指定できる。

div {
   cursor: pointer;
}

div {

cursor: pointer;

}

box-sizing: border-box

要素の幅(width)にborderとpaddingを含まれるようにする。
*(全体)に対して適用することが推奨されれている。

* {
   box-sizing: border-box
}

* {

box-sizing: border-box

}

その他

HTMLの基本構造

HTML書く時に必要な内容。

<!DOCTYPE html>
<html>
<head>
   <!-- 文字コード -->
   <meta charset="utf-8">

   <!-- viewport -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- ページタイトル -->
   <title>Do not live to eat!</title>

   <!-- 読み込むCSS -->
   <link rel="stylesheet" href="stylesheet.css">

</head>
<body>
   <h1>Do not live to eat!</h1>
   <p>頑張ってHTML/CSSを勉強中</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>頑張ってHTML/CSSを勉強中</p>

</body>

</html>

メモとして使う。言語によって違うのでいつも忘れる。
HTMLはこんな感じ。

<!-- ここはコメントです -->

1	<!-- ここはコメントです -->

CSSはこんな感じ。

/* ここはコメントです */

1	/* ここはコメントです */

クラス

HTMLタグにclassを指定すると、CSSでclassに対してスタイルを適用できる。
CSS でセレクタとして指定するときは . を使う。

<!-- リスト2だけ "selected" というクラスを指定 -->
<ul>
   <li>リスト1</li>
   <li class="selected">リスト2</li>
   <li>リスト3</li>
</ul>

<ul>

</ul>

.selected {
   color: red;
}

.selected {

color: red;

}

以下のように複数のクラスを指定することもできる。

<div class="btn blue">
</div>

<div class="btn red">
</div>

</div>

</div>

.btn {
   font-size: 20px;
}

.blue {
   color: blue;
}

.red {
   color: red;
}

.btn {

font-size: 20px;

}

.blue {

color: blue;

}

.red {

color: red;

}

HTMLのブロック要素とインライン要素

div タグのように前後で改行が入り、親要素の幅一杯に広がるのがブロック要素。
spanタグやaタグのように改行されないのがインライン要素。
さらに、両方の特徴を併せ持つインラインブロック要素というのもある。aタグでも、CSSでdisplayプロパティを使用すれば、block、inline、inline-blockを指定できる。

アイコンの作り方

Font Awesome を使いましょう。

ボタンをクリックしたらへこむアニメーション

ボタンをクリックした時に、本当にボタンを押したときのようにへこむアニメーションを付けるには、影を消し、消した影の分下げる。

.box {
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}

.box:active {
  box-shadow: none;
  position: relative;
  top: 7px;
}

.box {

background-color: #5dca88;

cursor: pointer;

box-shadow: 0 7px #1a7940;

}

.box:active {

box-shadow: none;

position: relative;

top: 7px;

}

メディアクエリ(Media queries)

メディアクエリは画面サイズに合わせて、適用するスタイルを設定できる方法。
指定した条件の場合だけ適用するスタイルを定義できる。
よく使う条件は以下で、こういうのをブレイクポイントと呼ぶらしい。
コースでは、1000px以下をタブレット用、670px以下をスマートフォン向けとしていた。
max-width : 最大幅
min-width : 最小幅

@media (max-width:1000px) {
   /* ここにスタイルを定義すると横幅が1000pxより小さければ適用される */
}

@media (max-width:1000px) {

/* ここにスタイルを定義すると横幅が1000pxより小さければ適用される */

}

メディアクエリを正しく適用するためには、headパートにviewportを設定する。

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Do not live to eat!</title>
   <link rel="stylesheet" href="stylesheet.css">
   <link rel="stylesheet" href="responsive.css">
</head>

<head>

</head>

レイアウト崩れの要因とTips

divのwidthを25%に指定して、4つ並べようとする。
このとき、paddingをつけてしまうと、100%を超えてしまうので、崩れる。
そんなときは、borderとpaddingも含めて％を計算してくれるbox-sizing: border-box;がおすすめ。
これは*をセレクタにして、全体に適用するのが推奨。管理がしやすくなる。

widthはpxで指定すると画面幅で崩れてしまうので、%で指定するとよい。
ただ、これだと大きい画面だと見にくくなる場合もあるので、max-widthも一緒に指定しておくとよい。

小要素が全てfloatだと、親要素の高さが0になる。
そのため、親要素の高さを超えてしまって表示が崩れる。
これを避けるために、空のdivタグを小要素に含めて、これにclear:leftをcssで設定することでfloatが解除され、親要素が小要素を包括するようになる。

これでひとまず、HTML/CSSは大丈夫な気がする。

Let's share this article!

HTML/CSSの勉強をProgateで勉強したことのまとめ

HTML & CSS 初級編（学習コース）

HTML & CSS 中級編（学習コース）

HTML & CSS 初級編（道場コース）

HTML & CSS 中級編（道場コース）

HTML & CSS 上級編

HTMLのタグ

見出しタグ(<h1>、<h2>、<h3>…..)

ｐタグ

aタグ

imgタグ

リスト(ulタグ、olタグ、liタグ)

divタグ

spanタグ

入力フォーム(input、textarea タグ)

CSSのプロパティ

colorプロパティ

opacityプロパティとrgba

letter-spacingプロパティ

line-heightプロパティ

font-sizeプロパティ

font-wightプロパティ

font-family プロパティ

background-color プロパティ

background-image プロパティ

height、width プロパティ

list-style プロパティ

float プロパティ

余白について

中央寄せについて

borderプロパティ

hoverとactive

/border-radiusプロパティ

transition

text-alignプロパティ

positionプロパティ

z-indexプロパティ

box-shadowプロパティ

cursorプロパティ

box-sizing: border-box

その他

HTMLの基本構造

コメント

クラス

HTMLのブロック要素とインライン要素

アイコンの作り方

ボタンをクリックしたらへこむアニメーション

メディアクエリ(Media queries)

レイアウト崩れの要因とTips

Related Articles

新しいWordPressテーマのイメージを書いてみる

いざWordPressテーマ作成！の前の勉強や必要なスキルについて考えてみた

jQueryをProgateで勉強したことのまとめ

JavaScriptをProgateで勉強したことのまとめ

PHPをProgateで勉強したことのまとめ

新しい WordPress テーマを考える