3일간의 학습 범위

모사 코딩

【무료 연습 소재】 당신은 할 수 있습니까? 모사 코딩 팔 시험! | 도쿄 프리랜서 | 참고
htps : //에서. 코 m / 훗 f
(학습 시간: 5시간)

학습 메모

calc 함수

{プロパティ: calc(数式)}CSS 속성 값을 지정할 때 계산하기

기타

전회의 상태라면, font-size나 margin등이 아직 고정인 채로,
조금이라도 크기를 바꾸면 멋지게되어 버렸기 때문에,
문자 크기를 'px'가 아니라 'rem', '%', 'vw' 등을 사용하도록 수정했습니다.
반응형에 대해 어쩐지 이해했기 때문에,
Bootstrap을 배운 후 도전하는 다음 모사 코딩에서,
더 빨리 컴팩트하게 코딩해 나가고 싶다.

PC 화면

스마트폰 화면

코드

html{
color: #333333;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
margin: 0;
}
a {
color: #333333;
text-decoration: none;
}
header {
display: flex;
margin-bottom: 1.5%;
margin-left: auto;
margin-right: auto;
margin-top: 1.5%;
width: 72.5%;
}
header h1 {
font-size: calc(1.6rem + (1vw / 1.25));
margin: 0;
}
header h2 {
font-size: calc(1.6rem + (1vw / 10));
margin: 0;
}
.header_title {
margin-right: 7.5%;
width: 42.5%;
}
.header_menu {
align-items: center;
display: flex;
margin-left: 7.5%;
text-align: center;
width: 42.5%;
}
.header_menu_about {
margin-right: 0.25%;
width: 34.5%;
}
.header_menu_course {
margin-left: 0.25%;
margin-right: 0.25%;
width: 30%;
}
.header_menu_inquiry {
margin-left: 0.25%;
width: 34.5%;
}
.center_title {
background-image: url(../img/main-vsual-nontitle.png);
background-size: cover;
margin-bottom: 7.5%;
margin-top: 1.5%;
padding-bottom: 7.5%;
padding-top: 7.5%;
text-align: center;
width: 100%;
}
.center_title_main {
margin-bottom: 2.5%;
margin-left: auto;
margin-right: auto;
width: 60%;
}
.center_title_main h1 {
font-size: calc(1.6rem + (1vw / 0.5));
margin: 0;
}
.center_title_sub {
margin-left: auto;
margin-right: auto;
margin-top: 2.5%;
width: 30%;
}
.center_title_sub p {
font-size: calc(1rem + (1vw / 2.5));
font-weight: bold;
margin: 0;
}
.center_title_sub p br {
display: none;
}
body > h1 {
font-size: calc(1.6rem + (1vw / 1.25));
margin-bottom: 2.5%;
margin-top: 7.5%;
text-align: center;
}
body p {
margin: 0;
font-size: calc(1rem + (1vw / 5));
}
.about {
display: flex;
margin-bottom: 7.5%;
margin-left: auto;
margin-right: auto;
margin-top: 2.5%;
width: 72.5%;
}
.about_image {
margin-right: 2.5%;
width: 47.5%;
}
.about_text {
margin-left: 2.5%;
width: 47.5%;
}
.about_image img {
width: 100%;
}
.course {
display: flex;
margin-bottom: 7.5%;
margin-left: auto;
margin-right: auto;
margin-top: 2.5%;
width: 72.5%;
}
.course img {
width: 100%;
}
.course_beginner {
margin-right: 2.5%;
width: 30%;
}
.course_intermediate {
margin-left: 2.5%;
margin-right: 2.5%;
width: 30%;
}
.course_advanced {
margin-left: 2.5%;
width: 30%;
}
.inquiry {
margin-bottom: 7.5%;
margin-left: auto;
margin-right: auto;
margin-top: 2.5%;
text-align: center;
width: 72.5%;
}
.inquiry_form {
border-color: #cccccc;
border-radius: 2.5rem;
border-style: solid;
margin-bottom: 1%;
padding: 0;
padding-bottom: 1.75%;
padding-top: 1.75%;
width: 60%;
}
.inquiry_form:focus {
box-shadow: 0px 0px 0px 1px rgba(0,123,255,.25);
outline: 0;
}
.inquiry_button {
background-color: salmon;
border-radius: 0.5rem;
border-style: none;
color: white;
font-size: calc(1.6rem + (1vw / 5));
font-weight: bold;
margin-top: 1%;
padding-bottom: 1.75%;
padding-left: 0;
padding-right: 0;
padding-top: 1.75%;
width: 45%;
}
footer {
border-top-color: #dddddd;
border-top-style: solid;
border-top-width: 0.2rem;
margin-bottom: 2.5%;
margin-left: auto;
margin-right: auto;
margin-top: 7.5%;
padding-top: 1%;
text-align: right;
width: 72.5%;
}
footer p {
color: #555555;
font-size: calc(1rem + (1vw / 20));
}
@media screen and (max-width:479px) {
header {
display: block;
margin-bottom: 5%;
margin-top: 5%;
width: 90%;
}
header h1 {
font-size: calc(2.4rem + (1vw / 1));
font-weight: 900;
}
header h2 {
font-size: calc(1.6rem + (1vw / 2.5));
}
.header_title {
margin: 0;
margin-bottom: 5%;
text-align: center;
width: 100%;
}
.header_menu {
margin: 0;
margin-top: 5%;
width: 100%;
}
.header_menu_about {
margin: 0;
margin-left: 5%;
width: 30%;
}
.header_menu_course {
margin: 0;
width: 30%;
}
.header_menu_inquiry {
margin: 0;
margin-right: 5%;
width: 30%;
}
.center_title {
background-size: cover;
margin-bottom: 25%;
margin-top: 5%;
padding-bottom: 30%;
padding-top: 30%;
}
.center_title_main {
margin-bottom: 5%;
width: 95%;
}
.center_title_main h1 {
font-size: calc(3.2rem + (1vw / 0.5));
}
.center_title_sub {
margin-top: 5%;
width: 95%;
}
.center_title_sub p {
font-size: calc(1.6rem + (1vw / 2.5));
font-weight: normal;
}
.center_title_sub p br {
display: inline;
}
body > h1 {
font-size: calc(1.6rem + (1vw / 0.5));
margin-bottom: 7.5%;
margin-top: 25%;
}
body p {
font-size: calc(1.6rem + (1vw / 2.5));
}
.about {
display: block;
margin-bottom: 25%;
margin-top: 7.5%;
width: 90%;
}
.about_image {
margin: 0;
width: 100%;
}
.about_image img {
width: 100%;
}
.about_text {
margin: 0;
width: 100%;
}
.course {
display: block;
margin-top: 7.5%;
margin-bottom: 25%;
width: 90%;
}
.course img {
width: 100%;
}
.course_beginner {
margin: 0;
margin-bottom: 5%;
width: 100%;
}
.course_intermediate {
margin: 0;
margin-bottom: 5%;
margin-top: 5%;
width: 100%;
}
.course_advanced {
margin: 0;
margin-top: 5%;
width: 100%;
}
.inquiry {
margin-bottom: 25%;
margin-left: auto;
margin-right: auto;
margin-top: 7.5%;
text-align: center;
width: 90%;
}
.inquiry p {
margin-bottom: 2.5%;
}
.inquiry_form {
border-radius: 5rem;
font-size: calc(1.6rem + (1vw / 0.5));
margin-bottom: 5%;
margin-top: 2.5%;
padding-bottom: 5%;
padding-top: 5%;
width: 99%;
}
.inquiry_button {
font-size: calc(1.6rem + (1vw / 0.25));
margin-top: 5%;
padding-bottom: 7.5%;
padding-top: 7.5%;
width: 100%;
}
footer {
margin-bottom: 7.5%;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
padding-top: 7.5%;
text-align: center;
width: 90%;
}
footer p {
color: #333333;
font-size: calc(1.2rem + (1vw / 2.5));
}
}