【ソースコード公開】新卒IT未経験者がWebサイトを作るためにやった２つのこと

*{
text-decoration: none;
}

.headline{
text-align:center;
background-color:#CCCCFF;
font-family: “Nico Moji”;
}

.header-list{
display:flex;
justify-content: space-around;
background:url(https://saruwakakun.com/wp-content/uploads/2017/02/wave-purple.png) top repeat-x;
font-family: “Nico Moji”;

}

.header-listitem{
padding:20px;
text-align:center;
justify-content: space-around;
}

li {
list-style: none;
}


.main p{
text-align:center;
font-size:20px;
}

.example01-answer{
font-size:16px;
text-align:auto;
display:inline-block;
}

.example01-answer li{
margin:20px 40px;
padding:20px;
}

.sentakulist{
display:flex;
}

.sentakuitem{
display: block;
max-width: 25%;
width: 25%;
height: auto;
}

img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}

.example01-image li{
flex-grow:1;
}

.button1{
background-color:#FFCCCC;
}

.button2{
background-color:#FFCC66;
}

.button3{
background-color:#FFFF99;
}

.button4{
background-color:#99FF99;
}

.footer-list{
display:flex;
justify-content: space-around;
margin-top:100px;
padding:20px;
background:url(https://saruwakakun.com/wp-content/uploads/2017/02/wave-purple.png) bottom repeat-x;
font-family: “Nico Moji”;
}

/*test1~4専用*/
.answer img{
width: 20%;
}
.answer-main{
font-size:40px;
background-color:#99CC99;
}

.answer p{
text-align:center;

}

.answer-comment{
display:flex;
}

.share {
display:flex;
justify-content: space-around;
margin-top:50px;
padding:20px;
}


.btn-twitter{
background-color:#66CCCC;
transition:all 1s;
}

.btn-twitter:hover{
background-color:#1e90ff;
}

.btn-line{
background-color:#98fb98;
}

.btn-line:hover{
background-color:#3cb371;
}

.btn-facebook{
background-color:#6699CC;
}

.btn-facebook:hover{
background-color:#6495ed;
}

/*画面幅の調整*/
@media(max-width:670px){
.answer img{
width:40%;
height:auto;
object-fit: contain;
}
}