森のプログラミング練習ブログ

htmlやcssの練習したコードを投稿するブログです。

動画で練習22

参考ブログ

初心者でもわかるHTML&CSS講座 イタリアンレストランホームページを作る | Inoma Createk

※ブログ内に練習用のデータあり

-------------------------------------

CSSでスタイル調整

  • 「style.css」でコードを入力して装飾していきます。
  • サイト全体のフォントを変える
  • 全体を変える<body>タグ
  • <font-family>を指定
  • このコードでは「明朝体」が使用されています。
  • 複数の「明朝体」を使用
  • 指定したフォントがユーザーの環境に合っていない事があるので複数の「明朝体」を設定しています。
  • 初期状態だと文字や画像が左に寄っているので「CSS」で中央に設定していきます。
  • <.container>タグを設置
  • <.container>の最大幅<max-width>を「1000px」で指定
  • <margin>プロパティを使用して上下の余白を「左右の余白を「autoに指定

--------------------------------------

CSS

f:id:morijuntan:20201222213744p:plain

↑赤枠が自分で入力した箇所です。

ブラウザ

f:id:morijuntan:20201222214443p:plain

↑画像や文字が中央に設置されました。

 

※続きます。