7月12日

学習の内容
進行状況と学習内容を作成し、ソースファイルを実行した結果を添付します.




https://helbak.com/
https://startbootstrap.com/previews/agency
http://via.placeholder.com/250x150
https://flexbox.help/
今日実習する目標の画像、目標サイトと参考サイトを整理しました.
HelbackとBoot Streetサイトのデザインとcss部分を実習しました.
メディアクエリを適用する3つの方法
1.pcも移動もcssファイルで作成されます.(推奨は2000ヤード未満)
2.pcバージョンと移動バージョンcssファイルを分離します.(推奨は2000ヤードより大きい)
3.styleラベルを使用して管理します.(推奨されていない入力者が先に理解することをお勧めします)
スタイルラベルの例)

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

menu 1

menu 2

menu 3

<!-- 3차원 -->

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

<!-- 2차원 -->

<!-- <main role="main">
	<h1>Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
	Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World</h1>
	


</main>

Title

<div class="container">

Title

Title

Title

Title

Title

-->
.media-menu {
list-style: none;
margin: 0;
padding: 0;

display: flex;
justify-content: space-between;
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;
}
@media (min-width: 320px) and (max-width: 767px) {
.media-menu {
flex-direction: column;
align-items: flex-start;
width: 190px;
}
.media-menu li {
margin-bottom: 10px;
}
.media-menu li:last-child {
margin-bottom: 0;
}
}
/pc/
/*.intro {
display: flex;
position: fixed;

width: 100%;
height: 80px;
background-color: #ffffff;

}
.intro h1 {
width: 50%;
height: 80px;
background-color: black;
}
.intro nav {
width: 50%;
height: 80px;
background-color: yellow;
}
.intro nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.intro nav ul li {
width: 33.3333;
height: 80px;
}
.intro nav ul {
display: flex;
}
.intro nav ul li:nth-child(1) {
background-color: blue;
}
.intro nav ul li:nth-child(2) {
background-color: gray;
}
.intro nav ul li:nth-child(3) {
background-color: green;
}
main {
width: 100%;
height: 2000px;
background-color: gold;

padding-top: 80px;

}
@media (min-width: 320px) and (max-width: 767px) {
.intro {
position: static;

	flex-direction:  column;
	height: 160px;
}
.intro h1 {
	width: 100%;
}
.intro nav {
	width: 100%;
}
main {
	padding-top: 0;
}

}*/
/*.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;

width: 1140px;
margin: 0 auto;
background-color: pink;

}
.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;
}
.column img {
width: 100%;
vertical-align: middle;
}
.image-info {
padding: 20px 0;
text-align: center;
}
.image-info h2 {
margin: 0;
}
@media (min-width: 540px) and (max-width: 720px) {
.container {
width: 720px;
}
.column:nth-child(4),
{
margin-bottom: 0;
}
}
@media (min-width: 320px) and (max-width: 539px) {
.container {
width: 100%;

	padding: 0 20px;
}
.column {
	width: 100%;
}

.column:nth-child(4),
.column:nth-child(5) {
	margin-bottom: 10px;
}

}
*/
学習中の難点や未解決の問題
flex-wrap: wrap;適用されません.
改行するはずなのに1列に並ぶ
ソリューションの作成

Title

コピーコードで合計6つのコードを作成する場合は、divラベルに6つのコードを入れるべきで、各コードは独立しています.
divラベルの作成は適用されません.
学習の心得.
先に授業についていくのは悪くない.