TOP

今回PHPの練習をするにあたっての準備もろもろを記載します。

今回のPHPの練習はワードプレスでのテーマ作成や既存テンプレートのプログラム側からのカスタマイズを行うにあたってのPHPプログラミングの基本的な部分を行っていきます。
通常のPHP講座とは重点レベルが違ってきますが、足りないとかんじた部分はご自身で学習を重ねてください。
教材は、このブログと講義時間の話しかないので、各自ノートなりブログへの投稿なりを行いつつ忘れないようにしてください。

準備

まずは、PHP用の練習ファイルを作りましょう！　→　DEMO（IE未対応）

絶対条件

index.phpは必ずつくりましょう！
サイトとして機能するようにしましょう！

必要条件

元となるPHPファイルをつくりましょう！

下記first.phpの見本を参考にしてください。

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ja"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>PHP 練習</title>
		<meta name="description" content="" />
		<meta name="author" content="ken mori" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <![endif]-->        
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

	</head>
	<body>
		<header>
			<h1>PHP 練習</h1>
		</header>
		<nav id="Gnuv">
			<ul>
				<li><a href="index.php">topIndex</a></li>
				<li><a href="first.php">変数・配列・文字列</a></li>
				<li><a href="#">link_2</a></li>
				<li><a href="#">link_3</a></li>
			</ul>						
		</nav>		
　　　　　　　　<div id="container">
			<div id="article_wrap">
				<article>
					<div class="sect_wrap">
						<section>
							<h2>section_title</h2>													
						</section>
					</div>
					<div class="sect_wrap">
						<section>
							<h2>section_title</h2>
						</section>
					</div>
				</article>	
			</div>
		</div>
		<footer>
			<p>
				&copy; Copyright  by your name lesson start from 07.29.13 to today 07.28.13    
			</p>
			<script src="js/autoHeight.js"></script>
			<script src="js/drive.js"></script>							
		</footer>
	</body>
</html>

<!DOCTYPE html>

<html lang="ja">

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</header>

<ul>

<li><a href="index.php">topIndex</a></li>

</ul>

</nav>

<h2>section_title</h2>

</section>

</div>

<h2>section_title</h2>

</section>

</div>

</article>

</div>

<p>

</p>

</footer>

</body>

</html>

first.phpのソースとなります。これを元にindex.phpを作成してく作業となりますが、それは後ほど。
sectionを作成して、練習結果を表示するスペースは必ず作成しましょう！！
HTML５をクロスブラウザー対応にできるようにしておきましょう！
ここまでのフォルダ構成
- php_p(今回のルートフォルダ）
  - first.php

style.cssを作りましょう！！

ワードプレスを意識しますので、下記のようにしましょう。
CSS

@import url("./common_css/nomalize.css"); @import url("./common_css/common.css");

1
2

@import url("./common_css/nomalize.css");
@import url("./common_css/common.css");
style.cssは今回は@importのみのファイルにしていきます。呼び出すファイル名は任意でかまいません。実際のCSSルールを記述するCSSファイルは、ルートフォルダ配下に作成しましょう！
ここまでのフォルダ構成
- php_p(ルートフォルダ）
  - first.php(必須）
  - style.css（必須）
  - common_cssフォルダ（名前は任意）
    - nomalize.css(使用は任意）　→　nomalize.css ダウンロード
    - common.css(レイアウトはご自由に）

jQueryを使用できるようにしておきましょう。

googleapiを利用してjqueryを使用できるようにしておきましょう。（下記は見本に記述済み）
XHTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

jsフォルダも作っておきましょう。

HTML5をクロスブラウザ対応にしておきましょう。（コード部分は見本に記述済み）

html5shiv.jsをダウンロードしおきましょう。　→　ダウンロードサイト（公式）
ｊｓフォルダを作成しhtml5shiv.jsを格納しておきましょう。

<!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ja"> <!--<![endif]-->

<html lang="ja">

XHTML



1
2
3

ここまでのフォルダ構成
- php_pフォルダ
  - first.php
  - style.css
  - common_cssフォルダ
    - nomalize.css
    - common.css
  - jsフォルダ
    - html5shiv.js

レイアウトやデザインをしましょう（自由課題）

私の見本を下記に示します。レイアウトに関しては、絶対条件・必要条件をみたしていれば、ご自由に。

common.css

body{
	background-color: #555;
}
div,nav,p,ul{
	margin: 0;
	padding: 0;
}

#container{
	background-color: #ffffff;
}
#article_wrap{
	width:80%;
	margin:auto;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	box-shadow: 10px 0 10px rgba(0,0,0,0.4);
	padding: 10px 20px;
	border-radius: 5px;
	behavior: url(PIE.htc);		 
}
#Gnuv{
	width: 83%;
	margin: auto;
	padding: 0 20px;
}

#Gnuv li{
	list-style-type: none;
	display: inline-block;
	margin:0;
	padding:10px;
	background-color: #fff;
	box-shadow: 5px 5px 3px rgba(0,0,0,0.7) inset;

	border-radius: 3px 8px 0 0;
	min-width: 5em;
	text-align: center;
	behavior: url(PIE.htc);
}
.sect_wrap{
	width: 95%;
	margin:auto;
	border-bottom: 1px dashed  #acc;
	margin-bottom: 5px;
}
header{
	background-color: #fff;
}
header h1{
	margin: 0;
	width: 80%;
	margin: auto;
	padding: 10px ;
}
footer{
	color:#fff;
	padding:  20px;
	text-align: center;
}

body{

background-color: #555;

}

div,nav,p,ul{

margin: 0;

padding: 0;

}

#container{

background-color: #ffffff;

}

