2017-01-14

ハンバーガーメニューの実装

jQuery

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スクロールすると固定になるナビ</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="nav2.js"></script>
</head>

<body>
<div id="container">
<header>
<a href="#"><h1>Bloomingville</h1></a>
<nav>
<p id="btn"><span id="hum"></span></p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Design philosophy</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header><!--/header-->
<div id="content"></div>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


#container {
    background:#f0ede7;
}
header {
  width:100%;
  padding-top: 30px;
  background:#e4dfd6;
}
header > a {
  display: block;
  width: 500px;
  margin: 0 auto;
}
h1 {
  background: url(../img/logo.svg) no-repeat center center/contain;
  height: 100px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 30px;
  display: block;
}
nav {
  width:100%;
  height: 50px;
  background:#f0ede7;
	transition:0.1s;
}
nav ul {
  width:70%;
  margin:0 auto;
  overflow: hidden;
}
nav li {
  float:left;
  width:calc(100% / 6);
}
nav li a {
  display: block;
  padding-top:20px;
  padding-bottom:16px;
  font-size: 14px;
  text-align:center;
  color:#222;
}
nav li a:hover {
  border-bottom: 4px solid #96F;
  padding-bottom:12px;
}


#content {
height: 2000px;
background: #D9C0BC;
}

/*ナビゲーションのスクロール*/

header.fixed > #nav {
  position:fixed;
  left:0;
  top:0;
}

header.fixed h1 {
  background:url(../img/logo-small.svg) no-repeat center center/contain;
  width: 140px;
  height: 50px;
  position: fixed;
  left: 20px;
  top: 0;
  z-index: 100;
}





@media screen and (max-width:767px){



header {
  width:100%;
  height: 40px;
  background:#e4dfd6;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 10px 10px 0;
}
header > a {
  display: block;
  width: 200px;
  float: right;
}
h1 {
  background:url(../img/logo-small.svg) no-repeat center center/contain;
  height: 40px;
  margin-bottom: 0;

}
nav {
  background:#e4dfd6;
}
#btn {
width: 40px;
height: 40px;
border: 1px solid #000;
border-radius: 4px;
position: relative;
margin-left: 20px;
}
#hum {
  display: block;
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:before {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:-20px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:after {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: -20px;
  left: 0;
  margin: auto;
  transition: 0.2s;
}

#hum.click {
  background: transparent;
}
#hum.click:before {
  top:0;
  transform: rotate(45deg);
}
#hum.click:after {
  bottom: 0;
  transform: rotate(135deg);
}

nav ul {
  width:100%;
  position: fixed;
  top: 60px;
  padding-left: 10px;
  background:#f0ede7;
  display: none;
}
nav li {
  float:none;
  width:100%;
  line-height: 30px;
}
nav li a {
  text-align:left;
}
nav li a:hover {
  border-bottom: none;
  padding-bottom:0;
}

header.fixed h1 {
display: none;
}
}

// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				$(window).scroll(function() {
					if ($(window).scrollTop() > 10) {
						$('header').addClass('fixed').slideDown(900);
					} else {
						$('header').removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
	$('#hum').not(':animated').toggleClass('click');
	$('nav ul').not(':animated').slideToggle(200);
	});
});

修正後のjQuery

// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				var $header = $('header');
				$(window).scroll(function() {
					if ($(window).scrollTop() > 160) {
						$header.addClass('fixed');
					} else {
						$header.removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
if($(window).innerWidth() <= 767){
  $('#hum').not(':animated').toggleClass('click');
  $('nav ul').not(':animated').slideToggle(200);
  };
});
$(window).resize(function(){
  $('nav ul').hide();//スマホの時
if($(window).innerWidth() > 768){ 
 $('nav ul').show();//タブレット以上の時
 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため
 } 
});
});

liskul.com

2017-01-13

PHP フォームの復習

PHP

以下のような入力フォームと確認画面を作りなさい。

・お名前は必須項目
・興味がある科目は複数選択可
・生まれ年は1945年～2000年までの設定

入力画面
f:id:yachin29:20170113135207p:plain

確認画面
f:id:yachin29:20170113135445p:plain

2017-01-06

PHPでの配列

PHP

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。
通常、変数は１つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。

一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事の多いPHPではこの配列の使い方が非常に重要になってきます。

arrayを使った配列

<?php
$color = array('red', 'blue', 'green');
echo $color[0];
?>

arrayを使わないやり方

