My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

【CSS3】transparent で右向き三角を表現する

f:id:sntkk3:20160411101626j:plain

CSSで右向き三角ボタンを作る

transparentを使って下のボタンを作ってみました

f:id:sntkk3:20170717135833p:plain


ECサイトなどに使えそうなボタンです。
備忘録として、ソースを記載します。


[ソース] html

<a href="#" class="see_detail">詳細を見る</a>


[ソース] css

a.see_detail {
  width: 160px;
  font-size: 16px;
}
.see_detail::before {
  content: "";
  /* width: 0; */
  /* height: 0; */
  border: 10px solid #fff;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  /* left: 5px; */
  margin-top: 5px;
  display: inline-block;
}
.see_detail {
  font-weight:bold;
  text-decoration:none;
  color: #FFF;
  font-size: 12px;
  display:block;
  text-align:center;
  vertical-align: middle;
  margin-top: 70px;
  padding:6px 0 8px;
  background-color:#01991a;
  border-radius:6px;
  float: right;
}

[捕捉解説]このしくみについて

以下で使われている「transparent」について

border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;


透明を意味する「transparent」という言葉通り、
transparentには、対象を透明化するという機能があります。


今回のような図形の場合、
下図のように、上(top)、下(bottom)、左(left)、右(right) 4つの三角形が存在するものと考えます。

f:id:sntkk3:20170717150900p:plain

この時、それぞれの三角形はborderで表されているものとします。
この考え方から、
右向き三角形を作るには、左側の三角形のみを残す。
つまりは、それ以外のtop、right、bottomを消す(透明化)する必要があります。
そのため、結果として、以下のようなコードになります。

border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;

【近況】 Webデザイナーとして転職しました

2017年より、広告代理店勤務、Webデザイナーとして新たな一歩を踏み出しました。

職業訓練校でのWeb制作科卒業後から2年半、
その間はなかなかWebデザイナーとしての就業の機会が得られず、訓練校前と同様、システム開発の仕事に携わっていました。
(Web制作については、その間、独学を続けながら、個人で受託したりしておりました。)

 

気長に機会を待った甲斐あり、これでようやくフルタイムでWeb制作に携わることができます。

Web制作での日々の学び、気づきなどをシェアしていこうと思います。
どうぞよろしくお願いいたします。

 

(2014年7月に制作科受講終了以来、
その後の活動は、「まだまだ続くよ…」でと告知していましたが、
やっぱり引き続きこちらで続きを投稿します。

どうぞよろしくお願いいたします。)

MACにGoogle日本語入力を入れてみました

f:id:sntkk3:20170718224122p:plain

Google日本語入力をインストールしました。

 

以下、手順を記載します。

1. 以下サイトより、プログラムファイルをダウンロードします。www.google.co.jp

 

2. 以下、ダウンロードしたプログラムファイルをダブルクリックし、インストーラを起動します。
GoogleJapaneseInput.dmg

 

3. プログラム実行確認画面で「続ける」をクリックします。

 

4. インストール先を指定します。(通常はそのままでも可)
アプリケーションの登録が開始されます。
f:id:sntkk3:20151123094706p:plain

 

5. パスワード入力を求められたら入力し、「Google日本語入力の有効化」で「有効」にします。
f:id:sntkk3:20151123094721p:plain

 

6. インストールが完了します。
f:id:sntkk3:20151123094740p:plain

Surface 3 購入: 感想 / Surfaceのファンクションキーを使いやすく設定する

f:id:sntkk3:20151212115047j:plain

Surface3を購入しました。

まずは、その感想です。

 

1) 感想 

[ 良かったこと ]
タブレットとPCの両方の性質を兼ね備えていること。
スペックがそんなに良くなくても、意外とWeb制作にも使えてます。
軽い!
薄い!
キーボードはなかなか快適!

 

[ イマイチだったこと ]

1. タッチパネルの反応
タッチパネルの反応は今ひとつ( iPhone, iPad 程に反応は良くない)
キーボードが使えるので、さして問題なく使えているが、タッチパネルだけだとストレス感じそう。

 

2. 電池の消費
電源をもっていない時に限り、スリープ状態だったSurface上で勝手にSecure Boot Control 機能が働いて電池消費しており、いざ使おうとした時に電池残量わずかになっていて焦ることしばしば。
この機能をオフにすれば良いかもしれないが、それはそれで心配だし、困ります。

 

