[勉強の内容]

メディアクエリーの実践

(1)メニューボタンx軸揃え/y軸揃え

メニューボタンのリストが3つあります.

<ul class="media-menu">
	<li><a href="#">menu 1</a></li>
	<li><a href="#">menu 2</a></li>
	<li><a href="#">menu 3</a></li>
</ul>

メインpcブラウザで水平位置合わせ(x軸位置合わせ)
.media-menu{
list-style: none;
margin: 0;
padding: 0; デフォルト設定!
display: flex;
justify-content: space-between;
align-items: center;x軸を揃えるためにflexコードを渡し、両側を揃える.y軸を基準に中央揃えを行うためにalign-items値もcenterに設定します.
width: 700px;
background-color: black;
}
.media-menu a{
color: black;
text-decoration: none;
}
.media-menu li{
width: 150px;
background-color: yellow;
border: solid 5px red;
padding: 5px 15px;
text-align: center;
}

ブラウザを小さくする垂直位置合わせ(Y軸位置合わせ)
@media (min-width: 320px) and (max-width: 767px) {
.media-menu{
flex-direction: column;
width: 190px;
align-items: flex-start;
}width値をメニューサイズと同じ190 pxに設定し、y軸を中心に揃え、左揃えにflex-start値を指定します.
.media-menu li{
margin-bottom: 10px;
}
.media-menu li:last-child {
margin-bottom: 0;
}メニュー間に10 pxのスペースを残します.最後のメニューは利益値が設定されていません.
}

(2)HALBAKショッピングセンター実習-トップエリア固定/非固定

htmlコードを使用して、上部メニュー部分を設定します.

<header class="intro">
	<h1></h1>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
</header>

<main role="main">
	<h1>hello world? hello world? hello world? hello world? hello world? hello world? hello world? hello world? hello world? hello world? hello world? hello world? </h1>
</main>

パソコン画面の上端メニューを設定します.メニューのwidthは一定の割合で占めるように指定し、下にスクロールしても上部メニューは画面に固定します.
.intro{
display: flex;
position: fixed;flexをx軸に整列させ、fixedを指定してpc画面をスクロールするときに常に上部メニューを表示します.
width: 100%;
height: 80px;
background-color: #ffffff;
}
.intro h1{
width: 50%;
height: 80px;
background-color: black;
}高さの値は高さの値を同じに設定して、ブラウザのサイズを小さくしても変わらないようにします.幅は50%に設定して、縮小時に常に同じ割合を保つようにします.
.intro nav {
width: 50%;
height: 80px;
background-color: yellow;
}残りの50%にするには、幅を50%に設定します.
.intro nav ul{
list-style: none;
padding: 0;
margin: 0;
}
.intro nav ul li{
width: 33.3333%;
height: 80px;
}3等分するためには、正確に分けることができないので、誤差を最小限に抑えるしかありません.
.intro nav ul{
display: flex;
}liラベルはデフォルトでy軸揃えであるため、flexをx軸に揃えるように設定します.
.intro nav ul li:nth-child(1) {
background-color: aliceblue;
}
.intro nav ul li:nth-child(2) {
background-color: skyblue;
}
.intro nav ul li:nth-child(3) {
background-color: darkblue;
}各領域に背景色を指定する
main {
width: 100%;
height: 2000px;
background-color: gold;
padding-top: 80px;
}現在のheadラベルはfixedを使用しているため、3 Dでmainラベルは2 Dです.兄弟関係ではまずタグの影響を受けるため、mainはheadの後ろにあり、mainで記述するコンテンツはheadによって隠されるため、headと同じ高さ値80 pxを指定します.

移動画面では、上端メニューを2行に表示して下にスクロールすると、上端領域が上にスクロールして見えなくなります.
@media(min-width: 320px) and (max-width: 767px){
.intro{
position: static;スクロール時についてくるように、デフォルトの設定値に従うように静的な位置を与えます.このとき、以前に設定したpadding 80 pxは空白として表示されるので、padding値を底から除去する必要があります.
flex-direction: column;
height: 160px;
}2行に表示するには、列を揃え、その高さを元の高さの2倍160 pxに設定します.
.intro h1{
width: 100%;
}
.intro nav{
width: 100%;
}
main{
padding-top: 0;
}静的位置に変更すると、以前に設定したpadding 80 pxが空白として表示されるため、padding値を下部から除去する必要があります.
}

