webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

floatを使ったレイアウト演習

f:id:yachin29:20180320102754j:plain


使用するテキスト

Cafe de Felica


Home
Concept
Menu
Access


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


Concept
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Menu
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Access
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


使用画像
http://yachin29.com/school/cafe_de_felica.zip



作例
Cafe de Felica



<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>幅100%を使った2カラムの演習</title>
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}
header {
  width:100%;
  height:90px;
  padding-top:20px;
  box-sizing:border-box;
  border-bottom:4px solid #933;
}
.inner {
  width:960px;
  margin: 0 auto;
  overflow:hidden;
}
h1 {
  width:200px;
  float:left;
}
nav {
  width:640px;
  height:50px;
  float:right;
}
ul {
  overflow:hidden;
}
li {
  width:160px;
  height:50px;
  float:left;
}
li a {
  display:block;
  line-height:50px;
  text-align:center;
}
li a:hover {
  text-decoration:underline;
}
.main_txt {
  text-align:center;
  font-size:18px;
  line-height:1.8;
  margin: 40px 0;
}
.box {
  width:300px;
  float:left;
  margin-right:24px;
}
.box:last-child {
  margin-right:0;
}
.wrapper {
  overflow:hidden;
}
.box h2 {
  border-left:10px solid #FF9966;
  padding-left:20px;
}
.box img {
  border-radius:50%;/*角丸にする50%で正方形を正円*/
}
.box .photo {
  margin-bottom:20px;
}
.box .txt {
  margin-bottom:40px;
  line-height:1.5;
}
footer {
  width:100%;
  height:100px;
  background:#FF9966;
}
footer p {
  text-align:center;
  line-height:100px;
  font-size:18px;
}
</style>
</head>
<body>
<header>
<div class="inner">
<h1><img src="img/logo.svg" alt="cafe de felicaのロゴ"></h1>
<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="inner">
<img src="img/main.jpg" alt="">
<div class="main_txt">
<p>
Cafe de Felicaは、<br>
食とアートと音楽が交差する空間を創造します。<br>
シェフ・矢島が提供するのは、スペイン料理に「東京」の
エッセンスを取り入れたモダンスパニッシュ。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。
</p>
</div><!--/.main_txt-->
<div class="wrapper">
<div class="box">
<h2>Concept</h2>
<p class="photo"><img src="img/box1.png" alt=""></p>
<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="box">
<h2>Menu</h2>
<p class="photo"><img class="two" src="img/box2.jpg" alt=""></p>
<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="box">
<h2>Access</h2>
<p class="photo"><img src="img/box3.jpg" alt=""></p>
<p class="txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div><!--/.wrapper-->
</div><!--/.inner-->
<footer>
<p><small>&copy;2017 cafe de felica</small></p>
</footer>
</body>
</html>