【Travel Blog】

OVERVIEW

架空サイト コーデイング③

■制作目的

・レスポンシブ対応

・コーディングのスピードアップ

・知らない技術のインプットとアウトプット


◾️ サイト内容


◾レスポンシブ


◾️学んだこと

【ヘッダーの固定】

①ヘッダーとボディー要素の占める割合を決める

⇨ ヘッダーを全体の30%、ボディー部分を70%に指定

②position: fixed;を使って固定(ヘッダー)

⇨ 固定する前にヘッダー部分は完成させておく必要あり

③top、left、width、backgroundなど細かく指定

 ⇨ position位置を決めたらヘッダーの背景色が透けないように工夫

④ボディー要素と被らないように間隔を指定

⇨ そのままだとヘッダー部分と被るため、paddingなどで間隔を空ける


【 TwitterURLの埋め込み】

①下記リンク先へアクセス

 ⇨ https://publish.twitter.com/# 

②Enter a Twitter URLに貼り付け 

⇨ 自身の表示させたいTwitterURLを貼り付ける

③Copy codeを押してコピー

⇨ リンク先を貼り付けてコード内容をコピーする

④コピーしたコードをHTMLファイルに添付 

⇨ HTMLファイル添付しると自身のTwitterURLが表示される

※ 画面サイズなどの編集はset customization optionから実行