なんだか固いタイトルですが、
たぶんＷｅｂが好きな人であれば、上記タイトルは「そうそう」って感じかな*

勉強といっても、机に向かって
「さあ　何をはじめましょう？」
ではなく、
お客様から依頼されて過去に技術不足などでお受けできなかったことなど
次回はお受けできるように、自分のサーバーでテスト構築しながら、思ったとおりに動いたときの喜びは　ひとしお。

今回は「検索絞り込みシステム」と「会員に専用記事を更新してもらうシステム」の構築に
約1年もかかっちゃいました(￣ー￣；

↓デモで制作したサイトです。クリックでサイトにとびます。

いくつか、条件を選んで検索をかける絞込み検索って、結構大変でした。（っていうか、私、ただのWebデザイナーなので；）
３つ条件があったとして「and」検索はできても「or」検索ができなかったり；

出来たらできたで、（じゃあパンくずはどうする？）とかで
次から次から（まだ、だめじゃん）のダメ押しが押し寄せてくる。

絞込み検索ができるようになったところで、
次は、各ページごとに会員が編集できるように、会員に更新してもらうシステムを追加。
これが、また頭を悩ませどころだったのですが、な、なんとか出来ました！
小規模であれば、問題ないかな、と。

例えば↓こちらは「テンプレートNo140」の投稿記事を編集できるパスワードとＩＤを発行しています。
ダミーでの制作なので「テンプレート」になっちゃいましたが、こちらが「店舗」などであれば
ちょっとしたポータルサイト運営も可能かと。

個別編集画面がクリックで↓拡大されます
クリックで拡大されます

ちょっと一息しようっと♪

位置を移動

--[ 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) ;   }
	} 

ピンクでグラデーション

--[ 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;
}

対価について。
ちょっと迷って、検索をし、（あ～～～～これこれ！）とドンぴしゃの文章で書いてありました
「俺ジャーナル」さまのサイトより一部文章を引用させていただき書きます。

スキルをお金に換える仕事は、
クライアントさまご自身が
「ちょっと頑張れば自分でもできそう……でも自信が、、、」という内容の作業の場合、
料金をいただくのを申し訳なく思うことから、ついサービス差し上げたくなり、
結果、ちりも積もれば何とやらで仕事どころではなくなり、
自分で自分の首をしめてしまうという悪循環にはまり、時間・体力ともに消耗してしまいます。

昨年倒れてからは、
「この部分を変更したいのだけど　どこをさわったらいいのでしょう？」という問いにはお教えさしあげ、
「どのようにさわったらいいのでしょう？」
という問いに対しましては、仕事としてご依頼いただくことにしました。

ある程度　ビジネスライクに割り切っていかないと
自分がやられてしまいます。

フリーランスは　体あっての仕事ですからね。

友人だからと、こちらもついサービス差し上げて、お礼の一言もない場合は
通常は料金をいただく旨をやんわりと伝えます。

ま、なかなか難しいですけどね。

【スナフキン名言集】より
いつもやさしく愛想よくなんてやってられないよ。 理由はかんたん。時間がないんだ。

波とイルカ

--[ 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);}
}

角丸

--[ 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);
}

回る

© 引用サイト⇒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);}
}

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

ゆっくり傾く

© 引用サイト⇒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;}
}

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

角を丸く

© 引用サイト⇒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;
}

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向け

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

↓「デザイナーとして起業した(い)君へ。成功するためのアドバイス」おすすめです。

デザイナーとして起業した(い)君へ。成功するためのアドバイス – Work for Money, Design for Love (2013/11/13) David Airey 商品詳細を見る

クライアントさまとのよくあるトラブルや、
料金設定、および危ない顧客の見極め方など

「うん、うん」と思わずうなずいてしまうようなことがたくさん書いてあります。

今から起業しようとしている人には、今後の対策としてお勧めですし
すでに起業している人においては、
（こんなことあったな～　みんなあるんだな～　これでよかったんだな）と心強いバイブルになります。

心細いときもあるけれど、みんなおんなじだから、みんな、がんばろうね。

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/となり「ページがありません」となる

★同一ページ内にて結果表示
<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で別ページに出力させるとしたら階層は現在のページの１つ下になる。ので１つ下にしたら出力可能かも。
例：入力フォーム　http://odaseika.seika-office.com/taiwa2/
　　出力ページ　　http://odaseika.seika-office.com/taiwa2/php-form2/

・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}さん、ようこそ！";
?>

変数を出力してみただけ

↓こちらでも表示されますが
<?php
$age = $_GET["age"];
echo $age;
?>

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

ようこそ、を付け加えてみる

↓こちらでも表示されますが
<?php
$age = $_GET["age"];
echo "{$age}さん、ようこそ！";
?>

★タグのHTML化（こちらを記載）
<?php
$age = $_GET["age"];
$age2 = htmlspecialchars($age);
echo "{$age2}さん、ようこそ！";
?>

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

「htmlspecialchars」は、HTMLなどで特殊な記号として扱われる「>」を「＆gt;」に、「&」を「&」などに変換してくれます

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

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

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

<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()を使うことを忘れずに。

出力タグ 「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";
?>

最近　EC-cubeのお問い合わせが多くて、
デザインのカスタマイズだけでも・・・とチャレンジしてみました。

といっても数年前にも　なんとなくチャレンジしたことはあったのだけれど。

今回はちゃんとデザインを作りこもうと思った結果、
EC-cubeはたっくさんのボタンが多く、
デザインにあわせたボタンに変更しようと思えば
実に、気が遠くなるほどのボタンがあることに気付きました・・・・。

なので、途中でボタンのデザイン変更はやめました。中途半端に；

あちこちいじってみてEC-cubeのカスタマイズテンプレートが高い理由がわかりました。
とかく時間がかかりますね～

デフォルトでは　トップページに商品一覧がでないんですね～；

どういうことかいうと、
商品登録の際に「お勧め商品」にチェックを入れたものだけがトップページに表示されるしくみなので、
新商品が入ったり、トップの商品を入れ替えたい場合は、
都度　「おすすめ商品」のチェックを入れたりはずしたりといった手間がかかります。

カラーミーショップもそうだった。
あ、そういえば、WordPressカートも。

カラーミーショップはわからないけれど
WordPressカートとEC-cubeはシステム追加で　表示されるけれど
EC-cubeの方がややこしかった。。。。一瞬、すべてが壊れた。。。（血の気がひいた）

というわけで、上記画像をクリックしたらサイトへとびますが
トップページに「商品一覧表示」と各ページに「パンくずリスト」のシステムを追加してます♪

私の運営している聖夏オフィスでは
テンプレートからのホームページ制作をしておりますが
これはコストを抑えるためでもありますが、お客様の頭の中の漠然としたイメージを
見て確かめて選んでいただくためでもあります。

ちなみに　以下の２つのサイトは同じテンプレートからアレンジして作っています。

画像や配置がかわるだけで、だいぶイメージが変わりますよね。

なので、私はテンプレートを「デザイン」でなく「レイアウト」でみています。
あとはどうにでも変わるので＾＾

↓ちなみにこちらの扇風機の画像と外に見えている桜島は合成しています。
窓の外に桜島がみえているみたいでしょ？（楽♪）

ちなみにちなみに大元は↓こちら