■制作目的
・レスポンシブ対応
・コーディングのスピードアップ
・知らない技術のインプットとアウトプット
◾️ サイト内容
◾レスポンシブ
◾️学んだこと
【ヘッダーの固定】
①ヘッダーとボディー要素の占める割合を決める
⇨ ヘッダーを全体の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から実行