勉強中

効果的なポップ作成のヒントになる本

2016-02-29

最近、ポップを作る機会が多いです。
本業ではありませんが。

結構 大き目のポップです。
90cm×30cmとか。

といっても、データ制作のみで、印刷は会社さまにてしていただいているのですが、

これがこれが、楽しいんですね~。

何が楽しいかっていうと、、
・どんな言葉で
・どんなフォントで
・配色は?
・お客様の目を引き付けるには?
・購買意欲を掻き立てるには?

考えることが、ワクワクです。

↓「現代広告の心理技術」の本を参考にしてます。ですが こちらの本、賛否両論・・・(;・∀・)
  私は大変参考になったのですが;

今まで 難しく考えていたポップ作成が
この本のお蔭で、効果的なものをシンプルに考えられるようになりました。

ちなみに 著者は外国の方で、日本語訳したものです。

ですので、ところどころ、理解し難く思うところもありますが
そもそも、私は、1冊の本において、「すべてがためになる」とは考えておらず
重要と思われる箇所をつまみぐい的な感覚です。

本の最後に、7ページに渡って、ポイントをまとめたリスト表なるものがあり、
私はこちらを縮小コピーして、手帳に貼り付けました。

ちなみに 本屋さんでは発売してない本で、私はアマゾンで中古本を購入しました♪

ポップ作成の初心者の方や、行き詰っている方などには、お勧めの1冊です。

検索順位とスマートフォン版の関係

2016-01-21

通常のパソコンブラウザ専用のホームページでも スマホやipadなどでの閲覧は可能ですが、
Googleが2015年4月21日から、モバイルでの検索結果に、「そのウェブサイトがモバイル対応されているかどうか」を検索上位要素として使用し始めることを発表いたしました。

ですが、2015年9月19日時点では、モバイルに”対応しているorしていない”の影響結果は11%?という経過まとめもでたりしていたので
あまりレスポンシブ作りにこだわらなくても大丈夫かも、と多くの人が判断しました。

・・・・と、ところが!

私の管理している とあるサイト。

いつも希望キーワードで1ページ目の2位に表示されていたのに
気づいてみると、1ページ目の終わりに順位が落ちている・・・・・;

原因が思いつかない・・・思いつかない・・・・思いついた・・・!?

スマホで同じキーワードで検索をかけてみたら
上位はすべて「スマホ対応」でしたΣ(・艸・○)ェ!!

仮にスマホ対応してなくても パソコンでの検索結果には影響ないはず!?
でも、現に一番下。。。。

そこで急きょ スマホ版も準備して すぐに、グーグルクロール申請しました!!!

な、なんと。
たった数時間で、1ページ目の上位に。(2番目からは落ちちゃった。。。)

衝撃的な事実!!!

ただし、スマホ版がないサイトでも 希望キーワードに対して中身が他社サイトを差し置いて重要なものであれば
それはそれで重要視されるのですが、
そうでもない場合、スマホ版のあるサイトが重要視されるようです。。

いろいろなホームページ立ち上げ方法(CMS・ブログ、無料から有料まで)

2015-07-08

私、ホームページを作るのがお仕事なんですが
ホームページを無料で作れるサイトの相談や (⊃ω・`。)
無料ブログをホームページのようにカスタマイズして立ち上げたい |ω-`*) … など、
低コストで抑えるためのいろいろなことを相談されるので、あれこれ内部捜査したものを、自分のメモとしてこちらに残します。

通常の制作・・・CMSオープンソースでのホームページ制作

WordPress使用 【メリット】
・HTMLやCSS、PHP知識必要
・豊富なプラグインがあるため、予約システムやポータルサイト、検索機能重視サイト、アンケートサイトなど様々な要望に応えることができる
・テンプレートが多い
・情報が多い
【デメリット】
・お問い合わせはプラグインでの設置が必要
・スマートフォンサイトも制作が必要
boser 使用 【メリット】
・スマートフォン・携帯サイト対応
【デメリット】
・情報が少ない
・簡単にカスタマイズできるお問い合わせフォーム
・テンプレートが少ない
Movabletype使用 【メリット】
・ホームページ改ざん攻撃の対象になりにくい
【デメリット】
・ワードプレスなどに慣れてしまうと、使いにくく感じてしまう。。
・ホームページを書き換えたときに、再構築するのに時間がかかる。
・プラグインがワードプレスに比べて少ない

