１、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事
２、ロゴ画像をSVG形式で作成し、h1の背景画像で表示。この際、h1のテキストはcssで隠すように。
３、webアイコン（Font Awesome）を使う事
４、適切な余白の設定
５、各画像を指定されたサイズにトリミング。画像は自身でフリー素材をダウンロードすること。
６、ナビゲーションボタンにホバーの設定
７、ナビゲーションボタンの幅は必ず%指定にすること
８、正しい文章構造でhtmlを作成
９、３つあるコンテンツ部分にホバーの設定
10、見本通りのレイアウトに作成すること
サーバーにデータをアップロードしURLを時間内に提出する事
使用するテキスト
Cafe de Felica Home Concept Menu Access Cafe de Felicaは、 食とアートと音楽が交差する空間を創造します。 シェフ・矢島が提供するのは、スペイン料理に「東京」の エッセンスを取り入れたモダンスパニッシュ。 店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。 心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。 Concept テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト Menu テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト Access テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CAFE DE FELICA</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> </head> <body> <header> <div class="header-inner"> <h1>CAFE DE FELICA</h1> <nav class="g-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Concept</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Access</a></li> </ul> </nav> </div> </header> <div class="main"> <div class="key-visual"> <img src="img/main.jpg" alt=""> </div> <h2>Cafe de Felicaは、 食とアートと音楽が交差する空間を創造します。</h2> <p class="main-txt">シェフ・矢島が提供するのは、スペイン料理に「東京」の エッセンスを取り入れたモダンスパニッシュ。<br> 店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br> 心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p> <div class="wrapper"> <div class="box"> <a href="#"> <h3>Concept</h3> <p class="content-photo"> <img src="img/content01.jpg" alt=""> </p> <p class="content-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </div> <div class="box"> <a href="#"> <h3>Menu</h3> <p class="content-photo"> <img src="img/content02.jpg" alt=""> </p> <p class="content-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </div> <div class="box"> <a href="#"> <h3>Access</h3> <p class="content-photo"> <img src="img/content03.jpg" alt=""> </p> <p class="content-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </div> </div><!--/.wrapper--> </div><!--/.main--> <footer> <ul class="sns"> <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i> </a></li> </ul> <p><small>© CAFE DE FELICA</small></p> </footer> </body> </html>
@charset "utf-8";
html,body,h1,h2,h3,p,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
img{
vertical-align: bottom;
max-width: 100%;/*フルードイメージ化*/
}
/*PCレイアウト*/
header{
width: 100%;
height: 100px;
border-bottom: 4px solid #841717;
box-sizing: border-box;
margin-bottom: 40px;
}
.header-inner{
max-width: 960px;
height: 100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
h1{
width: 280px;
height: 50px;
background: url(../img/logo.svg)no-repeat center center/contain;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.g-nav{
width: 480px;
height: 50px;
}
.g-nav>ul{
display: flex;
justify-content:center;
}
.g-nav li{
margin: 0 10px;
}
.g-nav a{
display: block;
line-height: 50px;
padding: 0 20px;
}
.g-nav a:hover{
text-decoration: underline;
}
.main{
max-width: 960px;
margin: 0 auto 40px;
}
.key-visual{
margin-bottom: 60px;
}
.main>h2{
margin-bottom: 20px;
text-align: center;
}
.main-txt{
text-align: center;
line-height: 2.5;
margin-bottom: 60px;
}
.wrapper{
display: flex;
justify-content: space-between;
}
.box{
width: 300px;
}
.box>a{
display: block;
padding: 20px;
box-sizing: border-box;
transition: 0.2s;
}
.box>a:hover{
box-shadow: 0 0 20px #CCC;
}
.box h3{
margin-bottom: 10px;
border-left: 10px solid #b22222;
padding-left: 10px;
}
.content-photo{
margin-bottom: 10px;
}
footer{
width: 100%;
height: 100px;
padding-top: 20px;
box-sizing: border-box;
background-color:darkred;
}
.sns{
max-width: 960px;
margin: 0 auto;
display: flex;
}
.sns>li>a>i{
font-size: 44px;
color:beige;
margin-right: 20px;
}
footer>p{
text-align: center;
color: #FFF;
}
/*959px以下の時*/
@media(max-width:959px){
h1,.sns{
margin-left: 20px;
}
}
/*767pxの時(スマホ大)*/
@media(max-width:767px){
header{
height: auto;
}
.header-inner{
max-width: 960px;
height:auto;
display:block;
}
h1{
width: 280px;
height: 30px;
margin: 10px auto 0;
}
.g-nav{
width: 100%;
}
}
/*500px以下の時*/
@media(max-width:500px){
header{
margin-bottom: 20px;
}
h1{
margin-bottom: 10px;
}
.g-nav>ul{
display: flex;
justify-content:center;
}
.g-nav li{
width: 25%;
margin: 0;
}
.g-nav a{
display: block;
line-height: 50px;
padding: 0;
text-align: center;
font-size: 14px;
border-top:2px solid #841717;
}
.g-nav li:nth-child(-n+3)>a{
border-right:2px solid #841717;
}
.key-visual{
margin-bottom: 20px;
}
.main>h2{
margin-bottom: 20px;
text-align: center;
padding: 0 10px;
}
.main-txt{
text-align: center;
line-height: 1.5;
margin-bottom: 30px;
padding: 0 10px;
}
.wrapper{
display:block;
}
.box{
/*margin: 0 auto;*/
width:100%;
}
}
コメント