スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト内で複数のリンク色パターンを作る(CSS)

本日はリンクの色について
通常時、訪問済み、マウスオーバー時、クリック時と色を変えられますが、
メニューとナビではリンク色を変えたい場合。
つまり複数のパターンのリンク色を設定したい場合のCSS記述方法を紹介します。

通常CSSファイルに以下のような記述をするとします。

a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }

これだと、すべてのリンク色に反映されてしまいます。
例えば
通常のリンク色を設定した上で、<div id="navi">の中に貼られているリンク色だけは個別で設定したい場合は、
以下の様にCSSを記述します。

a:link { color: #000000; }
a:visited { color: #800000; }
a:hover { color: #191970; }
a:active { color: #ff0000; }

#navi a:link { color:#CCC; }
#navi a:visited { color:#CCC; }
#navi a:hover { color:yellow; }
#navi a:active { color:red; }

ポイントは、a: の前に #div名を付ける事により、下4行はdiv指定でリンク色を設定できるという事です。




スポンサーサイト

dreamweaver テンプレート HTMLの外側も共通部分に変える

dreamweaverの便利機能のひとつであるテンプレート


htmlで記述されたコードであれば通常通り設定をして編集可能領域を設定すれば良いのですが、


htmlの前、つまりHTMLタグの外側にPHPなどのコードを記述した場合
外側部分は、共通部分にならず編集可能領域となってしまいます。

その為、テンプレートの更新等した時にテンプレートを基に作成されたサイトには
外側部分の変更内容が反映されなくなります。


HTMLタグの外側も共通部分として指定する方法

<HEAD>~</HEAD>の間に以下のコードを記述します。


<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->


これでHTMLの外側のコードも共通部分となります。



パソコンサイトとスマートフォンサイトの違い

これからスマートフォンサイトの制作についても勉強していこうと思います。
まずはじめに、パソコンのサイトとスマートフォンのサイトで何が違うのか
まとめてみました。

スマートフォンの種類
大きく分けて以下の二つにわけられます。
iOS (機種:iPhoneシリーズ)
Android (iPhone以外の機種の大半)

ディスプレイの大きさ
パソコン 15~24インチ
スマートフォン 3~5インチ

スマートフォンサイトは画面サイズが小さいので、無駄な記事を省き
伝えたい事をストレートにわかりやすく表現する必要があります。

解像度
パソコン 72~69dpi
スマートフォン 160~330dpi

操作性
パソコン : マウスでの操作
スマートフォン:タッチ

マウスの場合、向かう先が画面上に表示される為、
マウスがボタンの上に来たらという考え方ができますが、
タッチの場合は、タッチするまで指がどこに向かっているか判定できません。
その為、リンクである事を視覚的に表現する必要が出てきます。
タッチの場合は、指の太さがある程度ある事を考慮し作成する必要があります。

接続環境
パソコンは、ADSLや光回線に安定接続されていますが、
スマートフォンは基本的に携帯電話ですので、携帯電話回線を使用する為
回線が不安定、時には途切れてしまう事もあります。
通信速度の事を考えた構築をする必要があります。

使用ブラウザ
パソコン:InternetExprplorer、FireFox、GoogoleCrome等
スマートフォン:Safari,GoogleCrome等

パソコンの方が歴史が長い為、古いブラウザを使用したり色々なブラウザを使用する場合があり
新しい規格を採用しづらい面があります。
スマートフォンはある程度新しい規格を採用している為、新しい規格でも対応できます。

PHP DBからデータ取得し テーブルに表示させる

DBからデータを取得し、HTMLのテーブルに表示します。
通常のHTMLでテーブルを作成する場合、以下のような感じになります。

<table>
 <tr>
  <th>ID</th>
  <th>メーカー</th>
  <th>商品名</th>
  <th>価格</th>
 </tr>
 <tr>
 <td>1</td>
 <td>Panasonic</td>
 <td>DVDレコーダー</td>
 <td>59800</td>
 </tr>
</table>


これをDBから取得したデータから作成する場合、
以前にも学習したselect文で、取得し
テーブルの<TD>と</TD>の間に取得したデータを挿入していきます。
データを出力をループする事により、取得したデータ件数だけ行が追加されるようになります。
テーブル:shop_item
項目: ID,maker,item_name,priceの4項目。


コード記述例は以下の通り
DB接続部分は省略し、dbconnect.phpに実行させます。
dbconnect.phpの詳細は過去の記事を参照

<?php
require('dbconnect.php');

$recordset = mysql_query('select * from shop_item order by id asc');
?>

<html>



<body>

<table width="80%" border="1">
 <tr>
  <th scope="col">ID</th>
  <th scope="col">メーカー</th>
  <th scope="col">商品名</th>
  <th scope="col">価格</th>
 </tr>
 <?php
 while($table = mysql_fetch_assoc($recordset)) {
 ?>
 <tr>
  <td><?php print(htmlspecialchars($table['id'])); ?> </td>
  <td><?php print(htmlspecialchars($table['maker'])); ?> </td>
  <td><?php print(htmlspecialchars($table['item_name'])); ?> </td>
  <td><?php print(htmlspecialchars($table['price'])); ?> </td>
 </tr>
 <?php
 }
 ?>
 </table>
</body>
</html>

今回のポイントは、HTMLとPHPが入り混じっている点です。
少し見づらいですが、慣れれば大丈夫でしょう。
<>や()の誤入力で数などを間違えるとまったく想像もつかない動きになる可能性があるので注意が必要です。
<tr>から</tr>をwhile文でくくる事により、データがある分だけ行を追加できるようになります。

実行結果はこちら


20131111.jpg一覧表が表示されました。




ブログランキング1位をいただきました。

このブログはブログランキングに参加させていただいているのですが、

学校・教育 / その他 のカテゴリで1位をいただきました。

ありがとうございます。

20131110.jpg


ただ、よく見たら コンピュータ/Webサイト作成というカテゴリがありましたので、

そちらに登録し直しました。

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






PHP フォームに入力した内容をテーブルに登録

今度はフォームに入力した内容をテーブルに登録できるようにします。

まずは、入力フォームを作成します。
フォーム部分のみを抜粋したコード例です。

input_form.html

<p>登録するユーザの情報を入力してください。</p><br />
<form action="insert.php" id="input_form" name="input_form" method="post">
  <dl>
  <dt>
    <label for="user_id">ID</label>
  </dt>
  <dd>
    <input name="user_id" type="text" id="user_id" size="10" maxlength="20" />
  </dd>
  <br />
  <dt>
    <label for="password">パスワード</label>
  </dt>
  <dd>
    <input name="password" type="text" id="password" size="35" maxlength="255" />
  </dd>
  <br />
  <input type="submit" value="登録する" />
</form>


続いて、入力フォームに入力した内容をテーブルに登録するコードです。
insert.php

<?php
require('dbconnect.php');

$sql = sprintf('INSERT INTO login_check SET id="%s", password="%s" ',
 mysql_real_escape_string($_POST['user_id']),
 mysql_real_escape_string($_POST['password'])
);
mysql_query($sql) or die(mysql_error());
?>

<html>
<head>
<title>登録</title>
</head>
<body><h1>ユーザ情報登録</h1>
<p>ユーザー情報をテーブルに登録しました</p>
</body>
</html>

今回のポイントは、2つあります。
フォームから受け取る際に使用する mysql_real_escape_string
SQL文に代入する際に使用する "%s"


1つ目のmysql_real_escape_stringは
入力された内容が攻撃目的であったり、誤った内容で入力された場合に
影響を受けない様、サニタイズ(無害化)する為に用意されているファンクションです。
データを受け取る際にまずサニタイズしてからSQL文に代入していきます。


2つ目はSQL文に代入する際に使用している
"%s"これは 文字列である事を意味しています。
ちなみに数値型の場合は、 %dとなります。


文字型の場合  id="%s" (stringのs)
数値型の場合 id=%d    (digitのd)


%sや%dは "sprintf" という命令に使用されます。





PHP DB接続プログラムを共通で使用する。

DBを使用するには、必ずDB接続コマンドを記述する必要があります。
しかし毎回同じコマンドを入力するのなら、共通化すべきですね。

connectのコマンドはdbconnect.phpとして作成し、
毎回このプログラムを呼ぶだけという形にします。



1.まず接続コマンドを記述したプログラムを作成します。
例) dbconect.php


<?php
mysql_connect('designcc.info','test_user','password123') or die(mysql_error());
mysql_select_db('login') or die(mysql_error());
mysql_query('SET NAMES UTF8');
?>


続いて、
接続を要するプログラムを記述する際にdbconnect.phpを呼ぶプログラムを作成します。


例)test.php

<?php
require('dbconnect.php');


$recordset = mysql_query('select * from user_info');
$data = mysql_fetch_assoc($recordset);
echo $data['id'];
?>


共通化すればDB接続のコマンドは require('dbconnect.php'); のみで良いのですっきりします。
しかもパスワード等の変更が発生した場合でも、基のdbconnect.phpを変更すれば
すべてのプログラムに反映される為、管理もしやくて一石二鳥です。

PHPでデータベースのデータを操作する(MySQL)

前回、DB接続ができるようになりましたので、いよいよDBを操作していこうと思います。


DBのテーブル設定等は省略します。

まず以下のようなテーブルを用意しました。
user_infoテーブル
idとpasswordという2つのフィールドが存在します。

まずは、user_infoテーブルにid、test_user password、testというデータを挿入してみようと思います。

<?php
mysql_connect('designcc.info','test_user','password123') or die(mysql_error());
mysql_select_db('login') or die(mysql_error());
mysql_query('SET NAMES UTF8');

mysql_query('insert into user_info set id="test_user",password="test" ') or die(mysql_error());
echo 'データ挿入完了';

?>

このプログラムを実行すると
以下の様に各フィールドにデータが挿入されました。

20131107.jpg



今度はデータを抽出してみましょう。
抽出は少し複雑になります。
まずselect文でDBからデータを取り出し、変数に格納します。
これだけではまだ使用できません。
その変数に格納されたデータをmysql_fetch_assocというファンクションを使用し
1件のデータを取り出す事でようやく使用できるデータとなります。

1.user_infoテーブルからすべてのデータを抽出
2.ファンクションを使用し、変数dataに格納
3.フィールド名を指定し表示

$recordset = mysql_query('select * from user_info');
$data = mysql_fetch_assoc($recordset);
echo $data['id'];


画面では

test_user

と一件のデータが表示されます。

この場合、データは最初の1件のみ表示されます。
$data = mysql_fetch_assoc($recordset);
echo $data['id'];
このコードを何度も記述すれば2件目、3件目が表示されます。
データがあるだけ表示させたい場合は、繰り返し文を使用します。

$recordset = mysql_query('select * from login_check');
while ($data = mysql_fetch_assoc($recordset)) {
echo $data['id'];
echo '<br>';
}


結果

test_user
guest
administrator
special_user

idに登録されているデータがすべて表示されました。





PHPを使用しMySQL(DB)に接続

DB接続をしてみましょう。
PHPを使用してMySQLに接続します。
DBはレンタルサーバを使用します。
PHPにはあらかじめ mysqlと接続する為のファンクション郡が用意されている為、
そのファンクションを使用し接続してみようと思います。

書式
mysql_connect('ホスト名','ユーザ名','パスワード') or die(mysql_error());

実際の記述例
<?php
mysql_connect('designcc.info','test_user','password123') or die(mysql_error());
echo '接続できました!';
?>

die()で処理を終了させます。
mysql_connectで接続に失敗した場合、途中で終了するという文になっております。

データベースはデータベーススペースを選ばなければ、データを操作できません。
以下の記述で loginというデータベーススペースを指定します。

mysql_select_db('login') or die(mysql_error());

このファンクションはmysql_connectとセットで覚えておきます。

続いて文字コード設定
データの入出力をする際に文字化けをするのを防ぐために文字コードを指定します。
ご利用のサーバ設定によって必要ない場合はもありますので、文字化けしないようであれば
省力しても構いません。

mysql_query('SET NAMES UTF8');

DBの接続ができましたので、次回からいよいよデータを操作していきます。

テスト表示される際IEは変更が反映されるのが遅い問題

dreamweaver等でコーディング中、テスト表示をさせた時に
IEにてブラウザを開いても変更した内容が反映されず、
Google Chromeで確認すると反映されているという問題があります。

この場合、IEの履歴データが残ってしまっている可能性があります。
IEでは次回サイトにアクセスした時に表示速度を上げる為、履歴情報を保持している模様です。
変更した内容が反映するまでにある程度の時間がかかっていると考えられます。

これは設定で簡単に変更できます。
方法は以下の通り

IEのメニューから
ツール - インターネットオプション - 全般タブ - 閲覧の履歴 で 設定ボタンを押します。

WEBサイトデータの設定画面 (画像はWin8)で
WEBサイトを表示するたびに確認する” にチェックを付けます。

20131104_1

これでもう一度確認してみてください。
変更内容が即反映されていると思います。




時間表示

時間の表示もよく出てくると思いますので、覚えておきたいですね。


現在は 16時 10分 53秒です

と表示させるには、以下の様に記述します。

printf('現在は ' .date('G時 i分 s秒') . 'です');
?>
















































































パラメータ 内容
Y 年4桁
y 年2桁
n
m 月:1桁時0を付ける
F 月:英語  January
M 月:英語3文字 Jan
j
d 日:1桁時0を付ける
w

曜日:数字  日曜=0

l 曜日:英語 Sunday
D 曜日:英語3文字 Thu
g 時:12時間単位
G 時:24時間単位
h 時:12時間単位 1桁時0付
H 時:24時間単位 1桁時0付
i 分 1桁時0付
s

秒 1桁時0付

u マイクロ秒




クオーテーションの使い分けとエスケープシーケンス

文字を表示する際に使用するクオーテーションについて


シングルクオーテーション '
ダブルクオーテーション "

この二つは基本的に自由に使い分ける事ができますが、
ひとつだけ注意事項があります。

例えばシングルクオーテーションで囲った中でシングルクオーテーションを使えないという点です。

例) B'zと表示させたい場合
  
print ('B'z');

これだとBのあとにクオーテーションがきてしまう為、シンタックスエラーになります。

こういう場合は、シングルとダブルをうまく組み合わせて使用します。

例) printf ("B'z")

どうしても記号などが混合してしまう場合は、もうひとつ回避方法があります。

記号の前に¥ 円マークをつける方法です。

例) printf ('B\'z');