#article_wrap{

width:80%;

margin:auto;

border-left: 1px solid #ccc;

border-right: 1px solid #ccc;

box-shadow: 10px 0 10px rgba(0,0,0,0.4);

padding: 10px 20px;

border-radius: 5px;

behavior: url(PIE.htc);

}

#Gnuv{

width: 83%;

margin: auto;

padding: 0 20px;

}

#Gnuv li{

list-style-type: none;

display: inline-block;

margin:0;

padding:10px;

background-color: #fff;

box-shadow: 5px 5px 3px rgba(0,0,0,0.7) inset;

border-radius: 3px 8px 0 0;

min-width: 5em;

text-align: center;

behavior: url(PIE.htc);

}

.sect_wrap{

width: 95%;

margin:auto;

border-bottom: 1px dashed #acc;

margin-bottom: 5px;

}

header{

background-color: #fff;

}

header h1{

margin: 0;

width: 80%;

margin: auto;

padding: 10px ;

}

footer{

color:#fff;

padding: 20px;

text-align: center;

}

記述中のbehavior: url(PIE.htc); とは、CSS３をIE対応させるためのCSS3 PIE: CSS3 decorations for IEを使用するためのものです。box-shadowは対応しますが、insetには対応していないようです。必要のな方はリンクよりダウンロードしてお使いください。

autoHeight.js

コンテンツの中身がすくなくてもフッターを常にウインドウの下部に来るように制御するjQueryプラグインです。必要ならお使いください。→autoHeight.js DL
使用方法は下記のとおり（私は、drive.jsというファイルの中で記述しています。）

$(function() {
	// コンテンツサイズ自動調整
	$("article").autoHeight({
		headerHeight: $("header").outerHeight() + $("#Gnuv").outerHeight(),
                 //微調整用の値を加算　（今回は４０PX分を足しています。）
		footerHeight: $("footer").outerHeight() + 40 
	});
});

$(function() {

// コンテンツサイズ自動調整

$("article").autoHeight({

headerHeight: $("header").outerHeight() + $("#Gnuv").outerHeight(),

//微調整用の値を加算　（今回は４０PX分を足しています。）

footerHeight: $("footer").outerHeight() + 40

});

ヘッダー（見本の場合はナビ部分をヘッダから外に出していますので、ナビ部分を足しています）の高さとフッタの高さをオプションで渡すと、コンテンツ表示領域を自動的に調整してフッタ部分がウインドウの下部にくるようにします。
autoHeight.jsとdrive.jsをフッターに記述している理由は、jQuery系のファイルをロードする場合はHTMLファイルの最後の方で行うとレスポンスが早くなるからです。

準備は以上です！！

月	火	水	木	金	土	日
« 8月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

TOP

準備

絶対条件

必要条件

jsフォルダも作っておきましょう。

レイアウトやデザインをしましょう（自由課題）

検証結果　const

最近の投稿

カテゴリー

アーカイブ

TOP

準備

絶対条件

必要条件

jsフォルダも作っておきましょう。

レイアウトやデザインをしましょう（自由課題）

検証結果 const

最近の投稿

カテゴリー

アーカイブ

タグ

検証結果　const