無料ホームページ制作ツール

WIX 【メリット】
・サーバー料金が不要
・デザインがかっこいい・お洒落
・スマホ版も 設定により可能
・プレビュー機能での編集が可能
・HTMLおよびCSS知識不要
【デメリット】
・検索(SEO)対策において、なかなかひっかかってこないような・・・・
・広告表示される
・HTMLおよびCSSがさわれない
Jimdo 【メリット】
・サーバー料金が不要
・スマホ版対応
・プレビュー機能での編集が可能
・HTMLおよびCSSが操作可能
【デメリット】
・テンプレートが少ない
・広告表示される

無料ブログをカスタマイズしてホームページのように・・・

FC2 【メリット】
・サーバー料金が不要
・テンプレートが豊富
・スマホ版も カスタマイズ可能
・検索機能対策(SEO)効果において どのブログを差し置いて1位!
・HTMLおよびCSSが触れるため、知識があれば、自由にどんなデザインにでもカスタマイズ可能。
【デメリット】
・15日記事を更新しなければ、広告がトップ記事に表示される
・HTMLおよびCSSの知識が必要
アメブロ 【メリット】
・サーバー料金が不要
・いろいろな有名な方も使用しているので、イメージはいいかも。
・足跡機能などがついているので、いろいろな人と繋がりたい方にはおすすめ。
【デメリット】
・スマホ対応だが、デザインはカスタムできない。
・広告がたくさん表示される
・CSSしか触れないため、カスタマイズに制限がある

Webフォント

2015-07-08

Webフォント。

このサイトはWebフォントを使用しています。

通常、インターネット上で表示されるテキストのフォントは、
閲覧しているそれぞれのパソコンにインストールされているフォントに左右されますが

こちらのWebフォントはワードプレスに直にインストールして使用しているので
閲覧環境に関係なく、表示されます。

 

手書きのようなこちらのWebフォントがお気に入りです^^