これならシングルでもダブルでも気にせずに使用できます。


¥マークを使い表現できるエスケープシーケンスには、ほかにも以下のような種類があります。

¥t ←タブ
¥n ←改行
¥¥ ←¥
¥$ ←$
¥"  ←"
¥' ←'
¥r ←キャリッジリターン



PHPとは(開発環境のセットアップに必要なもの )Part2

PHPの開発環境をセットアップするにあたり
2つ方法があります。

まず1つ目はレンタルサーバーを使用する方法です。
最近のレンタルサーバーでは大抵PHPに対応しておりますので
プログラムを作成し、レンタルサーバーにアップロードすれば表示を確認する事ができます。

2つ目はレンタルサーバーの契約をしていない場合やインターネットに接続していない場合でも
ローカルPCで勉強の為の環境を作る事ができます。

前回の記事でも紹介させていただいた開発環境に必要な3つの要素
・WEBサーバ(Apache,IISなど)
・PHP
・MySQL
これらを一気に導入できるソフトがあります。

総合ソリューションであるXAMPPを使用する事で、
全てをまとめて簡単にインストールする事が可能です。

WEBから検索する場合は
Apache Friends Webサイトを開き、XAMPP for Windowsをダウンロード
今回は、最新の XAMPP Ver1.8.3をインストール

インストールできるもの一覧
Apache 2.4.4,
MySQL 5.6.11,
PHP 5.5.3,
phpMyAdmin 4.0.4,
OpenSSL 0.9.8,
XAMPP Control Panel 3.2.1,
Webalizer 2.23-04,
Mercury Mail Transport System v4.62,
FileZilla FTP Server 0.9.41,
Tomcat 7.0.42 (with mod_proxy_ajp as connector),
Strawberry Perl 5.16.3.1
Portable

対応OS Vista, 7, 8, 2008 & 2012.
(Windows XP or 2003 は不可)
 
Ver1.8.2なら Windows 2000, XPも対応しています。

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。