Open Source Web Development Tutorials - Dev Shed

実践PHP！FTPクライアントを実装する
（2009/02/12公開）

FTPアプリケーション

　今から作成するアプリケーションは、前節の表で紹介した関数を使って、最高に手際よく、FTPプロトコルを実装します。FTPクライアントの主たる目的は、ネットワーク上でのファイル転送を可能にすることです。これには、ダウンロード、アップロード、削除、ドライブのディレクトリ構造内移動が含まれますが、これから作成するアプリケーションは、すべてを実行できます。以下は、筆者がFTPクライアントアプリケーション用に考案したカスケーディングスタイルシートのコードです。

/* CSS Document */
body {
background-color: #FFFFFF;
margin:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
}
a {
color: #cc0000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color: #990000;
text-decoration:underline;
}
h1 {
color: #006699;
font-size: 14px;
font-weight: bold;
margin: 0px 0px 5px 0px;
border-bottom: 2px solid #006699;
}
h2 {
color: #006699;
font-size: 13px;
font-weight: bold;
margin: 0px 0px 0px 0px;
}
td {
font-size: 12px;
color: #333333;
}
.bar_central {
background-image: url("img/bg_central.png");
height: 28px;
font-size: 12px;
color: #FFFFFF;
padding-bottom: 3px;
background-repeat: repeat-x;
}
.bar_central a {
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
}
.bar_central a:hover {
text-decoration: underline;
}
.navhead_text {
font-size: 12px;
color: #FFFFFF;
padding-bottom: 2px;
padding-left: 10px;
background-repeat: repeat-x;
}
.navblock {
border-left: 1px solid #006699;
border-right: 1px solid #006699;
border-bottom: 1px solid #CCCCCC;
background-image: url("img/bg_nav.png");
background-repeat: repeat-y;
padding-left: 5px;
height: 23px;
color: #006699;
text-align: left;
}
.navblock a {
text-decoration: none;
color: #006699;
}
.navblock a:hover {
text-decoration: none;
color: #FE9900;
}
.tooltip {
color: #006699;
font-style: italic;
font-size: 10px;
}
.tooltipblack {
color: #333333;
font-style: italic;
font-size: 10px;
}
.navholder {
padding-left: 8px;
padding-top: 20px;
}
.contentholder {
padding-top: 20px;
}
.bottom {
border-top: 1px solid #999999;
padding-top: 10px;
color: #ccc;
}
.subbox {
background-color: #F0F0f0;
border-left: 1px solid #CCCCCC;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
border-right: 1px solid #CCCCCC;
}
#mainarea {
margin-top: 15px;
}
.dottedline {
background-image: url("img/bg_horizdots.gif");
background-repeat: repeat-x;
padding: 0px;
height: 1px;
}
.input100 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding-left: 4px;
padding-right: 4px;
width: 100px;
height: 20px;
}
.input200 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding-left: 4px;
padding-right: 4px;
width: 200px;
height: 20px;
}
.input300 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding-left: 4px;
padding-right: 4px;
width: 300px;
height: 20px;
}
.textarea200 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding: 4px;
width: 200px;
height: 125px;
}
.textarea300 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding: 4px;
width: 300px;
height: 250px;
}
.tableheader1 {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma, Arial, Verdana;
font-weight: bold;
font-size: 13px;
}
.tableshading1a {
background-color: #B1D3ED;
}
.tableshading1b {
background-color: #D0E2F2;
}
.tableheader2 {
background-color: #CC0000;
color: #FFFFFF;
font-family: Tahoma, Arial, Verdana;
font-weight: bold;
font-size: 13px;
}
.tableshading2a {
background-color: #D59299;
}
.tableshading2b {
background-color: #DBB5BC;
}
.tableheader3 {
background-color: #555555;
color: #FFFFFF;
font-family: Tahoma, Arial, Verdana;
font-weight: bold;
font-size: 13px;
}
.tableshading3a {
background-color: #DDDDDD;
}
.tableshading3b {
background-color: #EEEEEE;
}
.headertxt{
font-size:24px;
color:#FFFFFF;
background-color:#669999;
}
.copyright{
font-family:Tahoma, Arial, Verdana;
text-align:right;
font-size:11px;}
.smallheader{
background-color:#669999;
font-weight:bold;}
.tdr{

background-color:#a4c2c2;}
.logo {
font:19px times new roman;
color: #333300;
letter-spacing:.4em;
font-weight:bold;
}
/**divs*/

.block{

background-color:#CCCCCC;
border: 1px solid #ccc;

left: 659px;
top: 7px;
height: 10px;
width:80px;
overflow:scroll;
}

　上述のコードをコピーし、新規文書を開いてペーストし、ftp.cssという名前を付けて保存しましょう。このコードは、読みやすく分かりやすいFTPユーザーインターフェースを念頭に、筆者が組み立てたスタイルですから、理解できなくても心配は要りません。