echoとprintコマンドの違い

echoコマンドは様々な方法で使える。
・ストリングリテラルを出力
・連結したストリングや評価した変数を出力
・複数行にわたる出力

echoに代えてprintを使用する方法もある。

echoとprintはよく似ているが、printはパラメータを1つ取る実際の関数で、echoはPHPの言語構造(前もって組み込まれている、関数のように振る舞うキーワード)。

echoコマンドは全般的に、printの通常のテキスト出力よりも少し高速。
なぜなら、echoは関数ではなく、戻り値を設定しないから。

関数でないechoは複雑な式の中では使用できないが、printではこれが可能。

例えば、

$b ? print "TRUE" : print "FALSE";

このコードでは、echoは使用できない。
echoで実行しようとすると"Parse error"メッセージが発生する。

アプリみたいな画面フレーム(html,css)

<body>
<style>
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu{
width: 100%;
height: 80%;
position: absolute;
top: 0;
}
.menuBack{
width: 100%;
height: 100%;
position: absolute;
background-image: url("hana.jpg");
background-position: left;
}
.blur{
width: 100%;
height: 100%;
background: inherit;
overflow: hidden;
}
.blur:before{
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: inherit;
    -webkit-filter: blur(7px) saturate(2);
    /*http://creatorclip.info/2014/06/css-ios7-frosted-glass-background/
    ここのページを参考にした。blur(3px) saturate(2)の括弧内の数字でぼかし具合を変えられる*/
  }
