なるべく、平易に書いていこうと思います。
使うのは、汎用テキスト・ブラウザ（メモ帳 等）で、ご自分の PC にデータを保存します。
保存場所を、持ち運びを考慮して USB メモリにしたり、任意の接続性を重視して SkyDrive や Google ドライブにしたり、 して下さい。
以下、Windows での作業で説明して行きます。
先ずは、汎用テキスト・ブラウザ（メモ帳 notepat.exe 等）を開き、新規文書を作成します。
最初に書き込むのはこれです。
<!DOCTYPE html>保存時の名称は MyLinkList.html 、文字コードは UTF-8 を指定して下さい。
<html lang="jp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>MyLinkList Local</title>
<body>
My Link List<br />
<br />
</body>
</html>
このファイル名は 英数字半角 として下さい。 半角スペースは避けることをお勧めします。
それ以外の赤い文字は、任意の文字に変えて下さい。
MyLinkList Local はブラウザのタブで表示される名称。
My Link List はブラウザの画面中に表示される文字 です。
<body> ... </body> の中が、画面中に表示されます。
<br /> は改行です。
次回以降、色々、書き加えて行きます。
保存したファイルを、Explorer でダブルクリックすると、既定のブラウザで表示されます。
保存したファイルの訂正は、メモ帳を開いておき、そこに Explorer からドラッグ･ドロップして、編集します。
表を入れて見ましょうか。
</body> の前に、次のブロックを挿入します。
気象庁の台風 並びに 地震情報 そして Google 並びに Bing のホームを、既に、登録した情報です。
<table class="table-z900" id="sample">
<thead>
<th width= "60">分類</th>
<th width="120">区分</th>
<th width="220">内容</th>
<th width="150">LINK</th>
<th width="250">Memo</th>
</thead>
<tbody>
<tr>
<td>検索</td>
<td>検索 Google</td>
<td>Google ホーム</td>
<td><a href="http://www.google.co.jp/">Google Home</a></td>
<td></td>
</tr>
<tr>
<td>気象</td>
<td>気象 台風</td>
<td>台風情報</td>
<td><a href="http://www.jma.go.jp/jp/typh/">台風情報 気象庁</a></td>
<td>台風中心クリックで詳細</td>
</tr>
<tr>
<td>気象</td>
<td>気象 地震</td>
<td>地震情報</td>
<td><a href="http://www.jma.go.jp/jp/quake/">地震情報 気象庁</a></td>
<td>最近一週間の地震情報</td>
</tr>
<tr>
<td>検索</td>
<td>検索 Bing</td>
<td>Bing ホーム</td>
<td><a href="http://www.bing.com/">Bing Home</a></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><a href=""></a></td>
<td></td>
</tr>
</tbody>
</table>
<style>
.table-z900 {
border-collapse: collapse; /* 枠線 collapse:1本 separate:2本分離 */
}
.table-z900 th {
border: solid 1px #c1c1c1; /* 線種 solid：実線 dashed：破線 ... 線幅 線色 HTML16 進数 */
padding: 0.3em; /* 余白 単位 em：文字 px：ピクセル */
}
.table-z900 td {
border: solid 1px #cccccc; /* 線種 solid：実線 dashed：破線 ... 線幅 線色 HTML16 進数 */
padding: 0.3em; /* 余白 単位 em：文字 px：ピクセル */
}
</style>
表のスタイルは一例です。 必要に応じて、書き換えて下さい。
また、ＣＳＳ にして 別ファイルとしての保存も可能ですが、ここでは同一ファイル内に定義しました。
ブラウザでの表示状態です。 LINK から実際のページに飛べます。
データ部分は、ご自分の必要なデータと入れ替えて下さい。
次回は、表に機能を追加し、並び替えを可能にします。
0 件のコメント:
コメントを投稿