<?php
$color[0] = 'red';
$color[1] = 'blue';
$color[2] = 'green';
echo $color[1];
?>

配列に入っている値をすべて表示させる

配列に入っている値をすべて表示させたい場合、1つ1つ「echo文」で表示させる事は可能ですが、プログラム的には正しくありません。
配列の値を「あるだけすべて表示させたい」場合、便利なのが「foreach文」です。
foreach文は、配列の要素がある分だけ繰り返し処理するという内容の文です。

<?php
$color = array('red', 'blue', 'green');
foreach($color as $value){
echo $value . '<br>';
}
?>

count関数

count関数を使っても、同じ事が出来ます。count関数を使うと、配列に入っている値の数が$countに代入されます。

<?php
$color = array('red', 'blue', 'green');
$count = count($color);

for ($i = 0; $i < $count; $i++) {
  echo "$color[$i]<br>";
}
?>

連想配列

配列には、変数の箱の中身に 0,1,2……と背番号のように番号を振り、その番号を指定することでデータを指定するという性質がありましたが、連想配列では、番号のかわりに名前をつけて管理することができます。
簡単に言うと配列は背番号（ID）でしか管理出来ないのに比べて、連想配列は好きに名前を付けて管理出来る利点があります。

配列変数名 = array( キー=>値1, キー=>値2, キー=>値3・・・);

<?php
$color = array('red' => '真っ赤', 'blue' => '真っ青', 'green' => '新緑');
echo $color['blue'];
?>

<?php

  $present = array ( '長崎' => 'チャンポン', '名古屋' => '手羽先', '沖縄' => '泡盛' );

  // キーを指定して、値を取得します
  echo $present['長崎'];
  echo '<br>';
  
  // キーを指定して、値を取得します
  echo $present['名古屋'];
  echo '<br>';
  
  // キーを指定して、値を取得します
  echo $present['沖縄'];
  echo '<br>';

連想配列を使う事でフォームのチェックボックスのように複数の解答があるような場合にも対応が出来ます。

<form action="sample.php" method="post">
    <p>好きな色（複数回答可）: 
        <input type="checkbox" name="color[]" value="black">黒
        <input type="checkbox" name="color[]" value="red">赤
        <input type="checkbox" name="color[]" value="blue">青
        <input type="checkbox" name="color[]" value="green">緑
    </p>
    <p><input type="submit" value="送信"></p>
</form>

データを受け取る側のPHP

<?php
echo '<p>好きな色: ';
foreach( $_POST['color'] as $value ){
    echo "{$value}, ";
}
echo '</p>';
?>

2017-01-06

GETとPOSTの違いと使い分け

PHP

PHPでは情報を別のデータに受け渡すときにGETとPOSTの２つの方法（メソッド）が使われます。

GET

GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。
そのせいで、URLにデータが表示されてしまい、誰からでも見ることができます。なので、フォームやECサイトなどの個人情報を扱うデータ送信には向いていません。
また送ることのできるデータ量が制限されています。テキストデータのみ送信可能です。
Internet ExplorerではURLに使用できる文字数が2,083文字と決まっており、パスに使用できる最大文字数は2,048文字となっています。
GETメソッドはデータをURLの末尾につけて送るので、制限されることになります。
URLなどを送信したい場合はGETを使いましょう。

POST

POSTメソッドで送るデータはWebブラウザ上には現れないので、秘匿性の高いデータやデータベースなど重要度の高いデータは必ずPOSTメソッドを使いましょう。
また、送ることの出来るデータ量も特に明確な制限があるわけでは無いので、大量のデータを送る際も必ず、POSTメソッドを使いましょう。

なので、基本的にはデータ送信の際のメソッドはPOSTと覚えておきましょう。

POSTの使い方

データを送信する方の設定

<form action="output.php" method="post">

データを受け取る側の設定

$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' );

ENT_QUOTES

シングルクオートとダブルクオートを共に文字列に変換します。

POSTを使ったフォーム

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームに入力した内容を取得する</title>
<style>
dt {
  float:left;
  width:200px;
  margin-right:30px;
}
dt,dd {
  margin-bottom:20px;
}
</style>
</head>
<body>
<h1>フォームに入力した内容を取得する</h1>
<form action="output.php" method="post">
<dl>
<dt><label for="name">お名前：</label></dt>
<dd><input type="text" name="name" id="name" size="20" maxlength="10" placeholder="山田太郎" required>
</dd>

