blogger開発講座: サイトを簡単につくるには！③トップ画面を作る

「サイトを簡単に作るには」で、画面構成は、決まったと思います。
トップ画面を作りましょう！
①のイメージで、私の作った画面です。

サブメニューもメインも何も無いのでヘッダーとフッターが目立っています。表の枠も今は、ライン表示していますが、最終的には、消すつもりです。ベースイメージは、アニメフロンティア別館です。
ソースも、公開します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>コミックフロンティア</title>
    <meta name="keywords" content="コミック,漫画">
    <link rel="alternate" type="application/rss+xml" title="コミックフロンティア - RSS" href="http://comicfrt.webcrow.jp/rss/rss20.xml" />
 <link rel="apple-touch-icon" href="http://comicfrt.webcrow.jp/img/comicfrt.png" />
<script type="text/javascript" src="script.js">
</script>
<link rel="stylesheet" type="text/css" href="css/page_styles.css">
</head>
<body>
<div class="main" style="border: solid 3px #0000f0;border-radius: 20px;">
コミックフロンティア</div>
<table border="1" cellspacing="0" width='100%' 
style="border-collapse: collapse;">
<tbody>
<tr>
<td width='200px'>

サイドメニューエリア

</td>
<td>

サイトメインエリア

</td>
</tr>
</tbody>
</table>
<div class="footer">
<div class="footer-text">
コミックの情報アップサイトです。自己責任で楽しんで下さい。</div>
<div class="footer-copyright">
Copyright © 2017.xx.xx</div>
<div class="footer-text">
管理人：まりね　相互リンク募集中</div>
<div class="footer-text">
mail:myping_marine@yahoo.co.jp</div>
</div>
</body>
</html>

簡単な物です。
ついでに、今回使っているスタイルシートとjavascript も公開します。
スタイルシートは、基本の設定しかしてません。
javascript は、まだ使っていませんが、私のcsv ファイルの読み込み処理と、引数取得処理を入れてあります。
今後どこかで使うでしょう！
スタイルシート(page_styles.css）

.header {
            z-index: 100;
            padding: 5px 0;
            width: 100%;
            border-bottom: #ccd1d9 solid 1px;
            background: #fff;
            color: #333;
            text-align: center;
        }

.header-title {
            margin: 0;
            font-size: 2.4em;
        }

.header-description {
            color: #999;
        }

/* メインイメージ */

.main {
            padding: 5px 0;//30px 0;
            width: 100%;
            background: #ECFDFE;
            background-image: url('http://marine117.html.xdomain.jp/img/title.jpg');
            background-size: 100% auto;
            color: #00f;
            text-align: center;
            font-weight: bold;
            font-size: 3em;
        }
        /* ボディー */

.body {
            margin: 0 auto;
            display: block;
            clear: both;
            content: "";
        }

/* フッター */

.footer {
            padding: 12px 0;
            border-top: #ccd1d9 solid 1px;
            background: #fff;
            text-align: center;
            clear: both;
        }

.footer-nav {
            margin-bottom: 12px;
            width: 100%;
            text-align: center;
        }

.footer-nav-group {
            margin: 0;
            padding: 0;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: middle;
            *vertical-align: auto;
            zoom: 1;
            *display: inline;
        }

.footer-nav-group > li {
            margin: 0;
            padding: 0 6px;
            font-size: 0.9em;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: middle;
            *vertical-align: auto;
            zoom: 1;
            *display: inline;
        }

.footer-nav-group > li a {
            color: #666;
            text-decoration: none;
        }

.footer-nav-group > li a:hover {
            color: #999;
        }

.footer-text {
            margin-bottom: 6px;
            color: #999;
            font-size: 0.8em;
        }

.footer-copyright {
            color: #999;
            font-size: 0.8em;
        }
    </style>

javascript ファイル（script.js)

function urlchk(ul){
 var rul ;

if( ul.charAt(ul.length - 1)!="/" ){
  rul = ul+"/";
 }
 else {
  rul = ul;
 }
 return rul ;
}

function stringCounter(str1,str2){
   var strlength=str2.length;
   var ans=0;
   var i=0;
   while((i=str1.indexOf(str2,i)) != -1){
     i+=strlength; //この行は目的によってはi++;を使う
    ans++;
   }
   return ans;
}

function getwc(s){
 return stringCounter(s,"\"");
}

//CSVファイル読み込み
function csv2Array(filePath){
//  document.write(filePath+"<br>");
 //csvﾌｧｲﾙﾉ相対ﾊﾟｽor絶対ﾊﾟｽ
 var csvData = new Array();
 var data = new XMLHttpRequest();
 data.open("GET", filePath, false);
 //true:非同期,false:同期
 try {
  data.send(null);
  if(data.status!=200){
   return new Array();
  }
  //document.write(data.responseText()+"<br>");
  var LF = String.fromCharCode(10); //改行ｺｰﾄﾞ
  var lines = data.responseText.split("\n");
  lines = getcsv(lines);
  for (var i = 0; i < lines.length;++i){
   var cells = lines[i].split(",");
   if( cells.length != 0 ){
    if( (cells.length == 1) && (cells[0].length==0) ){
    }
    else {
     csvData.push(cells);
    }
   }
  }
 }
 catch(e) {
  csvData = new Array();
 }
// document.write(csvData.length+"<br>");
 return csvData;
}

function MapReadcsvSub(path,filePath){
//document.write(csvFold+filePath+"<br>");

var csvMap = csv2Array(path+filePath);
 var csv = new Array();
 var lcun = 0 ;
 for( var i=0 ; i < csvMap.length ; i++ ){
  var fcsv = csv2Array(path+csvMap[i]);
  for( var j = 0 ; j < fcsv.length ; j++ ){
   csv[lcun] = fcsv[j] ;
   lcun = lcun + 1 ;
  }
 }
 return csv;
}

function getMaxCPg(){
 return 1;
}

一応現在の物は、以下でみられます。
コミックフロンティア
最終的なサイト公開予定場所です。

menu

2017年4月30日日曜日

サイトを簡単につくるには！③トップ画面を作る

0 件のコメント:

コメントを投稿