3. Kindle ソフト
これだけの画面サイズがあれば、電子書籍リーダーとして、iPadの代用になると思ったのに。。。
なぜ、大幅に余白がぁ~!!
なので、書籍画面がちっちゃい!この点は大いに残念。ぜひ改善を求む。

 

2) Surfaceのファンクションキーを使いやすく設定する

Surfaceのファンクションキーは、初期設定のままだと通常のWindowsと同様にファンクションキーが機能してくれません。

ということで、以下記事を参考に、ファンクションキーを使いやすく設定してみました。

 

【参考記事】

Surface Pro 2のキーボードでハマりやすい点「日本語入力時にファンクションキーで変換しづらい」(Type Cover) :
http://dtp.jdash.info/archives/Surface-Pro-2-Type-Cover-Function-Key

 

【本】PHPによるWordPressカスタマイズブック―3.x対応

WordPressをカスタマイズするにあたり、
特に、カスタム投稿タイプ、カスタムフィールドの利用について参考にしたくてこの本を購入しました。

購入時点ですでに絶版のため、中古本での購入。
WordPressのバージョンも少し古かったため、Custom Post Type UI(プラグイン)の画面もその時点の実際の画面と異なる点があるなどして、最初少々戸惑った点はありましたが、内容的にはとても充実しています。

WordPressの基本としては、バージョンを重ねても今のところ、大きく異なる点はないと思われるため、多少のUIに違いが出てきたとしても、今後も長く役立つ一冊だと思います。
※サンプルファイルのダウンロード特典が利用可能なのも嬉しい点です。

WordPressを自由にカスタマイズしていくうえで、知っておくべきWordPressの特徴、しくみが丁寧に説明されています。

価格についても、この本の場合、中古本となるため、探せば1,000円以下での購入が可能。

なので、かなりお値段以上、
WordPressのカスタマイズをしてみたいという方には、おすすめの一冊です。

2015/02/24 Excelのセル内改行をいっぺんに取り除く方法は?

【本日のWeb制作 学習メモ】

ひとつ前の記事の関連となりますが、
phpMyAdminCSVインポートがうまく行かなかった原因の一つに、
元データとして受け取っていたExcelシートにセル内改行が含まれていたという問題がありました。

数百件に及ぶデータの中からセル内改行を一つ一つ見つけては修正、なんてことはとてもやっていられませんでした。

では、いっぺんにセル内改行を取り除く方法は?

 

Excelのセル内改行を削除するには

[Ctrl] + [J] キーで OK

1. [Ctrl] + [H] キーで、「検索と置換」ダイアログを表示

 検索する文字列: [Ctrl] + [J] と入力
 置換後の文字列: 何も入力しない

2. 「すべて置換」ボタンをクリック

これでシート内のセル内改行はすべて削除されました。

 

関連記事

myweb-way2.hatenadiary.jp

2015/02/23 phpMyAdminを用いてCSVファイルでインポートする方法

【本日のWeb制作 学習メモ】

phpMyAdminを用いてCSVファイルでインポートする方法(覚書)


CSVデータの読み込みに意外と手こずってしまったので、、、ということでの覚書です。

いろんなサイトを参考にさせていただきながら試行錯誤した何とか成功。

なお、実際にうまく行った際の設定は、こんな感じ
f:id:sntkk3:20151123174732p:plain





以下参考にさせていただいたサイト一覧です。


参考サイト一覧

phpMyAdminで、csvデータをインポートする方法。 | Wataame Frog :
http://wataame.sumomo.ne.jp/archives/4613

wataame.sumomo.ne.jp



phpMyAdminCSVファイルのインポート | PHPの種 ブログ :
http://www.php-seed.net/blog/archives/39


phpMyAdminCSVファイルをインポートする手順 | メモヲカキコム :
http://memo.wokaki.com/import_csv_phpmyadmin/



Excelから出力したCSVファイルをphpMyAdminからインポートする - ITコンサルタント成長録 :
http://d.hatena.ne.jp/hosikiti/20090130/1233316430

d.hatena.ne.jp


phpmyadmin の インポートの方法 :
http://tsuttayo.jpn.org/bbs/read.php?FID=2&TID=96