.blurContent{
width: 100%;
height: 200px;
background: rgba(255,255,255,0.5);
}
.menuLists{
width: 100%;
height: 100%;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}
.menuList{
width: 90%;
height: 25%;
padding: 0 5%;
font-size: 38px;
color: white;
text-shadow: 1px 1px 0px pink;
border-top:1px solid rgba(255,255,255,0.5);
}
.menuList:first-child{
border-top:none;
}
.item{
width: 100%;
height: 30%;
position: absolute;
bottom: 0;
overflow: scroll;
}
.itemLists{
width: 250%;
height: 100%;
}
.itemList{
width: 20%;
height: 100%;
float: left;
background: green;
position: relative;
}
.itemImg{
width: 100%;
height: 100%;
}
.btnPrev{
bottom: 10%;
left: 0;
width: 30px;
height: 10%;
position: fixed;
display: none;
-webkit-transform: rotate(180deg);
}
.btnNext{
bottom: 10%;
right: 0;
width: 30px;
height: 10%;
position: fixed;
}
.main{
width: 100%;
height: 100%;
background: pink;
position: absolute;
top: 0;
}
.mainImg{
position: absolute;
bottom: 0;
width: 40%;
left: 30%;
}
.itemNavis{
list-style: none;
position: absolute;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.itemNavi{
float: left;
width: 20px;
height: 20px;
background: white;
opacity: 0.8;
margin: 10px;
text-indent: -9999px
}
.btnMenu{
top: 10px;
right: 10px;
background: none;
}
.btnMenu img:first-child{
position: absolute;
-webkit-transform: rotate(90deg);
}
.btnMenu img:last-child{
position: absolute;
-webkit-transform: rotate(-90deg);
display: none;
}
.btnItem{
bottom: 10px;
right: 10px;
}
.btnItem img:first-child{
position: absolute;
-webkit-transform: rotate(-90deg);
}
.btnItem img:last-child{
position: absolute;
-webkit-transform: rotate(90deg);
display: none;
}
.btn{
width: 50px;
height: 50px;
position: absolute;
}
.yajirushi{
width: 100%;
height: 100%;
opacity: 0.8;
border-radius: 10px;
}
</style>
<div class="menu">
<div class="menuBack">
<div class="blur">
<div class="blurContent"></div>
</div>
</div>
<ul class="menuLists">
<li class="menuList">かご</li>
<li class="menuList">ブーケ</li>
<li class="menuList">花瓶</li>
<li class="menuList">鉢植え</li>
</ul>
</div>
<div class="item">
<div class="itemLists">
<div class="itemList"><img class="itemImg" src="gabera.jpg" /></div>
<div class="itemList"><img class="itemImg" src="bara.jpg" /></div>
<div class="itemList"><img class="itemImg" src="churip.jpg" /></div>
<div class="itemList"><img class="itemImg" src="kaneshon.jpg" /></div>
<div class="itemList"><img class="itemImg" src="himawari.jpg" /></div>
</div>
<div class="btnPrev"><img class="yajirushi"src="yajirushi.jpg" /></div>
<div class="btnNext"><img class="yajirushi" src="yajirushi.jpg" /></div>
</div>
<div class="main beforeMenu beforeItem"></div>
<img class="mainImg" src="kago.png" />
<ul class="itemNavis">
<li class="itemNavi">1</li>
<li class="itemNavi">2</li>
<li class="itemNavi">3</li>
<li class="itemNavi">4</li>
<li class="itemNavi">5</li>
</ul>
<div class="btn btnMenu">
<img class="yajirushi" src="yajirushi.jpg" />
<img class="yajirushi" src="yajirushi.jpg" />
</div>
<div class="btn btnItem">
<img class="yajirushi" src="yajirushi.jpg" />
<img class="yajirushi" src="yajirushi.jpg" />
</div>
</body>

アプリみたいな画面フレーム(js)

上下にフリックできたり、横にスクロールできたり。
jsでがんばって書いた。
ほとんどabsoluteとwidth100%で制御。
その都度値取らなきゃいけないから、コード長い…
iOSみたいなすりガラス風背景ぼかし。(まだ不完全な感じかもー)

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$(function(){
//ドラッグしたときの操作
var dragStart = "";
var dragEnd = "";
var dragPosition = "";
$(".beforeMenu").draggable({
axis:"y",
//ドラッグに合わせる
drag: function(e, ui){
dragPosition = ui.position.top;
$(".btnMenu").css({top:dragPosition + 10});
$(".btnItem").css({bottom:-dragPosition + 10});
$(".itemNavis, .mainImg").css({bottom:-dragPosition});
//ドラッグし始めたらメニューかアイテム表示しない
            if(dragPosition > 0){
$(".item").fadeOut();
}else if(dragPosition < 0){
$(".menu").fadeOut();
}
},
start: function(e, ui) {
            dragStart = ui.position.top;
        },
stop: function(e, ui) {
            dragEnd = ui.position.top;
            //メインが表示されているとき
            var menuHeight = $(".menu").height();
var itemHeight = $(".item").height();
            if(dragStart == 0){
            //メニュー表示 下にスライド
            if(dragStart < dragEnd){
$(".beforeMenu").animate({top:menuHeight},300);
$(".btnMenu").animate({top:menuHeight + 10},300);
$(".btnItem").animate({bottom:-menuHeight +10},300);
$(".itemNavis, .mainImg").animate({bottom:-menuHeight},300);
$(".btnMenu img:first").fadeOut();
$(".btnMenu img:last").fadeIn();
$(".main").toggleClass("afterMenu");
$(".main").toggleClass("beforeMenu");
}else if(dragStart > dragEnd){
//アイテム表示 上にスライド
$(".beforeItem").animate({top:"-30%"},300);
$(".btnMenu").animate({top:-itemHeight - 10},300);
$(".btnItem").animate({bottom:itemHeight + 10},300);
$(".itemNavis, .mainImg").animate({bottom:itemHeight},300);
$(".btnItem img:first").fadeOut();
$(".btnItem img:last").fadeIn();
$(".item").scrollLeft(0);
$(".main").toggleClass("afterItem");
$(".main").toggleClass("beforeItem");
}
            }else if(dragStart > 0){
            //元に戻す 上にスライド
            if(dragStart > dragEnd){
$(".afterMenu").animate({top:0},300);
$(".btnMenu").animate({top:"10px"},300);
$(".btnItem").animate({bottom:"10px"},300);
$(".itemNavis, .mainImg").animate({bottom:0},300);
$(".btnMenu img:first").fadeIn();
$(".btnMenu img:last").fadeOut();
$(".main").toggleClass("afterMenu");
$(".main").toggleClass("beforeMenu");
$(".item").fadeIn();
}
}else if(dragStart < 0){
//元に戻す 下にスライド
if(dragStart < dragEnd){
$(".afterItem").animate({top:0},300);
$(".btnMenu").animate({top:"10px"},300);
$(".btnItem").animate({bottom:"10px"},300);
$(".itemNavis, .mainImg").animate({bottom:0});
$(".btnItem img:first").fadeIn();
$(".btnItem img:last").fadeOut();
$(".main").toggleClass("afterItem");
$(".main").toggleClass("beforeItem");
$(".menu").fadeIn();
}
            }
        }
});
//ボタンをクリックしたときの操作
//メニュー表示 下にスライド
$(".btnMenu").click(function(){
var menuHeight = $(".menu").height();
if($(".main").css("top") == "0px"){
$(".btnMenu").animate({top:menuHeight + 10});
$(".btnItem").animate({bottom:-menuHeight + 10});
$(".itemNavis, .mainImg").animate({bottom:-menuHeight});
$(".btnMenu img:first").fadeOut();
$(".btnMenu img:last").fadeIn();
$(".item").fadeOut();
}else{
$(".btnMenu").animate({top:"10px"});
$(".btnItem").animate({bottom:"10px"});
$(".itemNavis, .mainImg").animate({bottom:0});
$(".btnMenu img:first").fadeIn();
$(".btnMenu img:last").fadeOut();
$(".item").fadeIn();
}
$(".beforeMenu").animate({top:menuHeight});
$(".afterMenu").animate({top:0});
$(".main").toggleClass("afterMenu");
$(".main").toggleClass("beforeMenu");
});
//アイテム表示 下にスライド
$(".btnItem").click(function(){
var itemHeight = $(".itemList").height();
if($(".main").css("top") == "0px"){
$(".btnMenu").animate({top:-itemHeight - 10});
$(".btnItem").animate({bottom:itemHeight + 10});
$(".itemNavis, .mainImg").animate({bottom:itemHeight});
$(".btnItem img:first").fadeOut();
$(".btnItem img:last").fadeIn();
$(".item").scrollLeft(0);
$(".menu").fadeOut();
}else{
$(".btnMenu").animate({top:"10px"});
$(".btnItem").animate({bottom:"10px"});
$(".itemNavis, .mainImg").animate({bottom:0});
$(".btnItem img:first").fadeIn();
$(".btnItem img:last").fadeOut();
$(".menu").fadeIn();
}
$(".beforeItem").animate({top:"-30%"});
$(".afterItem").animate({top:0});
$(".main").toggleClass("afterItem");
$(".main").toggleClass("beforeItem");
});
//メインクリックしたら元に戻る
if($(".main").css("top") != 0){
$(".main").click(function(){
if($(".main").css("top") > "0px"){
$(".main").animate({top:0});
$(".btnMenu").animate({top:"10px"});
$(".btnItem").animate({bottom:"10px"});
$(".itemNavis, .mainImg").animate({bottom:0});
$(".main").toggleClass("afterMenu");
$(".main").toggleClass("beforeMenu");
$(".btnMenu img:first").fadeIn();
$(".btnMenu img:last").fadeOut();
$(".item").fadeIn();
}else if($(".main").css("top") < "0px"){
$(".main").animate({top:0});
$(".btnMenu").animate({top:"10px"});
$(".btnItem").animate({bottom:"10px"});
$(".itemNavis, .mainImg").animate({bottom:0});
$(".main").toggleClass("afterItem");
$(".main").toggleClass("beforeItem");
$(".btnItem img:first").fadeIn();
$(".btnItem img:last").fadeOut();
$(".menu").fadeIn();
}
});
}
//アイテムを横にスクロールしたとき
$(".item").scroll(function(){
var scrollPosition = $(".item").scrollLeft();
//前に進むボタンの表示
if(scrollPosition > 0){
$(".btnPrev").fadeIn("slow");
}else{
$(".btnPrev").fadeOut("slow");
}
//次に進むボタンの表示
var scrollWidth = $(".itemLists").width();
var bodyWidth = $("body").width();
if(scrollPosition == (scrollWidth - bodyWidth)){
$(".btnNext").fadeOut("slow");
}else{
$(".btnNext").fadeIn("slow");
}
});
//前に進むボタン押したとき
$(".btnPrev").click(function(){
var itemWidth = $(".itemList").width();
var scrollPosition = $(".item").scrollLeft();
if(scrollPosition < itemWidth + 20){
$(".item").animate({
scrollLeft: 0
},500);
}else if(itemWidth < scrollPosition && scrollPosition < itemWidth * 2+ 20){
$(".item").animate({
scrollLeft: itemWidth
},500);
}else if(itemWidth * 2 < scrollPosition && scrollPosition < itemWidth * 3+ 20){
$(".item").animate({
scrollLeft: itemWidth * 2
},500);
}
});
//次に進むボタン押したとき
$(".btnNext").click(function(){
var itemWidth = $(".itemList").width();
var scrollPosition = $(".item").scrollLeft();
if(scrollPosition < itemWidth){
$(".item").animate({
scrollLeft: itemWidth
},500);
}else if(itemWidth - 20 < scrollPosition && scrollPosition < itemWidth * 2){
$(".item").animate({
scrollLeft: itemWidth * 2
},500);
}else if(itemWidth * 2 - 20 < scrollPosition && scrollPosition < itemWidth * 3){
$(".item").animate({
scrollLeft: itemWidth * 3
},500);
}
});
//アイテムをクリックしたら左にぴったりになる
/*$(".itemList").click(function(){
var itemIndex = $(".itemList").index(this);
$(".item").animate({
scrollLeft: itemWidth * itemIndex
},500);
});*/
//アイテムナビを押したとき
$(".itemNavi").click(function(){
var itemNaviIndex = $(".itemNavi").index(this);
var itemWidth = $(".itemList").width();
$(".item").animate({scrollLeft: itemWidth * itemNaviIndex},500);
var itemHeight = $(".itemList").height();
$(".btnMenu").animate({top:-itemHeight - 10});
$(".btnItem").animate({bottom:itemHeight + 10});
$(".itemNavis, .mainImg").animate({bottom:itemHeight});
$(".beforeItem").animate({top:"-30%"});
$(".main").addClass("afterItem");
$(".main").removeClass("beforeItem");
$(".menu").fadeOut();
});
});
</script>
</head>

勉強中読んでる読んだ本

2014.04.07 
よくわかるPHPの教科書
PHP5.5対応版
たにぐち まこと


2014.04.11
オープンソースECサイト構築ソフト
EC-CUBE公式ガイドブック【最新Ver2.13対応】
株式会社ロックオン


2014.04.11
Web制作の現場で使う
jQueryデザイン入門
西畑一馬


2014.05.15
Web制作者のためのSass[サス]の教科書
これからのWebデザインの現場で必須のCSSメタ言語
平澤隆(Latele)、森田壮


2014.06.05
平成26年度 イメージ&クレバー方式でよくわかる
栢木先生のITパスポート教室 CBT対応
栢木厚


2014.06.06
インターネット&Webの必須常識100
村上徹


2014.06.09
ウェブの仕事力が上がる標準ガイドブック
Webリテラシー
プロデュース・ディレクション・デザイン・プログラミング
ワークスコーポレーション


2014.06.17
これだけは知っておきたい「マーケティング」の基本と常識
大山秀一


2014.06.18
入門HTML5
Mark Pilgrim


2014.07.07
はじめてのPHP,MySQL,JavaScript&CSS第2版
Robin Nixon