<dt>性別：</dt>
<dd>
<input id="gender_male" type="radio" name="gender" value="男性" checked><label for="gender_male">男性</label>
<input id="gender_female" type="radio" name="gender" value="女性"><label for="gender_female">女性</label>
</dd>
<dt><label for="message">お問い合わせ内容：</label></dt>
<dd><textarea name="message" id="message" cols="50" rows="4"></textarea></dd>
</dl>
<input type="submit" value="送信する">
</form>
</body>
</html>

データを受け取る方のファイル（PHP）

<?php
$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES, 'UTF-8' );
$gender = htmlspecialchars( $_POST[ 'gender' ], ENT_QUOTES, 'UTF-8' );
$message = htmlspecialchars( $_POST[ 'message' ], ENT_QUOTES, 'UTF-8' );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力データの確認</title>
</head>
<body>
<dl>
<dt> お名前：</dt>
<dd><?php echo $name; ?></dd>
<dt> 性別：</dt>
<dd><?php echo $gender; ?></dd>
<dt> メッセージ：</dt>
<dd><?php echo $message; ?></dd>
</dl>
</body>
</html>

2017-01-05

レスポンシブデザイン　グリッドレイアウト

レスポンシブデザイン

グリッドレイアウトとは

グリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザインとの親和性が高く、最近よく見かけるレイアウトの1つです。

グリッドデザインを使用しているサイト
firadis.net

www.fujiya-peko.co.jp

今回のパターンはブレイクポイントごとにカラム落ちしていくパターンで、
PCでは３カラム
タブレットでは２カラム
スマホでは１カラム
になるレイアウトです。
通常、レスポンシブレイアウトは幅などに固定値を使用せず、フルード化（可変）していきますが、今回のようにカラムの中の大きさが変わらない場合はフルードレイアウトとは違い、横幅などが今までと同じように固定値を指定出来るので簡単に作る事が出来ます。

画面幅に合わせてカラムが落ちていくグリッドデザイン
和洋女子大学

PCレイアウト　3カラム（960px以上）
f:id:yachin29:20170105133643p:plain

タブレットレイアウト　2カラム（959px～641px以下）
f:id:yachin29:20160519093632p:plain

スマホレイアウト　1カラム（640px以下）
f:id:yachin29:20160519093719p:plain

使用素材

http://yachin29.com/photoshop/okazu.zip

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グリッドデザイン</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div class="column">
<header>
<h1>タイトル</h1>
<nav>
<ul>
<li><a href="#"><img src="img/nav01_01.png" alt=""></a></li>
<li><a href="#"><img src="img/nav02_01.png" alt=""></a></li>
<li><a href="#"><img src="img/nav03_01.png" alt=""></a></li>
<li><a href="#"><img src="img/nav04_01.png" alt=""></a></li>
</ul>
</nav>
</header>
<ul>
<li><a href="#"><img src="img/ph01_l.jpg" alt=""></a></li>
<li class="right"><a href="#"><img src="img/ph02_mt.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph03_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph04_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph05_my.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph06_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph07_s.jpg" alt=""></a></li>
</ul>
</div>

<div class="column">
<ul>
<li><a href="#"><img src="img/ph08_my.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph09_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph10_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph11_l.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph12_s.jpg" alt=""></a></li>
<li class="right"><a href="#"><img src="img/ph13_mt.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph14_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph15_l.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph16_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph17_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph18_my.jpg" alt=""></a></li>
</ul>
</div>

<div class="column third">
<ul>
<li><a href="#"><img src="img/ph19_l.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph20_s.jpg" alt=""></a></li>
<li class="right"><a href="#"><img src="img/ph21_mt.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph22_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph23_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph24_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph25_my.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph26_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph27_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph28_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph29_s.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ph30_l.jpg" alt=""></a></li>
</ul>
</div>
</div>
<footer>
<p><small>Copyright &copy; 2017 ○○ All Rights Reserved.</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
img {
vertical-align:bottom;
}