phpMyAdmin CSVファイルをインポートする -でじうぃき :
http://onlineconsultant.jp/pukiwiki/?phpMyAdmin%20CSV%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B


phpMyAdminを用いてCSVファイルでインポートする方法(覚書) | KSデザイン工房の日々 :
http://ks-d-k.com/ks_blog/?p=266


EXCELで作成したデータをmySQLに取り込もうと、csv形式で保存し… - 人力検索はてな :
http://q.hatena.ne.jp/1295871030



関連記事

myweb-way2.hatenadiary.jp

2014/12/28 jQueryのプラグイン「DataTables」を使ってみた

DataTables とは、

HTMLテーブルをとっても高機能にしてくれる jQueryプラグイン

たとえば、以下のような機能がとっても簡単に実装できます。

  • テーブルヘッダにソート機能を付け、列ソートができます。
  • フィルター機能で、検索がとっても簡単にできます。
  • 1ページに表示する行数を選択でき、指定行以降は、ページングで表示することが可能です。

(作成例) こんな感じになります 
f:id:sntkk3:20151115214723p:plain

(すべてHTMLで作成しているテーブルはもちろん、SQLデータベースから読み込んでいるテーブルにも使えます。)


プラグインの入手先は、ここ
http://datatables.net/index
です。

各種パラメータを設定することで、いろいろと便利にカスタマイズが可能です。

設定の仕方には、以下ページがとっても参考になります。

参考サイト

HTML テーブルをナイスに扱う DataTables 〜導入編〜 - A Memorandum :
http://etc9.hatenablog.com/entry/20121029/1351513986

 

ちなみに、課題練習で、大量データを扱うテーブルを作成する際、
このサイトに紹介していただいているようなサンプルCSVデータは、助かります。

役立つサイト

vallog: 無料CSVデータ :
http://valvallow.blogspot.jp/2010/04/csv.html

2014/09/10 RSSフィードをサイトに実装する

RSSフィードを簡単にサイトに表示するには

Google Feed APIを使って、簡単にRSSフィードをサイトに表示する方法

Google Feed APIを使うと、簡単にRSSフィードをサイトに表示することができると知りました。
試しに、自身のブログサイトからfeed用URLを取得し、やってみました。



[コード]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
    var feed = new google.feeds.Feed("http://times-diary.hatenablog.com/feed");
    feed.setNumEntries(10);
    feed.load(function(result) {
        if (!result.error) {
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                $("#ret").append(
                    $("<div>").append(
                        $("<a>").attr("href", entry.link).text(entry.title))
                );
            }
        }
    });
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="ret"></div>
</body>
</html>


[表示結果]
f:id:sntkk3:20151115204100p:plain


※なお、はてなブログの場合、自身のブログサイトURLに、/feed あるいは、/rss を追加するとそのままフィード用URLとなることも知りました。
 feed は Atom配信フォーマット
 rss は、RSS2.0フォーマット
との違いなんだそうですが、どちらを使っても表示上は変わりませんでした。

 参考:
  はてなブログRSS配信URLは2つあった! - tarのブログるっ by @tarVolcano :
  http://tar.blogru.me/entry/2014/04/03/024738



参考サイト

Google Feed API Developer's Guide  |  Google Feed API  |  Google Developers :
https://developers.google.com/feed/v1/devguide

JavaScript - Google Feed APIを使おう - Qiita :
http://qiita.com/sassy_watson/items/e3797b8719c51d25c190

Google Feed API】フィードを読み込む(お手軽版) | Tips Note :
http://www.tam-tam.co.jp/tipsnote/javascript/post5010.html

JavaScript】コピペで簡単!!Google Feed APIの使い方 | Web制作会社スタイル :
http://www.hp-stylelink.com/news/2014/05/20140508.php


その他 参考記事

簡単!RSSXML)を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | Stronghold :
http://zxcvbnmnbvcxz.com/jquery-google-feed-api/

2014/09/05 本日のWeb道 学習メモ

【本日のWeb制作 学習メモ】

  1. MACを使いこなす(ファンクション編)
  2. jQueryを使ったWebページ制作
  3. mysql 文字化け対応

 

1. MACを使いこなす(ファンクション編)

WindowsからMACを使うようになって困ったこと

Windowsでは普通に使えていた入力変換ができない!?