スマホで見るとサイトの文字が大きくなるーΣ(`・ω・Ⅲ)

2015-02-20

ということで、参考サイトをリンクメモします。

>>つむぎブログ様「スマホで見るとサイトの文字が大きくなる?」

>>raining様「CSS:スマホとPCサイトの文字サイズを固定する」

>>Webworker’s Clip様「スマホサイトで-webkit-text-size-adjustが効かない時の対処法 」

win7からwin8.1へパソコンお引越しに伴い不便と感じたところをカスタムメモ

2015-02-10

「win7」32bitから「win8.1」64bitへ引っ越しして
サクサク動くようになり、それはそれは快適なのですが 
数点、win8でのデフォルト設定が不便に感じましたので、システム変更した点をメモします。

win8でのデフォルト設定が不便に感じた箇所を変更
文字がぼやける
厳密に描くと、文字ではなく 画像がぼやけて見えます。 原因はブラウザの表示幅拡大に伴い、デフォルト設定ではディスプレイが125%になっています。
デイスプレイ⇒小100%⇒すべてのデイスプレイで同じ拡大率を変更するにチェックをいれる
ファイル名が同じだと 上書きされてしまう
ファイル名が同じですと デフォルトでは上書きされてしまいます
①エクスプローラウィンドウを開き、表示タブをクリックし、フォルダオプションを選択 ②フォルダオプションウィンドウの表示タブをクリック ➂フォルダの結合の競合を非表示にする」のチェックマークを外す(デフォルトではチェックが入っているはずです) 「適用」>「OK」をクリック これで警告ダイアログが表示されるようになります。
警告なしでごみ箱へ
ファイルをゴミ箱に捨てようとしても、警告がでません。 もちろん「ごみ箱」に一時保存されますが、やっぱり警告にはでてほしいです。
①ごみ箱のプロパティを開きます。 ②「削除の確認メッセージを表示する」を選択します。 これで警告ダイアログが表示されるようになります。
Windows 8.1で、起動時にデスクトップ画面を表示する方法
私は起動時はスタート画面に設定しており、デスクトップ画面ではないのですが、とりあえずメモします。
①タスクバーの上で、右クリック>プロパティ>ナビゲーション で 「スタート画面」の中の 「サインイン時、または画面上のすべてのアプリを終了したときに、スタート画面ではなくディスクトップに移動する」 にチェックをいれます。
ちなみにwin8の場合は、Windows 8.1にアップデートすることで起動時にデスクトップ画面を表示することができます。 ・アップデートサイト>>
winバージョンに関係なく便利に変更した点
拡張子を表示させる
私は起動時はスタート画面に設定しており、デスクトップ画面ではないのですが、とりあえずメモします。
拡張子を表示させる
エクスプローラー>コントロールパネル>ディスクトップのカスタマイズ>フォルダオプション>表示 「詳細設定」から「登録されている拡張子は表示しない」のチェックを外して、「OK」をクリックします。
よく使用するソフトについて
よく使用するソフトを スタートアップ画面の下部から ディスクトップおよびタスクバーにピン止め
・エクスプローラー ・メモ帳 ・ペイント ・その他 いろいろなソフト

8回目 CSSで位置を移動させてみる

2014-11-26

位置を移動
位置移動でござる
位置移動でござる
--[ html ]-----------------------
<section>
<h1 class="ugokasu1">位置移動でござる</h1>
</section>

--[ CSS ]------------------------
.ugokasu1{
	  animation: ugokuzo 8s;
	  animation-iteration-count: 5;
	  -webkit-animation: ugokuzo 8s; /* Safari & Chrome */
	  -webkit-animation-iteration-count: 5;
	  background: #ff3366;
	  border-radius: 10px;
 	  color: #ffffff;
	  font-size: 14px;
 	  margin-bottom: 30px;
 	  padding: 10px;
 	  width: 200px;
}

	@keyframes ugokuzo {
	  0%   { transform:  translate(0px, 0px);    }
	  50%  { transform:  translate(300px, 0px);   }
	  100%   { transform:  translate(0px, 0px);    }
	}
	@-webkit-keyframes ugokuzo {
	  0%   { -webkit-transform:  translate(0px, 0px) ;   }
	  50%  { -webkit-transform:  translate(300px, 0px);   }
	  100%   { -webkit-transform:  translate(0px, 0px) ;   }
	} 


7回目 CSS見出しをグラデーションで♪

2014-11-26

こちら、ベンダープレフィックスの記載必要

それでもIE9では利用できないようです
未対応ブラウザのために 単色の背景も設定すること。

・linear-gradient 線形グラデーション
・radial-gradient 円形グラデーション←あまり使えそうにないのでお試し省略

ピンクでグラデーション

ピンクでグラデーション

--[ html ]-----------------------
<section>
<h1 class="gurade1">ピンクでグラデーション</h1>
</section>

--[ CSS ]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

--[ CSS 失敗]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
0deg,  
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
0deg,
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}

5回目 ①+② 応用 / ページ読み込みで動く

2014-11-17

波とイルカ

--[ html ]-----------------------

 <div id="hani">
    <span class="animation-nami"></span>
    <span class="iruka2"></span>
    </div>

--[ CSS ]------------------------
{animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向}
@keyframes キーフレーム名{~}

#hani{
    height: 100px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#hani span {position:absolute;}

.animation-nami{
width:100%; 
height:30px; 
z-index:10; 
left:0; 
bottom:0; 
background-image:url(images/nami.png);
}

.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}

@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}

.iruka2{ 
        background-image:url(images/iruka1.png) ;
	width:160px;
	height:160px;
        z-index:5;
        bottom:-110px;
 	-webkit-animation:irukamawaru2 6s linear infinite normal;
	animation:irukamawaru2 6s linear infinite normal;
}

@keyframes irukamawaru2{
	0%	{}
	100%	{transform: rotate(360deg);}
}

6回目 CSS見出し

2014-11-26

角丸

角丸でござる

--[ html ]-----------------------
<section>
<h1 class="midasi1">角丸でござる</h1>
</section>

--[ CSS ]------------------------
.midasi1{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}
角丸とテキストに影

角丸とテキストに影でござる

--[ html ]-----------------------
<section>
<h1 class="midasi2">角丸とテキストに影でござる</h1>
</section>

--[ CSS ]------------------------
.midasi2{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    box-shadow: 20px 20px 10px 0px black;
    text-shadow: 1px 1px 3px #000;
}
見出しを斜めに

見出しを斜めにでござる

--[ html ]-----------------------
<section>
<h1 class="midasi3">見出しを斜めにでござる</h1>
</section>

--[ CSS ]------------------------
.midasi3{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

4回目 ②ページ読み込みで動く/要素を回転表示する -transform:rotate-

2014-11-17

@keyframes キーフレーム名{
  0% { transform: rotate(角度deg);}
100% { transform: rotate(角度deg);}
}

個別表示

・transform:rotate() ()要素を回転表示する

補間方法 animationn-timing-function

・normal 順方向(時計回り)初期値
・alternate 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse 逆回り ←一部動かないなどの不具合有
・alternate-reverse 初回のアニメーションは逆方向に実行し、次は順方向

角度 deg

・deg 角度

補間方法 animationn-timing-function

・rotate(回転角度) rotate()関数では、角度によって2D回転を指定します。
・rotateX(回転角度)  X軸を軸とする角度によって時計回りの回転を指定します。
・rotateY(回転角度)  Y軸を軸とする角度によって時計回りの回転を指定します。
・rotateZ(回転角度)  Z軸を軸とする角度によって時計回りの回転を指定します。
・rotate3d(数値, 数値, 数値, 回転角度)

回る

© 引用サイト⇒nemuchan.comさまサイトより

--[ html ]-----------------------

<div class="anime01a"></div>

--[ CSS ]------------------------
.anime01a{
	background:#000;
	color:#fff;
	width:100px;
	height:10px;
	margin:40px 0;
	-webkit-animation:anime01a 5s infinite alternate;
	animation:anime01a 5s infinite alternate;
}

@-webkit-keyframes anime01a{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes anime01a{
	0%	{}
	100%	{transform: rotate(360deg);}
}
回るイルカ
--[ html ]-----------------------

<div class="iruka"></div>

--[ CSS ]------------------------
{animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向}
@keyframes キーフレーム名{~}

.iruka{ 
background:url(images/iruka1.png);
width:160px;
height:160px;
margin:40px 0;
-webkit-animation:irukamawaru 5s linear infinite normal;
animation:irukamawaru 5s linear infinite normal;
}

@-webkit-keyframes irukamawaru{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes irukamawaru{
	0%	{}
	100%	{transform: rotate(360deg);}
}

3回目 ①ページ読み込みで動く -animation-

2014-11-17

animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向

{animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向}
@keyframes キーフレーム名{~}

個別表示

・キーフレーム名 animation-name
・再生時間  animation-duretion
・補間方法 animationn-timing-function
・ディレイ animation-delay(アニメ開始を遅らせる時間)
・繰り返し animation-iteration-count
・方向 animation-direction

補間方法 animationn-timing-function

・ease 最初と最後を滑らかに変化
・linear 一定の速度で変化
・ease-in 最初をゆっくり変化
・ease-out 最後をゆっくり変化
・ease-in-out 最初と最後をゆっくり変化

繰り返し animation-iteration-count

・infinite デフォルトの回数は1だがこちらを指定すると永遠に繰り返し実行される
・回数

方向 animation-direction

・normal 順方向(時計回り) 初期値
・alternate 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse 逆回り
・alternate-reverse 初回のアニメーションは逆方向に実行し、次は順方向

ゆっくり傾く

© 引用サイト⇒nemuchan.comさまサイトより

--[ html ]-----------------------

<div class="anime11"></div>

--[ CSS ]------------------------

.anime11{
	background:#003d84;
	color:#fff;
	margin:25px 0;
	width:100px;
	height:10px;
	-moz-animation:anime11 5s infinite alternate linear;
	-webkit-animation:anime11 5s infinite alternate linear;
	animation:anime11 5s infinite alternate linear;
}
@-webkit-keyframes anime11{
	0%	{}
	100%	{-webkit-transform: skewY(-15deg);}
}
@keyframes anime11{
	0%	{}
	100%	{transform: skewY(-15deg);}
}
応用・・・波
--[ html ]-----------------------

<div class="animation-nami"></div>

--[ CSS ]------------------------

.animation-nami{
width:100%; 
height:30px; 
z-index:10; 
left:0; 
bottom:0; 
background-image:url(images/nami.png);
}

.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}

@-webkit-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-moz-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-o-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-ms-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}

2回目 マウスオーバーで変わる -transition-

2014-11-14

transition:再生時間 プロパティ 補間方法 ディレイ

{transition:再生時間 プロパティ 補間方法 ディレイ}

個別表示

・再生時間  transition-duretion
・プロパティ transition-property
・補間方法 transition-timing-function
・ディレイ transition-delay

補間方法

・ease 最初と最後を滑らかに変化
・linear 一定の速度で変化
・ease-in 最初をゆっくり変化
・ease-out 最後をゆっくり変化
・ease-in-out 最初と最後をゆっくり変化

角を丸く

© 引用サイト⇒nemuchan.comさまサイトより

--[ html ]-----------------------

<div class="anime01"></div>

--[ CSS ]------------------------

.anime01{
	background:#003d84;
	color:#fff;
	padding:10px;
	width:200px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime01:hover{
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
}
複数のプロパティを同時に変更

■リンクを貼ってみました

--[ html ]-----------------------
<div id="anime06"><a href="/contact/">お問い合わせはこちら</a></div>

--[ CSS ]------------------------
★背景色とテキスト色と幅が1秒で変化するCSS

div#anime06 {
	background-color: #003d84;
	width: 150px;
	padding:10px;
	-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
	transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div#anime06 a{
        color: #fff;
}

div#anime06:hover{
	background-color: #ffeb00;
	color: #000;
	width: 300px;
}

div#anime06 a:hover{
	color: #000;
}

1回目 CSSを書くにあたって「ベンダープレフィックス」

2014-11-14

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、
それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などの
ベンダープレフィックスを付ける必要があるようです。
© 引用サイト⇒ベンダープレフィックスさまサイトより)

★動くCSS3を書くにあたって、必ずHTML5で書くこと!

■ 主要ブラウザのベンダープレフィックス
-moz-  …… Firefox -webkit- …… Google Chrome、Safari -o-    …… Opera -ms-   …… Internet Explorer
■ border-imageプロパティで画像ボーダーを機能させるには、 FirefoxやGoogle Chromeなどのそれぞれのブラウザ向けのベンダープレフィックスを付ける必要があるようです。
-moz-border-image: url("bg_dot.png") 15 round;     // Firefox向け -webkit-border-image: url("bg_dot.png") 15 round;   // Google Chrome、Safari向け

CSS3が勧告されるまでには、まだ時間がかかりそうですし、
動くデザインはとても魅力なんですが、
Firefoxなどのブラウザでは一部がベンダープレフィックス無しで動作するようになっている一方、
新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるようです。

ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、
今後の仕様策定の進展やブラウザのバージョンアップに備えて、
ベンダープレフィックス無しの指定を併記しておくほうが良いようです。

 border-image: url("bg_dot.png") 15 round;         //ベンダープレフィックス無し(標準)も併記する
-moz-border-image: url("bg_dot.png") 15 round;     // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round;   // Google Chrome、Safari向け

う~~~~ん。。動くデザインはかっこいいんだけれど、
ちょっと面倒かなあ。
すべてのブラウザで同じ動作がみられないと、クレームきそうだし。。悩む。。

3回目:GETとPOSTのURL出力違い

2014-09-27

methodがPOSTの場合 パラメーターがつかず、URLが出力結果によってかわらない

同一ページ内にて出力させるときはPOSTが便利

【POST】はURLがかわらない。
・入力フォームページ http://odaseika.seika-office.com/taiwa2/
・出力ページ     http://odaseika.seika-office.com/taiwa2/
 同一ページ内で表示させるときはaction=””という風に中身は記入しない。
 仮にaction=”php-form2″といれると http://odaseika.seika-office.com/taiwa2/php-form/となり「ページがありません」となる

名前(ハンドルネームでも何でもOK)を入力して送信ボタンを押してみて下さい



★同一ページ内にて結果表示
<form action="" method="POST">
<input type="text" name="age">
<input type="submit">
</form>

<php
$age = $_POST["age"];
$age2 = htmlspecialchars($age);
echo "こちらに表示されます⇒{$age2}";
?>

methodがGETの場合 出力結果にパラメーターが付きURLがかわる

【GET】はパラメーターが出力結果URLにつくため、結果次第でURLが変更になる
・入力フォームページ
 http://odaseika.seika-office.com/taiwa2/
・出力ページ
 http://odaseika.seika-office.com/php-form2/?age=小田
 http://odaseika.seika-office.com/php-form2/?age=上田

※ちなみにPOSTで別ページに出力させるとしたら階層は現在のページの1つ下になる。ので1つ下にしたら出力可能かも。
例:入力フォーム http://odaseika.seika-office.com/taiwa2/
  出力ページ  http://odaseika.seika-office.com/taiwa2/php-form2/

名前(ハンドルネームでも何でもOK)を入力して送信ボタンを押してみて下さい



・http://odaseika.seika-office.com/taiwa2/に入力ページ 
<form action="php-form2" method="GET">
<input type="text" name="age">
<input type="submit">
</form>

・http://odaseika.seika-office.com/php-form2/に出力ページ 
<?php
$age = $_GET["age"];
$age2 = htmlspecialchars($age);
echo "{$age2}さん、ようこそ!";
?>

2回目:対話型に挑戦

2014-09-26

入力した文字を返すプログラムを使ってみる

入力した文字を返す対話型は、2つのページが必要のようです。
.phpにフォームを記入して.phpで出力も動きますし
.htmlにフォームを記入して.phpで出力でもOKのようです。

ちなみにこちらは↓.phpと.phpで動かしています

名前(ハンドルネームでも何でもOK)を入力して送信ボタンを押してみて下さい



<form action="php-form/index.php">
<input type="text" name="age">
<input type="submit">
</form>

//こちらは別ページ(例:php-form/index.php)に
<?php
$age = $_GET["age"];
echo $age;
?>

★タグのHTML化(こちらを記載)
<?php
$age = $_GET["age"];
echo htmlspecialchars($age);
?>

※HTMLに変換せずに出力するのは危険なようです。
なので、画面出力時には必ずhtmlspecialchars()を使うことを忘れずに。

1回目:基礎的な記述

2014-09-26

出力タグ 「echo」を使ってみた

<?php
echo "こんにちは";
?>
PHPで自動で計算をさせてみた

<?php
 echo "1+2×3=";
 echo (1+2*3);
?>
変数を使ってみた

<?php
$price = 3000;
$price2 = $price*1.05;
echo "{$price}円の税込金額={$price2}円";
?>
改行コードを使ってみた\n

<?php
echo "ああああああ \n";
echo "いいいいいい \n";
echo "うううううう \n";
?>

PAGE TOP