/*PCレイアウト*/
#container {
width:960px;
margin:10px auto;
overflow:hidden;
}
h1 {
width:300px;
height:300px;
background:url(img/logo01.png) no-repeat;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.column {
width:320px;
float:left;
}
h1,li {
float:left;
margin:10px;
}
li.right {
float:right;
}
footer {
  width: 100%;
  height: 100px;
  background: #281605;
}
footer p {
  text-align: center;
  color: #FFF;
  font-size: 18px;
  line-height: 100px;
}
footer#sp {
display:none;
}
/*タブレットレイアウト*/
@media screen and (max-width:959px){
#container {
width:640px;
}
.third {
width:640px;
}
footer#sp {
display:block;
width:300px;
height:300px;
background: #281605;
float:left;
margin:10px;
}
footer#pc {
display:none;
}
}

/*スマホレイアウト*/
@media screen and (max-width:640px){
#container {
width:320px;
}
.third {
width:320px;
}

}

2016-12-20

Cotorier Cafeのスマホレイアウト

レスポンシブデザイン

f:id:yachin29:20161216202913p:plain

2016-12-17

Cotorier CafeのPCレイアウト

レスポンシブデザイン

f:id:yachin29:20161216150838p:plain

各要素のレイアウトが上手くいかない場合は背景色を入れて可視化したり、webデベロッパーツールで要素を可視化出来るようにしましょう。

コーディング例
HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Cotorier Cafe</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header>
<h1>Cotorier Cafe</h1>
<p class="text">毎日のおいしいごはんとおまけをすこし</p>
<p class="logo"><img src="img/logo.jpg" alt=""></p>
<nav>
<ul>
<li><a href="#">お店のこと</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>

<div id="main">
<div id="mainText">
<h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2>
<p class="textInfo">Cotorier Cafe（コトリエ カフェ）は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。</p>

<p id="mainShop"><a href="#">お店について</a></p>
</div>
<p id="mainImg"><img src="img/main.jpg" alt=""></p>
</div>

<div id="menu">
<h3>おすすめメニュー</h3>
<p id="all"><a href="#">すべてのメニュー</a></p>

<div id="menuPhoto">
<div class="menuFood">
<h4>日替わりごはんセット</h4>
<p class="photo"><img src="img/photo1.jpg" alt="#"></p>
<p class="photoText">春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p>
</div>

<div class="menuFood">
<h4>週替わりカレー</h4>
<p class="photo"><img src="img/photo2.jpg" alt="#"></p>
<p class="photoText">甘辛たけのこカレー ゆでたまごつき</p>
</div>

<div class="menuFood">
<h4>季節のおやつ</h4>
<p class="photo"><img src="img/photo3.jpg" alt="#"></p>
<p class="photoText">西か東か！さくらもち食べ比べ対決セット</p>
</div>

<div class="menuFood">
<h4>ひとくち晩酌</h4>
<p class="photo"><img src="img/photo4.jpg" alt="#"></p>
<p class="photoText">今だけ！いちごごろごろサングリア</p>
</div>
</div>
</div>

<div id="info">
<div id="infoShop">
<h3>お店からのお知らせ</h3>
<dl>
<dt>■ 2016-12-14</dt> <dd>年末年始の営業について</dd>
<dt>■ 2016-11-21</dt> <dd>今週の日替わりメニュー（11/21 - 11/27)</dd>
<dt>■ 2016-11-14</dt> <dd>今週の日替わりメニュー（11/14 - 11/20）</dd>
<dt>■ 2016-11-10</dt> <dd>冬限定のおやつがスタートしました！</dd>
</dl>
</div>

<div id="sns">
<p>こちらもどうぞ</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>

<div id="access">

<h3>店舗情報</h3>
<p><a href="#">地図・アクセス方法</a></p>

<dl>
<dt>住所</dt> 
<dd>東京都杉並区高円寺南7丁目7-4 ことりやビル２F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd>
<dt>電話</dt><dd>03-0000-0000</dd>
<dt>営業時間</dt><dd>11:00 - 23:30（L.O. 23:00）<br>ランチタイム：11:00 - 15:00（L.O. 14:30）</dd>

<dt>定休日</dt><dd>日曜日・祝日</dd>
</dl>
</div>
<footer>
<p><small>Copyright© Cotorier Cafe. All rights Reserved.</small></p>
</footer>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/*reset*/
html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt, dd {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
a {
  text-decoration:none;
  color:#222;
}
ul {
  list-style:none;
}
img {
  border:0;
  vertical-align:bottom;
}

/*PCレイアウト*/
#container {
  width: 960px;
  margin:0 auto;
  position: relative;
}
header {
  background: #F9E4C0;
  overflow:hidden;
  padding-top: 10px;
}
header h1  {
  font-size:30px;
  position: absolute;
  top: 50px;
  left: 100px;
}
header .text{
  font-size: 14px;
  position: absolute;
  top: 30px;
  left: 100px;
}
header .logo {
  position:absolute;
  top:20px;
  left:20px;
}
header nav {
  float: right;
  margin: 0 10px 10px 0;
}
header ul {
  overflow: hidden;
}
header li {
  float: left;
  margin-right: 20px;
}
header li:last-child {
  margin-right:0;
}
header li a {
  display: block;
  width:140px;
  height:80px;
  background:#FFF9CC;
  text-align: center;
  line-height: 80px;
}