Windowsでは、以下のような文字変換機能が使えて便利でしたが、
MACでは、そうはいかない。

Windowsのファンクションキーでの変換機能》
[F6]キー: ひらがな変換
[F7]キー: カタカナ変換
[F8]キー: 半角英数変換
[F9]キー: 全角英数変換
[F10]キー: 半角英数変換

 

Windows同様に、文字入力を簡単にするにはどうすれば!?
MACを使い始め、意外とストレスを感じる点でした。

ちなみに、MACのファンクションキーは、デフォルトではこんな感じ。

F1 - ディスプレイの輝度を下げる
F2 - ディスプレイの輝度を上げる
F3 - Mission Control
F4 - Launchpad
F5 - キーボードの輝度を下げる
F6 - キーボードの輝度を上げる
F7 - 前のトラック
F8 - 再生/一時停止
F9 - 次のトラック
F10 - 消音
F11 - 音量を下げる
F12 - 音量を上げる

参照記事:
FunctionFlip 2.2.3 - ファンクションキーの振る舞いをキーごとに設定 :
http://www.macsoft.jp/posts/view/1001

 

ただ、Windows同様の変換機能は、[Fn]キーを同時に使えばできることが分かりました。
また、「環境設定」で、「F1,F2などすべてのキーを標準のファンクションキーとして使用」にチェックを入れることで、[Fn]キーを押さなくても、Windows同様にファンクションキーを使えることも判明。

参照:
Windowsからmacへの移行で困った事 :
http://winmac.iinaa.net/page1.html

Macのファンクションキー設定をWindowsに合わせて標準の動作に変更する方法 :
http://www.starlod.net/mac-function-key.html

 

おまけ:
Macの英数・カタカナ変換はファンクションキーではなくControlキーを使う|mattintosh note (跡地) :
http://mattintosh.blog.so-net.ne.jp/2012-07-15_mac_english_katakana_convert

 

ちなみに、調べてるうちに、以下の様な便利なソフトがあることも分かりました。

[便利なフリーソフト]
FunctionFlip 2.2.3 (E)
http://www.macsoft.jp/posts/view/1001


2. jQueryを使ったWebページ制作

jQuery使用時 - ミスの原因

WebページにjQueryを挿入して正常に動作しないようなら、以下の点を確認してみる。

  • スペルミス
  • 記号(かっこ閉じの位置)
  • 重複かっこ
  • jQueryライブラリ 重複
  • インターネットに接続できているか (jQuery web参照時)

 

3. mysql 文字化け対応

XAMPP環境でMySQLによるDBの値が文字化けという現象発生。
以下の対処法があることを知りました。

 

[対応方法]
 3.1. my.cnf を編集する

 

参照記事:
MySQLで文字化けしたときの対処法 - Qiita :
http://qiita.com/WizowozY/items/5d7224be92aa8364a42a


[対応方法]
 3.2. php.ini を編集する

参照記事:
XAMPP | PHPMySQLで文字化け :
http://ortk.main.jp/blog/?p=67

2014/08/08 ショッピングサイトを作る

【本日のWeb制作 学習メモ】

ショッピングサイトを作ってみる

PHPの演習として、ショッピングサイトを作ってみます。

作成ページ(ページ遷移)は以下の通り
1.スタッフ追加画面
2.入力チェック画面
3.スタッフ追加完了画面
4.スタッフ一覧画面
5.スタッフ ログイン画面
6.ログイン チェック画面
7.ログアウト画面

【演習】ショッピングサイトを作る

以下、1.~7.のページを作成する

1.スタッフ追加画面

staff_add.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<h1>スタッフ追加</h1>
<form method="post" action="staff_add_check.php">
スタッフ名を追加してください
<input type="text" name="name"><br>
パスワードを入力してください
<input type="password" name="pass"><br>
パスワードをもう一度入力してください
<input type="password" name="pass2"><br>
<input type="button" onClick="history.back()" value="戻る">
<input type="submit" value="OK">
</form>
</body>
</html>

 

2. 入力チェック画面

staff_add_check.php

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>

