Schoo / プロデザイナーが実践するHTML＆CSSスキル向上トレーニング 1/5

ドットインストールからSchooへ。
「SEOの勉強には、SEOに強いWebサイトを分析するのがいい」とお聞きしたことがあり、HTMLスケッチに興味を持った。
ちょうどSchooさんでそんな講義を見つけたので、月会員(プレミアム会員 980円/月)に１ヶ月だけ登録してみて視聴した。
参考になった点のメモを残します。

Schoo link

---

メモ

とりあえずnormalize.cssは入れとけ

HTMLスケッチとは

ソースを見ずに、あるサイトの再現を試みること

まずは大枠を決める

media, media-side, media-bodyなど

分割する

media-bodyを, header, page-changer, article, footerに分割

Sublime Textだとa*でaタグを打てる

Sublime Text欲しくなった。。。$70か。。。。

bodyの中のboxを右上に寄せたい場合は、h1の直下

ここら辺は後で追記します。
bodyの中のブロック要素の中でboxを右上に寄せるのは難しいということかな？

部品の値はタイプするが、本文などはコピー

打つの疲れるし、本文を覚えたいわけでもないですからね。

section内の左上に寄せている画像なども、h要素の下・p要素の上に書く

target_blank(別窓マーク)の実装方法

1. imgでおく 2. background-imageでおく

Clearfix

CSSのフレームワーク？？？

paddingのとりあえずの決め方

上はゼロで置いてみる。右下左で調整。
4つ書くと上から時計回り

li要素の点や数字を消す

list-style:none;

medio要素

片側が固定幅・もう片側が可変幅の時に有効
左サイドがナビゲーションなど。

CSSで三角形を作ることができる

ボーダーをつける
widthとheightをゼロにする
マージンを一箇所だけ残して -n pxにする
ボーダーの太さもn以上大きくする。
参考：Animation to Explain CSS Triangles

codepen

色々サンプルがある

X scope

CSSでグラデーションをかける

参考：https://css-tricks.com/css3-gradients/

Cmd+ctrl+↑ or ↓ (Sublime Text ?)

選択している行ごと移動できる

Cmd + l

1行選択

Cmd + Enter

行の途中でも、行末で改行する

初めてのスケッチには

簡単なページを探すか、普通のページの一部分だけでやってみる。