web制作勉強中です。

職業訓練校でweb制作を勉強しています。勉強のメモなど記録します。

【授業メモ】お盆の宿題の解説/navをfloatしない方法

授業メモ
お盆の宿題の解説
 
１カラムの復習その２
 

f:id:shima0web:20170820114822p:plain

★ポイント★
■まずはレイアウトを見て、構造を理解しよう
■なるべく共通部分を見つけてcssの記述を減らすこと
 
■ロゴ画像はh2でimgタグで直接入れてok　画像だけど文字と同じように text-align: center;で真ん中

f:id:shima0web:20170820114848p:plain

<h2><img src="img/logo.gif"alt="ロゴ画像"></h2>
 
h2 {
  background: #093;
  padding: 20px 0;
  text-align: center;
}
 
■headerのセリフ体は "Times New Roman"がおすすめ

f:id:shima0web:20170820114859p:plain

font-family: "Times New Roman",Times,serif;
macでもWindowsでも表示できるキレイなセリフ体なので覚えておくこと
 
 
 
 
■navをfloatせず並ばせる方法　

f:id:shima0web:20170820114931p:plain

いつもならfloat使って並ばせるけど、 inline-blockを使えばfloatなしでもできる
ブロック要素は縦に並ぼうとする性質があるので、横に並ばせるにはいつもはfloatを使うが、
inline-blockで、ブロック要素に、横に並ぼうとするインライン要素の性質を与えることができ、
横に並ばせることができる。
要素の並び方はinline的で、要素の中身はblock的な性質になるということ！
横に並ぶ性質を与えるだけなので、幅や高さを与えることはもちろん可能。
（インライン要素には通常幅や高さは指定できない。ブロック要素にはできる。）
 
もちろんfloatでもできるけど、色々な方法を知っておくことが大事！
 
https://saruwakakun.com/html-css/basic/display　　　↓下記の図わかりやすいのでチェック↓

f:id:shima0web:20170820114940p:plain

注意！
DW上でliを改行して記述していると微妙な隙間が空いてしまう性質があり、カラム落ちが起こるので、
<li><a href="#">エコロジー</a></li>
<li><a href="#">コンピューター</a></li>
<li><a href="#">モバイル</a></li>
<li><a href="#">ショッピング</a></li>
<li><a href="#">お問い合わせ</a></li>
 
liに  display: inline-block; 　する場合はliは改行せずに続けて書く。
また、この場合はfloatしていないので、ulのoverflow:hidden;はいらない。
<li><a href="#">エコロジー</a></li><li><a href="#">コンピューター</a></li><li><a href="#">モバイル</a></li><li><a href="#">ショッピング</a></li><li><a href="#">お問い合わせ</a></li>
 
li {
  width: 160px;
  height: 50px;
  display: inline-block;
}
 
 
 
 
総合応用問題（パスタのやつ）
Today's　Pastaの部分まで授業でやった。
クーポン、ニュース、ポスター、footerは来週続きをやるので宿題。
 
★ポイント★
  • 構造を紙に書いて整理すること
  • divの入れ子や複数のclass名にびびらないこと
  • コーディング終わったら、コーディング見ながら構想をもう一度確認すること
  • 画像の大きさを確認すれば、大体の幅は計算できる
 
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>パスタとワインの店 atella</title>
<link rel="stylesheet" href="style.css">
</head>
 
<body>
<div id="container">
<header>
<h1>パスタとワインの店 atella</h1>
<nav>
<ul>
<li id="concept"><a href="#">concept</a></li>
<li id="pasta"><a href="#">pasta</a></li>
<li id="drink"><a href="#">drink</a></li>
<li id="side"><a href="#">side</a></li>
<li id="access"><a href="#">access</a></li>
</ul>
</nav>
</header>
 
<div id="content">
<ul>
<li><img src="img/subimage01.jpg" alt="ランチ"></li>
<li><img src="img/subimage02.jpg" alt="パスタ"></li>
<li><img src="img/subimage03.jpg" alt="ワイン"></li>
</ul>
 
<div id="wrapper">
<h2><img src="img/campain.png" alt="現在実施中のキャンペーンやお得な情報"></h2>
 
