102日目 | web制作

本日は…

■金曜日につくったレスポンシブサイトで使った、バナーの制作方法

私がつくったのはこんな感じ。

・ポイント
　①文字をおくときはそのまま載せない⇒ドロップシャドウ、境界線などを入れて目立たせる
　②装飾を付けたときは文字詰めを少し広げてやる

　③40%の部分、数字に対して記号の文字サイズは１～２回り小さいものを指定すると、数字が目立つ

　④曲線の描き方⇒ペンツールで囲んで選択範囲を作成⇒塗りつぶし
　⑤境界線⇒全てを選択範囲に選んだ状態で、境界線を描くでいい

■同じくコードの書き方
①固定値のものを作らない
　・img は　max-width:100%;をかけてやる

②レスポンシブになったときに左右にmarginを入れてやる
　⇒計算の仕方…980pxのとき20pxなら…と計算して%指定にする
　　横幅が決まれば、margin: 0 auto;で指定してやればいい

ちょっと番外<一部固定で可変レイアウトにする場合>
　：固定したいものは固定したい値を指定
　：固定じゃないものと固定値を含む外側＝wrapper的なやつは普通にwidth:100%⇒一定以上いくとカラム落ちする
　：固定じゃないものは100%でmarginで固定分マイナス指定をする⇒固定値の分の横幅が出来る、固定値部分はカラム落ちしなくなる（100%＋（固定値＝-margin分）で収まってしまうというようなイメージ）るけど、固定値じゃない部分のコンテンツの上に固定値のコンテンツが被ってしまう
　：固定じゃないほうの中身をdivなどで囲んでやり、外側の-marginと同じ値、marginを指定してやる⇒margin分で固定値部分をよけるイメージ

わかりにくい･･･でもこういうこと。

インテリアショップカサブランカ
できあがり。

提出したものに余白を指定し、タブレット表示の際はバナー部分を固定値にした…というもの。

■100選はjimdoのもので妥協
時間が無い！汗