2020/06/09〜11 プログラミング(フロントエンド)学習10〜12日目 メモ

3日間の学習範囲

模写コーディング

【無料練習素材】あなたはできる？模写コーディング腕試し！｜東京フリーランス｜note
https://note.com/tokyofreelance/n/n4baf7dd10306
（学習時間：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));
}
}