(3)Bootstrap練習-画像ボタンの大きさに応じて位置合わせを変更する

イメージボタンのスケルトンhtmlコード

を入力

<div class="container">
	<div class="column">
		<img src="https://via.placeholder.com/250X150">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
</div>

上のコードをコピーし、最初のdiv(container)に6つのdiv(column)を貼り付けます.

メインpcブラウザで3*2で並べます
.container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
-flexを使用してx軸を整列します.
-containerのオブジェクトのwidth値が親オブジェクトより大きい場合は、親オブジェクトを囲むようにwrapに設定します.すなわち、改行文字にします.
-スペース-
width: 1140px;
margin: 0 auto;
background-color: pink;
}余白は上下に限らず、左右はautoに設定し、両辺の幅を等しくします.
.column{
width: 355px;
background-color: #ffffff;
border: solid 2px red;
margin-bottom: 10px;
}
.column:nth-child(4),.column:nth-child(5),.column:nth-child(6){
margin-bottom: 0;
}2行目のオブジェクトの下部にマージン値がないことを確認します.
.column img{
width: 100%;
vertical-align: middle;
}画像領域と下のh 2タグとの間の微小空間を除去するために、垂直位置合わせ値を与える.
.image-info{
padding: 20px 0;
text-align: center;
}
.image-info h2{
margin: 0;
}

の中程度のメディアクエリーを追加し、2*3で並べます.
@media(min-width: 540px) and (max-width: 720px){
.container{
width: 720px;
}ブラウザサイズは720 pxから始まり、領域サイズも720 pxと指定され、サイズを超えた3番目のオブジェクトも改行され、2 x 3配列で並べ替えられます
.column:nth-child(4){
margin-bottom: 10px;
}
}ソート後、既存の設定では4番目の子がmargine-bottomを0に設定しているため、2行目はmargine-bottomを10 pxに設定します.

移動サイズのメディアクエリーを追加し、1*6で並べます.
@media (min-width: 320px) and (max-width: 539px){
.container{
box-sizing: border-box;
width: 100%;
padding: 0 20px;
}
.column{
width: 100%;
}containerクラスとcolumnクラスの幅値を100%に指定し、ブラウザが540 px未満の場合に幅をブラウザサイズに設定します.
.column:nth-child(4), .column:nth-child(5){
margin-bottom: 10px;
}中程度のサイズを設定する場合と同様に、エッジ-ボトム(Edge-Bottom)の値を0に設定した5番目のサブオブジェクトに10 pxの値を設定します.
}

メディアクエリを適用する3つの方法

以前に適用された方法のように、同じファイル内に@mediaを適用します.

携帯電話cssファイルを新規作成します.この場合、htmlのheadに新しいcssファイルのリンクを掛ける必要があります.コードが長くなる場合に役立ちます.

headにメディア属性を持つスタイルラベルを設定し、最初の方法のように内部適用のサイズとスタイル値を設定します.

	<style media="(min-width:300px) and (max-width: 700px)">
		body{
			background: red;
		}
	</style>

その中でも1つ目と2つ目の方法しか覚えていないでしょう.

[困難な点]

画像とテキストの間の微細な空間がまだ存在する点は、デフォルト設定値の理解に欠けていると思います.
さらに,今日の3回目の実験ではdivラベルにdivを作成し,複数の画像ボタンを入れる必要があるが,親divラベルである6つのコンテナ自体を作成し,実験ではエラーを適用してきた.

[解決策]

丁寧にしないと、ずっと忘れてしまうかもしれません.練習は答えです.
divが混同しているのは、ある英億に対して、すべてのサブラベルを含む親ラベルに常に注意し、直面しなければならないことだ.

[勉強の感想]

今日は授業時間が短いですが、実習をたくさんしたので、いろいろなことをしました.なぜ各コードがこの部分にあるのか、次回の復習で混同される可能性があるので、今日の開発ログのように丁寧に説明します.