ファイルの情報を取得する０３

基礎 PHP WEB開発





☆★データーでの確認★☆

フルパスからディレクトリ名を取り出す


dirname 関数


  • dirname 関数を使うと、引数に指定したファイルのフルパス情報から「ファイル名＋拡張子」部分を除いたディレクトリ名だけを取り出せる。
  • ドライブ名からのフルパスを引数に指定した場合は「ディレクトリ名」だけが返され、相対パスのようにディレクトリ名から始まるパスを指定した場合は「ディレクトリ名」だけが返される。返り値として取得された文字列を処理で使う際は、末尾に「\」や「/」がついていないことに注意。



【 書式 】

《 PHPスクリプト 》

<?php
	// ファイルのフルパスを設定
	$fullpath = "\var\www\vhosts\webry.org\httpdocs\phpscript\script10_01\images\portfolio.jpg";
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは<br>";
	print dirname($fullpath) . "<br><br>";
	
	// ファイルの相対パスを設定
	$fullpath = "images/portfolio.jpg";
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは<br>";
	print dirname($fullpath) . "<br><br>";
	
	// 自分自身のPHPファイルのフルパスを設定
	$fullpath = __FILE__;
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは<br>";
	print dirname($fullpath) . "<br><br>";
?>
  • (注)：Windows版とLinux版では$fullpathに代入するパスの書式が異なる

ソースコード


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="同類のデーターを同じ変数でまとめて管理できる。配列の処理">
<meta name="keywords" content="PHPスクリプトの基本,配列の処理">
<meta name="viewport" content="width=device-width">
<title>PHPスクリプトの基本 | 配列の処理</title>
<link href="../css/reset.css" rel="stylesheet" type="text/css" media="all">
<link href="../css/style4.css" rel="stylesheet" type="text/css" media="all">

<!--[if lt IE 9]>
<script src="../js/html5shiv.js"></script>
<![endif]-->

</head>

<body>

<div id="container">

<header id="header">
<div class="header-top">
<div class="head-top">
<p><a href="http://d.hatena.ne.jp/webry/" target="_blank"><span class="icon">PHP</span></a>webサイト制作</p>
</div>
</div>
<div class="head">
<h1><img src="../images/img-set01/main_img.png" width="960" height="138" alt="Web開発のためのPHP-Webサイト制作-"></h1>
<p class="sec-title"><span>ファイルの情報を取得する</span></p>
</div>
</header>

<div id="contents">
<section class="col1">
<h1><span>1-3</span>フルパスからディレクトリ名を取り出す</h1>
<div id="post01" class="post">
<p class="point">dirname 関数</p>
<h2><a href="#post01"><span>dirname 関数</span></a></h2>
<div class="post_inner">
<div class="inner">
<ul>
<li>dirname 関数を使うと、引数に指定したファイルのフルパス情報から「ファイル名＋拡張子」部分を除いたディレクトリ名だけを取り出せる。</li>
<li>ドライブ名からのフルパスを引数に指定した場合は「ディレクトリ名」だけが返され、相対パスのようにディレクトリ名から始まるパスを指定した場合は「ディレクトリ名」だけが返される。返り値として取得された文字列を処理で使う際は、末尾に「\」や「/」がついていないことに注意。</li>
</ul>
</div>
</div>
</div>
</section>

<section class="col-code">
<div id="post02" class="post">
<h2><a href="#post02"><span>PHPのコードを表示</span></a></h2>
<div class="post_inner">
<div class="inner">

<pre>
<code>
	// ファイルのフルパスを設定
	$fullpath = "\var\www\vhosts\webry.org\httpdocs\phpscript\script10_01\images\portfolio.jpg";
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは&lt;br&gt;";
	print dirname($fullpath) . "&lt;br&gt;&lt;br&gt;";
	
	// ファイルの相対パスを設定
	$fullpath = "images/portfolio.jpg";
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは&lt;br&gt;";
	print dirname($fullpath) . "&lt;br&gt;&lt;br&gt;";
	
	// 自分自身のPHPファイルのフルパスを設定
	$fullpath = __FILE__;
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは&lt;br&gt;";
	print dirname($fullpath) . "&lt;br&gt;&lt;br&gt;";
