Do not live to eat!

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

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

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

HTML & CSS 初級編(学習コース)

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

HTML & CSS 中級編(学習コース)

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

HTML & CSS 初級編(道場コース)

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

HTML & CSS 中級編(道場コース)

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

HTML & CSS 上級編

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

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

HTMLのタグ

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

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

pタグ

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

aタグ

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

imgタグ

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

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

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

divタグ

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

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

spanタグ

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

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

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

CSSのプロパティ

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

colorプロパティ

文字色を指定する。

opacityプロパティとrgba

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

.top-wrapper h1{
opacity: 0.7;
}

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

letter-spacingプロパティ

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

line-heightプロパティ

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

font-sizeプロパティ

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

font-wightプロパティ

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

font-family プロパティ

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

background-color プロパティ

背景色を指定。

background-image プロパティ

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

height、width プロパティ

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

list-style プロパティ

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

float プロパティ

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

余白について

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

書き方は同じ。

中央寄せについて

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

borderプロパティ

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

hoverとactive

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

/border-radiusプロパティ

borderの角の丸みを作る。

transition

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

text-alignプロパティ

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

positionプロパティ

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

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

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

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

z-indexプロパティ

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

box-shadowプロパティ

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

cursorプロパティ

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

box-sizing: border-box

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

その他

HTMLの基本構造

HTML書く時に必要な内容。

コメント

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

CSSはこんな感じ。

クラス

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

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

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

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

アイコンの作り方

Font Awesome を使いましょう。

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

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

メディアクエリ(Media queries)

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

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

レイアウト崩れの要因と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!