<?php
	$staff_name = $_POST['name'];
	$staff_pass = $_POST['pass'];
	$staff_pass2 = $_POST['pass2'];

	$staff_name = htmlspecialchars($staff_name);
	$staff_pass = htmlspecialchars($staff_pass);
	$staff_pass2 = htmlspecialchars($staff_pass2); 

	if(!isset($staff_name)){
		echo "スタッフ名が入力されていません";
	}else{
		echo "スタッフ名:" . $staff_name . "<br>";
	}
	
	if($staff_pass==''){
		echo "パスワードが入力されていません";	
	}

	if($staff_pass != $staff_pass2){
		echo "パスワードが一致しません";	
	}
	if($staff_name == '' || $staff_pass == '' || $staff_pass != $staff_pass2 )
	{ echo '<form>';
	  echo '<input type="button"' . 'onClick="history.back()"' . 'value="戻る">';
	  echo '</form>';
	}else{
		$staff_pass = md5($staff_pass);
		echo '<form method="post"action="staff_add_done.php">';
		echo '<input type="hidden" name="name" value="'.$staff_name.'">';
		echo '<input type="hidden" name="pass" value="'.$staff_pass.'">';
		echo '<input type="button"' . 'onClick="history.back()"' . 'value="戻る">';
		echo '<input type="submit" value="OK">';
		echo '</form>';
	}

?>
</body>
</html>

 

3. スタッフ追加完了画面