</code>
</pre>

</div>
</div>
</div>
</section>

<section class="col2">
<div id="post03" class="post">
<h2><a href="#post03"><span>PHPでの表示</span></a></h2>
<div class="post_inner">
<div class="inner">
<div class="php">
<?php
	// ファイルのフルパスを設定
	$fullpath = "\var\www\vhosts\webry.org\httpdocs\phpscript\script10_01\images\portfolio.jpg";
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは<br>";
	print dirname($fullpath) . "<br><br>";
	
	// ファイルの相対パスを設定
	$fullpath = "images/portfolio.jpg";
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは<br>";
	print dirname($fullpath) . "<br><br>";
	
	// 自分自身のPHPファイルのフルパスを設定
	$fullpath = __FILE__;
	
	// ディレクトリ部分のみ表示
	print $fullpath . "　のディレクトリは<br>";
	print dirname($fullpath) . "<br><br>";
?>
</div>
<p class="notes">(注)：Windows版とLinux版では$fullpathに代入するパスの書式が異なる。</p>
</div>
</div>
</div>
</section>

<!-- /#contents -->
</div>

<footer id="footer">
<div class="foot clearfix">
<ul>
<li><a href="http://d.hatena.ne.jp/webry/" target="_blank">実践するWEBサイト制作 | webnote</a></li>
<li><a href="http://webry.dousetsu.com/images_deta/" target="_blank">はてなデーターの保管庫 | webrynote</a></li>
<li><a href="http://smart4me.net/webry/#!topPage" target="_blank">実践する為のWEBサイト情報 | webnote_mini(Smartphone専用サイト)</a></li>
</ul>
<ul>
<li><a href="http://webrynote.jimdo.com/" target="_blank">動画で確認するscript | FlashとJavaScrip</a></li>
<li><a href="http://webry.dousetsu.com/" target="_blank">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li>
<li><a href="http://webry.org/" target="_blank">PortFolio | webryの作品集</a></li>
<li><a href="http://www.tumblr.com/dashboard" target="_blank">Graphics board | 素晴らしいと思ったキャプチャーを貼っています。</a></li>

</ul></div>

<div class="foot-bottom">
<p ><small>Copyright&copy; 2013 Web開発のためのPHP-Webサイト制作- All Rights Reserved.</small></p>
</div>
</footer>
<!-- /#container -->
</div>

</body>
</html>

ソースコード【 CSS 】

@charset "utf-8";

/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

ソースコード【 CSS 】

@charset "utf-8";

