[CSS]CSSのバリエーション(3月9日)
午前のカリキュラム
- タイピングテスト(約10分)
- CSSの記述のバリエーション 7種類
午後のカリキュラム
<Memo>
ファイルの新規作成 Ctrl + N
ファイルに名前を付けて保存 Ctrl + Shift + S
で時間短縮ができるようになった。
CSSの記述のバリエーション
以下は自宅での復習で作成したファイルと、ポイントや躓いた点です。
CSS06
先生のブログの指示の通りに整えていく。
つまづく点は特になし。
HTML、CSSの文法チェック完了まで、10分かかった。
CSS07
HTML、CSSの文法チェック完了まで、16分。
ルーラーとカラーピッカーの切り替えに慌て、時間を使ってしまった。
CSS08
<ポイント>
1. h2タグのみフォントが明朝体になる
2. h2タグの下の画像埋め込み
2.について → h2タグのpadding-bottomを多く取り、更に背景画像として埋め込む方法を取る。
HTML、CSSの文法チェック完了まで26分。
CSS09
<ポイント>
h2タグの枠として画像を入れる。
今回はstyle.cssにbackground-imageとして入れた。
HTML、CSSの文法チェック完了まで9分。
sample_a
<ポイント>
一旦CSSをリセットしてmargin、paddingを設定。
HTML、CSSの文法チェック完了まで9分。
sample_b
sample_a同様、CSSをリセットしてmargin、paddingを設定。
HTML、CSSの文法チェック完了まで11分。
sample_c
<ポイント>
1. 見出し左のマークをIllustratorで作成する。
2. マークと見出し文字の中心を揃える
web用素材の作成で大事なこと
- Illustratorで新規ドキュメントを開く際に、プロファイルを「Web」にする。
- ピクセルプレビューをONにし、オブジェクトをピクセルの線にピッタリ合わせる
→アンチエイリアスが付くのを防ぐため
マークの作成までは順調だったが、Chromeのプレビューではアンチエイリアスが付いているように見えたため、やり直した。
2. マークをhtmlに<img alt="" />で入れる方法と、stylesheetにh1タグの背景として入れる方法の2つがある。
今回はhtmlに<img alt="" />で入れる方法を使った。
vertical-align: middle をimgに指定することで中心が揃う。 しかし、余白の調整に時間がかかってしまった。
HTML、CSSの文法チェック完了まで27分。