くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[CSS]CSSのバリエーション(3月9日)

午前のカリキュラム

  • タイピングテスト(約10分)
  • CSSの記述のバリエーション 7種類

 午後のカリキュラム

  • CSSの記述のバリエーション 7種類の続き
  • Photoshop

<Memo>

ファイルの新規作成 Ctrl + N
ファイルに名前を付けて保存 Ctrl + Shift + S
で時間短縮ができるようになった。

 

CSSの記述のバリエーション

以下は自宅での復習で作成したファイルと、ポイントや躓いた点です。

 

CSS06

CSS06

先生のブログの指示の通りに整えていく。
つまづく点は特になし。
HTML、CSSの文法チェック完了まで、10分かかった。

CSS07

CSS07
HTML、CSSの文法チェック完了まで、16分。
ルーラーとカラーピッカーの切り替えに慌て、時間を使ってしまった。

CSS08

CSS08

<ポイント>
 1. h2タグのみフォントが明朝体になる
 2. h2タグの下の画像埋め込み

f:id:pleasure10501:20150309222338p:plain
2.について → h2タグのpadding-bottomを多く取り、更に背景画像として埋め込む方法を取る。
HTML、CSSの文法チェック完了まで26分。

CSS09

sample_a

<ポイント>
h2タグの枠として画像を入れる。
今回はstyle.cssにbackground-imageとして入れた。
HTML、CSSの文法チェック完了まで9分。

sample_a

fsample_b

<ポイント>
一旦CSSをリセットしてmargin、paddingを設定。
HTML、CSSの文法チェック完了まで9分。

sample_b

sample_c

sample_a同様、CSSをリセットしてmargin、paddingを設定。
HTML、CSSの文法チェック完了まで11分。

sample_c

f:id:pleasure10501:20150309220410p:plain

<ポイント>
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分。