【Day44】2019.08.24

・ファーストビューでは全面に写真が使用されている
・真ん中に点目であるロゴ配置
→手書き風文字のため、固くなくまさにリラックスをイメージさせるロゴ

・ロゴ部分(486×218.219)をクリックすると、下コンテンツに移動
・ロゴ以外の部分をクリックすると写真が切り替わる

・上部右側にナビゲーション
→フォント：Raleway - 300 italic・フォントサイズは22px・カラー#000
・上部左側にロゴ　サイズ250×111
・写真部分の真ん中にテキスト「Shokudo」サイズ：255.86×82・カラー#000・文字間：0.16em

{letter-spacing: 値}　→　CSSで文字間を調整する
★normal←初期値
 → ブラウザが自動的に字間を決めてくれるが、実際0になることがほとんど
★数値+px
 → 決まったpx数で字間を指定
★数値+em 
 → 相対的な比率を指定しておくと、フォントサイズに応じて字間が決まる

▷値をマイナスにすると字間が狭くなる

・conceptとinformation部分のフォント(下記写真)
→フォント：Raleway - 300 italic・サイズ：15px・カラー：#333333・行間：15px
・instagramのリンク
→フォント：Lato - 400・サイズ：12px・カラー：#999999・行間：12px
・その他のフォント：Lato - 400・サイズ：14px・カラー：#333333・行間：36px
・img：369.59×247.63
▷パッと見、同じ黒でも異なる色を使用している

{line-height: 値}　→　CSSで行間（行高）を指定する
★normal←初期値
 → ブラウザが自動的に行高（行間）を決めてくれる
★数値+px
 → 決まったpx数を指定
★数値+em
 → 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる
★数値+%
 → 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる
★単位なし（数値のみ）
 → 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる。   line-height: 1.5のように値だけで書く。

・official Siteのボタンは 角丸：9999px / 枠線：1px solid #cccccc / 
フォントカラー#666666
→hoverでボタン色が#fffから#000に変化

→写真と表品名をセットで近接している→表品名のみの記載より写真もセットにしたことでイメージ湧きやすい、選びやすい

・footerの背景色：#f5f5f5

・右下にページトップに戻れるボタンあり
→黒丸に白字で上矢印表記

下記スマホview