<div class="box today top">
<div id="txt-box">
<h3><img src="img/todaypastaText.png" alt="Today's Pasta 今日の日替わりパスタ"></h3>
<p>ペンネアラビアータ<br>（ピリ辛トマトソースのペンネ）</p>
</div><!--/#txt-box-->
</div><!--/#box today-->
 
<p class="info coupon top">クーポン</p>
 
<div class="box news">
<h3><img src="img/newsText.png" alt="ニュース"></h3>
<dl>
<dt>2017.8.20</dt>
<dd>トマトソースの作成ビデオを公開しました。</dd>
<dt>2017.7.24</dt>
<dd>今年も恒例の夏の冷製特別コースをお出しします。</dd>
</dl>
</div><!--/#box news-->
 
<p class="info poster">料理動画のポスター</p>
 
</div><!--/#wrapper-->
</div><!--/#content-->
 
<footer>
<p><small>&copy;2017 atella all right reserved.</small></p>
</footer>
</div><!--/#container-->
</body>
</html>
 
 
@charset "utf-8";
/* CSS Document */
 
html,body,h1,h2,h3,p,ul,li,a,dl,dt,dd,small,header,footer,nav,div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
 
ul {
  list-style: none;
}
 
a {
  text-decoration: none;
}
 
img {
  vertical-align: bottom;
  border: none;
}
 
/*リセットここまで
レイアウトここから*/
 
body {
  background: url("img/back.jpg") repeat;
}
 
#container {
  width: 980px;/*header画像の横幅*/
  margin: 0 auto;
  background: #FFF;
}
 
header {
  background: url(img/mainimage.jpg) no-repeat;
  width: 100%;
  height: 560px; /*navをpositionで下に配置するので、高さはheader画像とnavの高さの合計*/
  position: relative; /*navをheaderの下にpositionで配置したいから基準点設置*/
}
 
h1 {
  background: url(img/logo.png) no-repeat 40px top;/* header に対してpositionで配置してもよい*/
  width: 149px;/*ロゴ画像の幅*/
  height: 78px;
  text-indent: 100%; /*隠し文字*/
  white-space: nowrap;
  overflow: hidden;
}
 
header nav {
  width: 980px;/*nav画像の合計はheaderいっぱいだから　高さは画像に合わせる*/
  height: 60px;
  position: absolute; /*positionの下に配置する*/
  left: 0;
  bottom: 0;
}
 
header ul {
  overflow: hidden;
}
 
header li {
  width: 196px;
  height: 60px;
  float: left;
}
 
header li a {  
  display: block;
  text-indent: 100%; /*画像なので隠し文字*/
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  height: 60px;
  background: url(img/menu_concept.png) no-repeat;
}
 
header li#pasta a {
  background: url(img/menu_pasta.png) no-repeat;
}
header li#drink a {
  background: url(img/menu_drink.png) no-repeat;
}
header li#side a {
  background: url(img/menu_side.png) no-repeat;
}
header li#access a {
  background: url(img/menu_access.png) no-repeat;
}
 
 
#content { 
  width:930px;/*画像の大きさから計算　画像と画像の間に60、画像とcontainerの間に30隙間*/
  margin:0 auto;
/*  background:#036;*/
}
 
 
 
 
 
#content ul {
  overflow: hidden;
  width: 930px;
}
#content li {
  margin: 30px;
  float: left;
}
 
#wrapper {
  overflow: hidden;
  margin: 0 auto;
  width: 870px;
　background:#EEE;
}
 
.box {
  width: 560px;/*contentの幅から、クーポン/料理動画画像の幅を引いて計算*/
  height: 140px;
  background: #33CC99;
  margin-right: 40px;
  float: left;
}
 
.info {
  width: 270px;
  height: 140px;
  background: #99CCCC;
  float: left;
}
 
 
.top {
  margin-bottom: 40px;
}
 
 
.today {
  background: url(img/todaypasta.jpg) no-repeat left top;
}
 
#txt-box {
  width: 300px;/* 560-　画像の250＋画像との間に空けたい隙間10　を空けてあげる*/
  margin-left: 260px; /*画像の250＋隙間10ぶんのmarginをとれば、画像の隣に10空いて配置できる*/
　text-align: center;
}
 
#txt-box  h3 {
    padding:  20px 0;
}
 
/*授業でやったのはここまで
以下は宿題*/