【30DAYSトライアル1st DAY5.】
【デイトラ5日目】
— オサナイユウタ🎸🍺🖥 (@osanaiyuta) January 29, 2020
レスポンシブデザインの基礎。50分で終わった。答えほとんど見なかった。成長を感じている。#デイトラ #30DAYSトライアル
「HTML & CSS 学習コース 上級編」コースを修了しました! https://t.co/o4woi0oKrV #Progate
だいぶ慣れてきました。講座をサクッとやって、ブログではコードもまとめていく形にします。、
実際に使ったhtml&cssコードまとめ
メディアクエリ(PC・タブレット・スマホ)ごとにブレイクポイントを指定する。
@media (max-width: 1000px)
box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれる。*{ }で全てに適応。
*{ box-sizing: border-box; }
画面幅によって全体のwidthが変わるように、width: 100%に変更
width: 100%;
floatを解除
clear:left;
中央寄せ
text-align:center
関連記事
オススメ記事