レスポンシブデザイン
スマホのスマホの表示に対応したサイト制作において必須の技術
画面のサイズに応じて最適なレイアウトになる。
メディアクエリ
画面サイズに応じてCSSのスタイルを設定する
<head>
・・・
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--メディアクエリを機能させる 画面の大きさに応じたレイアウトにさせる
レスポンシブデザインのurlを読み込む際には、必ずviewportよりも下の行に記述する-->
・・・
<link rel="stylesheet" href="url.css">
<link rel="stylesheet" href="url.css">
<link rel="stylesheet" href="url">
・・・
</head>
・・・
<span class="fa fa-bars menu-icon"></span><!--<a>のリンクをアイコンにまとめる-->
<div class="header-right">
<a href="#">書きたいこと</a>
<a href="#">書きたいこと</a>
<a href="#" class="login">ログイン</a>
</div>
・・・
<div class="clear"></div>
・・・
.menu-icon {
color: white;/*色を白にする*/
float: right;/*右側にする*/
font-size: 25px;/*字の大きさ*/
padding: 21px 0;/*上下のpaddingの２１pxの余白*/
display: none;/*要素を非表示*/
}
.clear {
clear: left;/*レイアウトの崩れを修正*/
}
@media all and (max-width: 1000px) {/*画面の幅が1000px以下の時に適応させる タブレット向け*/
.heading h2 {
font-size: 20px;/*フォントの調整*/
}
.lesson {
width :50%;/*lesson要素を画面の５０％にする*/
margin-bottom: 50px;
}
footer {
text-align: center;/*テキストやボタンのようなインライン要素、インラインブロック要素を中央にする*/
}
}
@media all and (max-width: 670px) { /*画面の幅が６７０px以下のときに適応させる スマホ向け*/
.header-right {
display: none;/*クラスheader-rightを非表示にする*/
}
.menu-icon {
display: block;/*要素の配置を縦並びにする*/
}
.top-wrapper .btn {/*2つのクラスを指定*/
width: 100%;/*幅を１００％にする*/
}
.facebook {
margin-bottom: 10px;
}
.top-wrapper {
text-align: left;/*テキストを左寄りにする*/
}
.top-wrapper h1 {
font-size: 24px;/*フォントの調整*/
}
.top-wrapper p {
font-size: 14px;
}
.lesson {
width: 100%;/*幅を100％にする*/
}
.message-wrapper .btn {
width: 100%;/*全体にする*/
}
}
理解できていないこと
・clear: left の意味
Flexbox
flexboxとはレイアウト方法の一つ
.クラス名 {
display: flex;/*横並びにする*/
flex-wrap: wrap; /*折り返す要素の親要素に指定*/
.クラス名 li {
flex: auto;/*親要素に合わせて伸縮させる*/
width: 50%;/*２列にする*/
}
レスポンシブデザインにも対応させることができる
@media (max-width: 1000px) {/*タブレット向け*/
.flex-list {
flex-wrap: wrap;/*子要素のサイズに応じて折り返す*/
}
.flex-list li {
width: 50%;
}
画面が小さくなるため縦並び
@media (max-width: 670px) {
.flex-list {
flex-direction: column;/*子要素を上から下へ並べる*/
}
.flex-list li {
margin: 0 auto;/*ブロック要素を中央にする*/
}
頑張って理解できるようになりたい。