/*webfont*/
@import url(http://fonts.googleapis.com/css?family=Kavoon);
@import url(http://fonts.googleapis.com/css?family=Plaster);

/* bace
---------------------------------------------- */
body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	line-height: 1.4;
	font-size: 16px;
	color: #333;}

/* style */
.b {font-weight: bold;}


/* #container
---------------------------------------------- */
#container {
	background: url(../images/img-set01/bg.jpg);}

#header,
section {
	margin: 0 0 10px;}

.header-top,
.foot-bottom {
	padding: 4px 0 4px 0;
	background: #04009d;
	font-size: 10px;
	font-weight: bold;
	color: #fff;}

.header-top {
	padding: 0 0 1px 0;
	font-size: 12px;}

.head-top {
	background: url(../images/img-set01/header.png) no-repeat;}

.header-top{
	border-bottom: 2px solid #666;}

.icon {
	font-family: 'Kavoon', cursive;
	margin: 0 10px 0 0;
	background: #F00;
	border-top: 1px solid #04009d;
	border-bottom: 1px solid #04009d;
	font-size: 16px;
	color: #000;
	text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);}

.head,
.head-top,
#contents,
.foot,
.foot-bottom p:first-child {
	width: 960px;
	margin: 0 auto;}

.head,
#contents,
.foot {
	background-color: rgba(255,255,255,0.55);}

.col1 h1 {
	padding: 3px 30px 0;
	font-size: 24px;}

.col1 h1 span {
	margin: 0 20px 0 -30px;
	padding: 3px 8px 0;
	color: #fff;}

.sec-title {
	padding: 0 0 2px;
	font-size: 28px;
	text-align: center;
	border-bottom: 3px solid #3D6DFF;}

.sec-title span {
	border-bottom: 2px solid #F00;}

.head p:before {
	content: "10. ";
	font-family: 'Plaster', cursive;
	font-size: 32px;}

.col1 h1 {
	margin: 0 0 10px;
	border: 1px solid #3D6DFF;}

.col1 h1 span {
	background: #3D6DFF;}

.col1 ul li {
	padding: 0 0 0 23px;
	background: url(../images/img-set01/circle03.png) no-repeat left 0.2em;}

.col1 ul li ol li {
	margin: 0 0 0 23px;
	padding: 0;
	background: none;}

.col1 ul li ul.inner_list li {
	font-weight: bold;
	margin-top: 5px;
	background: none;}

.col1 ul li ul.inner_list2 {
	margin-bottom: 10px;}
content
.col1 ul li ul.inner_list2 li {
	font-weight: bold;
	margin-top: 5px;
	background: none;}

.col1 ul li ul.inner_list_middledot li {
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	background: none;}

.col1 ul li ul.inner_list_middledot li:before {
	content: "・";
	font-weight: bold;}

.col1 ul li ul.inner_list_middledot li span {
	display: inline-block;
	margin: 0 0 0 10px;}

.point {
	margin: 0 0 10px;
	padding: 26px  20px 33px 115px;
	background: url(../images/img-set01/point.png) no-repeat 10px 0em;
	font-size: 20px;
	color: #F00;
	font-weight: bold;}

h2 {
	margin: 0 10px 10px;
	padding: 5px 15px 3px;
	border-top: 1px solid #3D6DFF;
	border-right: 1px solid #3D6DFF;
	border-bottom: 2px solid #3D6DFF;
	border-left: 15px solid #3D6DFF;
	border-radius: 8px 0 0 8px / 8px 0 0 8px;
	-moz-border-radius: 8px 0 0 8px / 8px 0 0 8px;
	-ms-border-radius: 8px 0 0 8px / 8px 0 0 8px;
	-webkit-border-radius: 8px 0 0 8px / 8px 0 0 8px;
	background: #3D6DFF;
	font-size: 18px;	}

h2 span {
	display: block;
	width: 98%;
	padding: 3px 15px;
	background-color: rgba(255,255,255,0.85);}

.inner {
	width: 90%;
	margin: 0 auto;
	padding: 0 0 15px;}

.col1 ul.last_child li:last-child {
	display: inline-block;
	background: none;
	margin-top: 8px;
	font-size: 90%;}

.col1 ul.last_child li:last-child::before {
	content: "※";
	color: #F00;
	font-weight: bold;
	padding: 0 5px 0 0;}

.col-code {
	display: none;}

.col1 ul.notes li:last-child {
	display: inline-block;
	width: 80%;
	margin: 10px 0 0;
	padding: 8px 36px;
	background: none;
	border: 1px solid #03C;
	border-radius: 6px;}

.col1 ul.notes li:last-child::before {
	content: "◎";
	color: red;
	padding-right: 4px;}

.php {
	padding: 10px;
	border: 2px dotted #F30;
	background-color: rgba(61,109,255,0.45);}

/*.col2 ul.notes {
	with: 80%;
	margin: 0 auto;}*/

.col2 ul.notes li:last-child {
	display: inline-block;
	width: 80%;
	margin: -10px auto 10px;
	padding: 8px 36px;
	background: none;
	border: 1px solid #03C;
	border-radius: 6px;}

/*php の表記下に記述する*/
.col2 .notes:last-child::before {
	content: "◎";
	color: red;
	padding-right: 4px;}

.col2 .notes:last-child {
	display: inline-block;
	width:89%;
	margin: 10px auto 10px;
	padding: 8px 16px;
	background: none;
	border: 1px solid #03C;
	border-radius: 6px;}
/*php の表記下に記述する*/

.post h2 a:link,
.post h2 a:visited,
.post h2 a:hover,
.post h2 a:active {color:#333;text-decoration:none;}

hr.style {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}

.foot {
	padding: 20px 15px;
	background-color: rgba(0,0,0,0.85);
	color: #fff;
	font-size: 14px;}

.foot ul {
	float: left;
	width: 48%;
	margin: 0 30px 0 0;}

.foot ul + ul {
	margin: 0;}

.foot-bottom p {
	padding: 3px 5px 8px 0;
	text-align: right;}

.head-top p a:link,
.head-top p a:visited,
.head-top p a:hover,
.head-top p a:active {
	text-decoration: none;}

.foot a:link,
.foot a:visited {
	color: #BB7DFF;
	text-decoration: underline;}

.foot a:hover,
.foot a:active {
	color: #D22D63;
	text-decoration: none;}

/*table*/
table caption {
	font-size: 12px;
	text-align: left;}
table {
	width: 100%;
	margin-top: 15px;
	border: 1px #000000 solid;
	border-collapse: collapse;}
th {
	background: #3D6DFF;
	color: #fff;}
th, td{
	padding: 4px 6px;
	border: 1px #000000 solid;}
.td_title {
	font-weight: bold;}
p.table_set {
	margin-top: 5px;}


/*clearfix*/
.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	
.clearfix {display: inline-block;} 

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix {display:block;}
/* End Hack */ 


@media only screen and (max-width:320px) {

#container {
	width: 100%;
	padding: 0 10px;
	background: url(../images/img-set01/bg.jpg);}

.head h1 {
	text-align: center;
	padding: 5px 5px 0;}

.head h1 img {
	display: none;}

.head h1:before {
	content: "Web開発のためのPHP";
	font-size: 22px;
	color: #039;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);}

.head h1:after {
	content: "-Webサイト制作-";
	display: inline-block;
	font-size: 16px;
	color: #F00;
	text-shadow: 0 0 2px rgba(0, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5)}

#header,
section {
	margin: 0 0 10px;}

.header-top {
	width: 100%;
	padding: 8px 0;
	font-size: 10px;
	color: #fff;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d));
	background: -webkit-linear-gradient(#09123c, #0e3e8d);
	background: -moz-linear-gradient(#09123c, #0e3e8d);
	background: -o-linear-gradient(#09123c, #0e3e8d);
	background: -ms-linear-gradient(#09123c, #0e3e8d);
	background: linear-gradient(#09123c, #0e3e8d);}

.foot-bottom {
	width: 320px;
	padding: 12px 0 18px;
	font-size: 8px;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #0e3e8d), color-stop(1.00, #09123c));
	background: -webkit-linear-gradient(#0e3e8d, #09123c);
	background: -moz-linear-gradient(#0e3e8d, #09123c);
	background: -o-linear-gradient(#0e3e8d, #09123c);
	background: -ms-linear-gradient(#0e3e8d, #09123c);
	background: linear-gradient(#0e3e8d, #09123c);}

.head-top {
	padding: 0 0 1px 0;
	font-size: 12px;
	background: none;}

.header-top{
	border-bottom: 2px solid #666;}

.icon {
	display: inline-block;
	font-family: 'Kavoon', cursive;
	margin: 0 10px;
	background: #F00;
	border-top: none;
	border-bottom: none;
	font-size: 16px;
	color: #000;}

.head,
.head-top,
#contents,
.foot,
.foot-bottom p:first-child {
	width: 100%;}

.head,
#contents,
.foot {
	background-color: rgba(255,255,255,0.55);}

.col1 h1 {
	padding: 3px 30px 0;
	font-size: 18px;}

.col1 h1 span {
	margin: 0 20px 0 -30px;
	padding: 3px 8px 0;
	color: #fff;
	inset: 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4)}

.sec-title {
	padding: 0;
	font-size: 19px;
	text-align: center;
	border-bottom: 3px solid #3D6DFF;}

.sec-title span {
	padding: 0 0 5px;
	border-bottom: 2px solid #F00;}

.head p:before {
	content: "10.";
	font-family: 'Plaster', cursive;
	font-size: 24px;}

.col1 h1 {
	margin: 0 0 10px;
	border: 1px solid #3D6DFF;}

.col1 h1 span {
	text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2947ff), color-stop(0.00, #3883ff));
	background: -webkit-linear-gradient(#3883ff, #2947ff);
	background: -moz-linear-gradient(#3883ff, #2947ff);
	background: -o-linear-gradient(#3883ff, #2947ff);
	background: -ms-linear-gradient(#3883ff, #2947ff);
	background: linear-gradient(#3883ff, #2947ff);}

.col1 ul li {
	padding: 0 0 0 20px;
	background: url(../images/img-set01/circle03.png) no-repeat left 0.25em;}

.point {
	position: relative;
	margin: 0;
	padding: 10px 15px 10px 35px;
	background-image: none;
	color: #F00;
	text-align: left;
	font-weight: bold;}

.point:before {
	position: absolute;
	top: -15px;
	left: -15px;
	content: "P";
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 5px;
	border:5px solid #F00;
	border-radius: 60px;
	font-size: 32px;
	font-weight: bold;
	color: #f00;
	text-align: center;
	background: #F5BEC4;
	text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);}

h2 {
	margin: 0 0 10px;
	padding: 2px 5px;
	border-top: 1px solid #3D6DFF;
	border-right: 1px solid #3D6DFF;
	border-bottom: 1px solid #3D6DFF;
	border-left: 1px solid #3D6DFF;
	border-radius: 0 /  0;
	-moz-border-radius: 0 /  0;
	-ms-border-radius: 0 /  0;
	-webkit-border-radius: 0 /  0;
	background: #3D6DFF;
	font-size: 18px;	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #70b6f2), color-stop(0.50, #54a3ee), color-stop(0.50, #3690f0), color-stop(1.00, #1a62db));
	background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);
	background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);}

h2 span {
	display: block;
	width: 95%;
	margin: 0 auto;
	padding: 3px 5px;
	text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #cecece), color-stop(1.00, #fff));
	background: -webkit-linear-gradient(#cecece, #fff);
	background: -moz-linear-gradient(#cecece, #fff);
	background: -o-linear-gradient(#cecece, #fff);
	background: -ms-linear-gradient(#cecece, #fff);
	background: linear-gradient(#cecece, #fff);}

.inner {
	width: 95%;
	margin: 0 auto;
	padding: 0 0 15px;}

.col1 ul.notes li:last-child {
	display: inline-block;
	width: 95%;
	margin: 10px auto 0;
	padding: 8px 5px;
	background: none;
	border: 1px solid #03C;
	border-radius: 6px;
	font-size: 14px;}

.php {
	padding: 10px;
	border: 2px dotted #F30;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #d5defd), color-stop(1.00, #7a9bcd));
	background: -webkit-linear-gradient(#d5defd, #7a9bcd);
	background: -moz-linear-gradient(#d5defd, #7a9bcd);
	background: -o-linear-gradient(#d5defd, #7a9bcd);
	background: -ms-linear-gradient(#d5defd, #7a9bcd);
	background: linear-gradient(#d5defd, #7a9bcd);}

.col-code {
	display: inherit;
	font-size: 14px;
	word-wrap:break-word;}

.foot {
	padding: 15px 0;
	color: #fff;
	font-size: 12px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #131313), color-stop(1.00, #4b4b4b));
	background: -webkit-linear-gradient(#131313, #4b4b4b);
	background: -moz-linear-gradient(#131313, #4b4b4b);
	background: -o-linear-gradient(#131313, #4b4b4b);
	background: -ms-linear-gradient(#131313, #4b4b4b);
	background: linear-gradient(#131313, #4b4b4b);}

.foot ul {
	float: none;
	width: 90%;/**/
	margin: 0;
	padding: 0 15px;}

.foot ul li {
	padding: 0 0 10px;}

.foot ul + ul {
	margin: 0;}

.foot-bottom p {
	padding: 3px 5px;
	text-align: center;}

/* 折りたたみ表示 */
.post .post_inner {display:none;}

.post:target .post_inner {display: block;}
}


ブラウザで表示【 FireFox 】




IEtester【 IE8 】




IEtester【 IE9 】




ブラウザで表示【 Chrome 】





HTML5 Outliner【 Chrome 】




iPhone【 MbileSfari 】