staff_add_done.php

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{
	$staff_name = $_POST['name'];
	$staff_pass = $_POST['pass'];

	$staff_name = htmlspecialchars($staff_name);
	$staff_pass = htmlspecialchars($staff_pass);
//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'INSERT INTO staff(name, password) values(?,?)';
	$stmt = $dbh -> prepare($sql);
	$data[] = $staff_name;
	$data[] = $staff_pass;
	$stmt -> execute($data);
//DB切断
	$dbh = null;

	echo $staff_name;
	echo 'さんを追加しました。';
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
<a href="staff_list.php">戻る</a>
</body>
</html>

 

4.スタッフ一覧画面

staff_list.php

<!DOCTYPE html>
<html>
<head>
<title>スタッフ一覧</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{

//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'SELECT name FROM staff WHERE 1';
	$stmt = $dbh -> prepare($sql);
	$stmt -> execute();
//DB切断
	$dbh = null;

	echo 'スタッフ一覧<br>';

	while(true){
		$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
			if($rec == false){
				break;
			}
		echo $rec['name'];
		echo '<br>';
	}
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
<a href="staff_list.php">戻る</a>
</body>
</html>

 

5.スタッフ ログイン画面

staff_login.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>スタッフ ログイン</title>
<meta charset='utf-8'>
</head>
<body>
<h1>スタッフ ログイン</h1>
<form method="post" action="staff_login_check.php">
スタッフコード<br>
<input type="text" name="code"><br>
パスワード<br>
<input type="password" name="pass"><br>
<input type="submit" value="ログイン">
</form>
</body>
</html>

 

6.ログイン チェック画面

staff_login_check.php

<!DOCTYPE html>
<html>
<head>
<title>スタッフ ログインチェック</title>
<meta charset='utf-8'>
</head>
<body>

<?php
try{
	$staff_code = $_POST['code'];
	$staff_pass = $_POST['pass'];
	//var_dump($_POST);
	//exit;

	$staff_code = htmlspecialchars($staff_code);
	$staff_pass = htmlspecialchars($staff_pass);

	$staff_pass = md5($staff_pass);

//DB接続
	$dsn = 'mysql:dbname=shop;host=localhost';
	$user = 'root';
	$password = "itnabi104";
	$dbh = new PDO($dsn,$user, $password);
	$dbh -> query('SET NAMES utf8');
//DB問い合わせ
	$sql = 'SELECT name FROM staff WHERE code=? AND password=?';
	$stmt = $dbh -> prepare($sql);
	$data[] = $staff_code;
	$data[] = $staff_pass;
	$stmt -> execute($data);
//DB切断
	$dbh = null;

	$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

	if($rec == false){
		echo 'スタッフコードかパスワードが違います。';
		echo '<a href="staff_login.html">戻る</a>';
	}else{
		header('Location: staff_list.php');
	}
}
catch (Exception $e){
	echo 'ただいま障害が発生しております。';
	exit(); 
}
?>
</body>
</html>



7.ログアウト画面

staff_logout.php

<?php
  $_SESSION = array();
  if(isset($_COOKIE[session_name()]) == true){
  	setcookie(session_name(),'',time()-42000,'/');
  
  }
  @session_destroy();
?>
<!DOCTYPE html>
<html>
<head>
<title>ログアウト</title>
<meta charset='utf-8'>
</head>
<body>
ログアウトしました。<br>
<a href="staff_login.html"></a>
</body>
</html>

2014/08/07 ロジックとデザインの分離(送信した値を出力)

【本日のWeb制作 学習メモ】

[PHP] ロジックとデザインの分離

PHPをHTMLに組み込む際、ロジックとデザインを分離してコーディングするように配慮する。

理由:
チームで分業の場合など、WEBデザイナーPHPを理解できるとは限らない。
ソースのわかりやすさも考え、なるべくロジックとデザインは分離する。

 

index.html
入力値を送信

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<form action="ex2.php" method="POST">
<input type="text" name="t1">
<input type="submit" name="送信"> 
</form>
</body>
<html>



送信先ページで値を出力
ex2.php(修正前)

<?php
///税込の金額を表示
function t($money){
  echo $money * 1.08;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<?php 
echo t($_POST['t1']); 
?>
</body>
</html>



ex2.php(修正後)

原則bodyの中には出力結果のみとする
(ロジックとデザインの分離)

<?php
//税込の金額を表示
function t($money){
  return $money * 1.08;
  //echo $money * 1.08;
}
//$moneyへ税込金額を代入
$money = t($_POST['t1']);
?>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset='utf-8'>
</head>
<body>
<h1>
<?php echo $money; ?>
</h1>
</body>
</html>



参考サイト
【ロジックとデザインの分離について】

こちらのサイトにも説明があります。
ブログを作る - PHP入門 - ポンクソフト :
http://ponk.jp/php/basic/blog

Smarty - ロジックとデザインの分離を考えるならこんなテンプレートエンジンを使うのも一つです

テンプレートエンジンでロジックとレイアウトを分離する(Smarty)[PHP] - Build Insider :
http://www.buildinsider.net/web/bookphplib100/040


【プログラム未経験からECサイトを作ってみるなら】

以下の2サイトが参考になるかも

codezine.jp

ブログを作る - PHP入門 - ポンクソフト

 

その後のWeb制作活動について

2014年7月に制作科受講終了以後の活動について、

その後の活動は、「まだまだ続くよ…」でと告知していましたが、
やっぱり引き続きこちらで続きを投稿します。

引き続きよろしくお願いいたします。

2014/07/25 修了日

修了日を迎えて…

6ヶ月に及ぶWeb制作科の授業が終了しました。

毎日9時から14:25までの5コマの授業、
開始当初は結構長いと思われた6ヶ月は、始まってしまえば、あっという間の6ヶ月でした。


修了後、Web制作に関わるのか、全然違う職場に行くのかは、人それぞれ。
どちらかと言うと、Webの現場に行かない修了生の方が半分以上を占めるのが現実です。
(少なくとも、今期生については、そうでした。)

私自身も、現時点でWeb制作会社への就業目処は立っておりません。
(とりあえず、翌月から3ヶ月は、ここの会社説明会に来ていた制作会社で、
より専門的なWeb制作の勉強をさせていただくことになっておりますが。
なので、その間に、自分が納得できる、次の就業先を決める予定です。)


それでも、この間、この場で学んだことは本当に大きかった。

Webデザインからプログラムまで、毎日てんこ盛り、
この年にして、本当に勉強漬けの忙しい日々でした。

たとえ、今後Web制作の仕事には関わらなくとも、
デザインの考え方や、プログラム的思考など、この場を通じて培った知識・考え方は、
今後の仕事や生活に、大いに活きるものと実感しています。

国の制度により与えられた、非常にありがたくて、貴重な機会、
ただし、機会は与えていただいても、自分で努力をしなければ何も得られないのも事実。

この期間が、たったの6ヶ月になるのか、その後の自分の人生を変える、かけがえのない6ヶ月になるのかは、
本当に自分次第であると思いました。


Web制作科修了に伴い、
このブログは、このページにて終了となりますが、引き続き、Web制作に関する学習記録は続けます。

以後、「まだまだ続くよ My Web道」にてブログ続行予定です。

私の奮闘は、まだまだ続きます。

※ 当サイトはアフィリエイト広告を利用しています