学生食堂・社員食堂・メニュー開発プロデュースを行う食堂#1日1サイトレビュー

2019年8月24日 23:32

【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のように値だけで書く。