WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

レスポンシブサイトの制作

Webサイト制作

今回のレスポンシブサイトの制作ポイント

1、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事
2、webアイコン（Google Fonts）（Font Awesome）を使う事
3、３つあるコンテンツ部分のホバーにアニメーションを追加




使用するテキスト

Ristorante Felica


Home
Concept
Menu
Access


Ristorante Felicaは、
食とアートと音楽が交差する空間を創造します。
シェフ・矢島が提供するのは、イタリア料理に「東京」の
エッセンスを取り入れたモダンイタリアン。
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。


Concept
画像
仮テキスト

Menu
画像
仮テキスト

Access
画像
仮テキスト


©️ Ristorante Felica


作例
Cafe de Felica




2月4日作業分
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブサイトの作成</title>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-inner">
<h1>Ristorante 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-visual">
<img src="img/main.jpg" alt="">
</div>

<div class="lead">
<h2>Ristorante Felicaは、
食とアートと音楽が交差する空間を創造します。</h2>
<p>シェフ・矢島が提供するのは、イタリア料理に「東京」のエッセンスを取り入れたモダンイタリアン。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p>
</div>


<div class="wrapper">
<div class="block">
<a href="#">
<h3>Concept</h3>
<p class="block-photo"><img src="img/01.jpg" alt=""></p>
<p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p>
</a>
</div>

<div class="block">
<a href="#">
<h3>Menu</h3>
<p class="block-photo"><img src="img/02.jpg" alt=""></p>
<p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p>
</a>
</div>

<div class="block">
<a href="#">
<h3>Access</h3>
<p class="block-photo"><img src="img/03.jpg" alt=""></p>
<p class="block-txt">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐる</p>
</a>
</div>
</div><!--/.wrapper-->
<footer>
<p><small>&copy; Ristorante Felica</small></p>
</footer>
</body>
</html>


スタイルシート

@charset "utf-8";

/* ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}
 

header{
border-bottom: 4px solid #de7330;
padding-top: 20px;
}
.header-inner{
max-width: 1260px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
h1{
color: #de7330;/*メインカラー*/
font-family: 'Cinzel', serif;
font-size: 40px;
}
.g-nav>ul{
display: flex;
}
.g-nav li{
margin: 0 20px;
}
.g-nav a{
display: block;
padding: 20px;
text-align: center;
color: #de7330;
font-weight: bold;
font-size: 18px;
font-family: 'Cinzel', serif;
}
.g-nav a:hover{
text-decoration: underline;
}

/*メインビジュアル部分*/
.main-visual{
max-width: 1260px;
margin: 40px auto 60px;
}
.main-visual>img{
max-width: 100%;/*フルードイメージの設定*/
}

/*リード文部分*/
h2{
text-align: center;
}
.lead>p{
max-width: 800px;
margin: 20px auto 80px;
}

/*block部分*/
.wrapper{
max-width: 1260px;
margin: 0 auto 80px;
display: flex;
justify-content: space-around;
padding: 20px 0;
}
.block{
width:30%;
padding: 20px;
box-sizing: border-box;
transition: 0.2s;
}
.block:hover{
box-shadow: 0 0 15px #aaa;
}
.block h3{
color: #de7330;
font-family: 'Cinzel', serif;
font-size: 30px;
margin-bottom: 10px;
}
.block-photo{
overflow: hidden;
margin-bottom: 10px;
}
.block-photo>img{
max-width: 100%;
transition: 0.5s;
}
.block:hover img{
transform: scale(1.2);
}
.block-txt{
color: #222;
}


footer{
width: 100%;
height: 100px;
background: #de7330;
color: #FFF;
}
footer>p{
text-align: center;
padding-top: 20px;
}