講師：湊 有加里 先生
1限目
実技 スマートフォンサイト作成実習
コーディングに向けて
2限目
実技 スマートフォンサイト作成実習
課題制作
3限目
実技 スマートフォンサイト作成実習
課題制作
4限目
実技 スマートフォンサイト作成実習
課題制作
5限目
実技 スマートフォンサイト作成実習
課題制作
今日はマルチデバイス対応のおさらい。引き続き、LPのコーディング作業。
感想・質問
- 感想
LPのコーディングは難関の画像と文章の互い違いセクションが終わった。CSSばかりに気を取られて、HTMLのタイプミスに気が付くまでに時間がかかった。display flexで横並びになったblockの位置合わせがいつも苦労する。慣れが必要か？最後に湊先生に設定していないのに:hoverにopacity: 0.6;がかかってしまうことを質問。reset cssの中に:hover {opacity: 0.6;}が設定されていることを教えていただく。 - 質問
画像のwidthに％を使っていたが、ブラウザの表示エリアを小さくすると、画像が大きくなってしまう。max-width pxで画像が大きくなることは防げたが、max-width pxとwidth %の使い分けが良くわからない。
@charset "utf-8";
/*高級ワインの新規会員登録キャンペーンのLPのcss*/
body {
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
background-color: #222222;
color:#A2A2A2;
}
header {
}
header h1 {
font-size: 1.6rem; /*font-size:28px;*/
font-family: "源ノ角ゴシック Regular","源ノ角ゴシック","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: lighter;
margin: 0 auto;
padding: 0.5% 0 0.5% 13%; /*padding: 3px 0px 3px 15%;*/
background-color: #290B2B;
color:#9F7623;
text-shadow: 3px 3px 6px #070707,3px 3px 6px #070707,3px 3px 6px #070707;
letter-spacing: 0.1em;
}
img.kv_pc{
max-width: 844px; /*width: 800px;*/
height: 500px;
object-fit: cover;
object-position: top;
}
p.rightyose{
text-align: right;
}
.deai{
font-weight: bold;
font-size: 2.6rem; /*font-size: 35px;*/
/*color:#A2A2A2;*/
margin: -180px auto 100px 22%;
text-shadow:0px 0px 30px #FC8F00;
letter-spacing: 0.6em;
}
h2.camp_title{
/*font-family: "游明朝";*/
font-size: 2.5rem;
color:#807219;
font-weight:normal;
background-color: #290B2B;
text-align: center;
letter-spacing: 0.2em;
line-height: 1.8em;
text-shadow: 3px 3px 6px #070707;
display: block;
}
/*ここからはメニューボタンの設定になります。*/
nav {
max-width:960px;
margin: 30px auto 20px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
width: 25%;
}
nav ul li a {
display: block;
margin: 0 2% 0 2%;
padding: 5px 0;
font-size: 1.35rem;
font-weight:500;
text-align: center;
background-color: #3B3424;
border-radius: 10px;
color: #828282;
font-family: "源ノ角ゴシック Regular","源ノ角ゴシック","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-shadow: 5px 5px 6px rgba(0,0,0,0.5);
box-shadow: 5px 5px 6px rgba(0,0,0,0.5);
}
nav ul li a:hover{
color: #000000;
background-color: #A65CAF;
}
/*ここからはSection1の設定になります。*/
main {
max-width: 960px;
margin: 0 auto;
padding: 0px 0;
color: #D3D2D2;
}
main section.section1,.section2,.section3{
padding: 5% 5% 2.6% 5%;
display: flex;
position: relative;
margin-bottom: 55px;
}
.section2{
flex-direction: row-reverse;
}
.secimg1,.secimg2,.secimg3 {
max-width: 330px;
height: 100%;
margin-left: 3%;
display: inline-flex;
vertical-align:middle;
opacity: 0.6;
box-shadow: 5px 5px 6px rgba(0,0,0,0.5);
}
.secimg2 {
/*max-width: 333px;
height: 100%;*/
margin-right:2%;
}
/*ギリシャ数字の飾りの設定になります。*/
.secimg1::after {
content: "Ⅰ";
padding: 20% 0 0 17%;
color: #222222;
text-shadow:0px 0px 3px #444444,0px 0px 3px #444444;
font-size: 34px;
}
.secimg2::before {
content: "Ⅱ";
margin-left: -30%;
padding: 20% 20% 0 0;
color: #222222;
text-shadow:0px 0px 3px #444444,0px 0px 3px #444444;
font-size: 34px;
}
.secimg3::after {
content: "Ⅲ";
padding: 20% 0 0 17%;
color: #222222;
text-shadow:0px 0px 3px #444444,0px 0px 3px #444444;
font-size: 34px;
}
.text1,.text2,.text3 {
width:42%;
display: block;
font-size: 1.15rem;
letter-spacing: 0.2em;
font-weight:200;
margin: 0 0 0 auto;
}
.text2{
margin: 0 auto 0 0%;
width: 44%;
padding-left: 3%;
}
section::before {
background: transparent;
padding: 0px;
margin : 0px 0px auto auto;
width: 60px;
height: 30px;
content: "";
background-image: linear-gradient(to left, #4f4913 3px, #9f833f 8px, #4f4913 12px),
linear-gradient(to bottom, #4f4913 3px, #9f833f 8px, #4f4913 12px);
background-size: 20px 1px, 1.5px 20px;
background-position:right top,right top;
background-repeat: repeat-x ,repeat-y;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
section::after {
background: transparent;
padding: 0px;
margin : auto auto 0 0;
width: 60px;
height: 30px;
content: "";
background-image: linear-gradient(to right, #4f4913 3px, #9f833f 8px, #4f4913 12px),
linear-gradient(to top, #4f4913 3px, #9f833f 8px, #4f4913 12px);
background-size: 20px 1.5px, 1px 20px;
background-position:left bottom,left bottom;
background-repeat: repeat-x ,repeat-y;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
/*secton1の３０％ＯＦＦの色とフォントサイズを設定しています。*/
.text1 ul li{
font-size: 0.88rem;
padding-left:0%;
margin-left:5%;
letter-spacing: 0.1em;
line-height: 2.3em;
}
.text1 ul li span.bigred{
color: #FE6C6C;
font-size: 2.1rem;
line-height: 0em;
letter-spacing: -0.03em;
padding: 0;
}
.text1 ul li span.red{
color: #FE6C6C;
font-size: 1.1rem;
letter-spacing: 0em;
}
.text1 ul li span.big{
font-size: 1.5rem;
letter-spacing: -0.05em;
}
/*main h2 {
padding: 10px 0;
}
main p {
}*/
/*新規会員登録ボタンの設定します。*/
.regist {
width:100%;
margin-top: 10%;
}
.regist ul {
display: flex;
list-style: none;
width: 59%;
margin: 40px auto;
justify-content: space-between;
}
.regist ul li {
width: 32%;
}
.regist ul li a {
display: block;
margin: 0 2% 0 2%;
padding: 12px 0;
font-size: 1.5rem;
text-align: center;
background-color: #7C7054;
border-radius: 10px;
color: #000000;
font-weight:bold;
line-height: 1em;
box-shadow: 5px 5px 6px rgba(0,0,0,0.5);
}
.regist ul li a:hover {
color: #C0C0C0;
background-color: #703777;
/*opacity: 1;*/
}
/*ここまで完成。*/
footer {
padding: 10px 0;
text-align: center;
}
footer small {
font-size: 14px;
}