/*メイン部分*/
#main {
  overflow: hidden;
  padding-top: 40px;
}
#mainText {
  width:600px;
  float: left;
}
h2 {
  font-size: 40px;
  font-weight:normal;
  line-height: 1.6;
}
.textInfo {
  line-height:1.6;
  margin-bottom: 20px;
}
p#mainImg {
  width: 300px;
  float: right;
  margin-top: 30px;
}
#mainShop a {
  display: block;
  width:500px;
  height:60px;
  background:#FFF9CC;
  border: 1px #333 solid;
  box-sizing: border-box;
  margin-bottom: 40px;
  text-align: center;
  line-height:60px;
  font-size:20px;
}

/*メニュー部分*/
#menu {
  background:#FFE380;
  overflow: hidden;
}

#menu h3 {
  width:320px;
  float: left;
  font-size: 36px;
  margin: 20px 10px 40px 10px;
  font-weight: normal;
}
#all {
  margin: 20px 10px 10px 0;
}
#all a {
  display: block;
  float: right;
  background:#FFC;
  width:220px;
  height:50px;
  text-align:center;
  line-height:50px;
}
#menuPhoto {
  overflow: hidden;
  clear: both;
}
#menu h4 {
  text-align: center;
  font-size:18px;
  font-weight:normal;
  margin-bottom: 10px;
}
.menuFood {
  float: left;
  width:220px;
  margin:10px;
}
.photo img {
  border-radius: 20px;
}
.photoText {
  margin: 10px 0 30px 0;
  line-height: 1.5;
}
/*お知らせ部分*/
#info {
  overflow: hidden;
  padding-top: 40px;
}
#info h3 {
  font-size:28px;
  font-weight: normal;
  margin-bottom: 30px;
}
#infoShop {
  float: left;
  width: 440px;
  margin:0 0 30px 10px;
}
#info dt {
  float: left;
  clear:both;
}
#info dd {
  margin-left:30px;
  margin-bottom: 20px;
}
#sns {
  float: right;
  width:480px;
  overflow:hidden;
}
#sns p {
  font-size:28px;
  text-align: center;
  margin-bottom: 10px;
}
#sns li {
  float: left;
  margin: 10px;
}
#sns li a {
  display: block;
  width:220px;
  height:60px;
  border-radius: 8px;
  background: #FFCC66;
  line-height: 60px;
  text-align:center;
}

/*アクセス部分*/
#access {
  background: #FACFB3;
  padding: 10px;
}
#access h3 {
  font-size: 28px;
  margin-top: 20px;
  font-weight: normal;
  width:120px;
  float: left;
}
#access p {
  width:190px;
  height: 40px;
  background: #FFC;
  float: left;
  margin:10px 0 40px 40px;
}
#access p a {
  display:block;
  text-align:center;
  line-height:40px;
}
#access dl {
  clear: both;
  overflow: hidden;
  margin-bottom: 30px;
}
#access dt, #access dd {
  float: left;
  line-height: 1.6;
}
#access dt {
  width: 80px;
  height: 70px;
}
#access dd {
  width: 380px;
  height: 70px;
}

/*フッター部分*/
footer {
  background: #FFF683;
  height:60px;
  text-align:center;
}
footer p {
  line-height: 60px;
  font-size: 18px;
}

f:id:yachin29:20161216202913p:plain

WEBサイト制作の勉強

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

ハンバーガーメニューの実装

PHP フォームの復習

PHPでの配列

arrayを使った配列

arrayを使わないやり方

配列に入っている値をすべて表示させる

count関数

連想配列

GETとPOSTの違いと使い分け

GET

POST

POSTの使い方

ENT_QUOTES

POSTを使ったフォーム

レスポンシブデザイン　グリッドレイアウト

使用素材

Cotorier Cafeのスマホレイアウト

Cotorier CafeのPCレイアウト