日記テンプレ公開 | 四つ葉のクローバー

100万ポイント山分け！1日5回検索で1ポイントもらえる

843278

HOME | DIARY | PROFILE

【フォローする】【ログイン】

はじめにお読み下さい

< 新しい記事

新着記事一覧(全2405件)

過去の記事 >

November 29, 2005

グロワーズさんのリクエストがありましたので，まずは，２７日に使ったテンプレのソースをご紹介します。
（一番外側が赤枠，緑色のクリスマスカラー素材で枠の背景を入れたものです）

グロワーズさんは，プロなので，ここでソースを貼り付けさせすれば，「なるほど・・・」と読み取ってもらえることでしょうけれど，他の方にもわかるように，注釈を入れておきますね。
なお，一つずつのタグの詳しい説明は，私のTOPページにある，「HP作成用語を英語で検証目次」から，選択して見て下さい。
↓

*HP作成用語を英語で検証目次*

-----下記から選んで下さい-----

*（　）内は，取り上げた英単語です。
1.HTML（hyper-/text/link/）

2.タグ(tag)

3.CENTER(center)

4.IMG　SRC="画像ファイル名"
(image/source)

5.a href="リンク先"(anchour/reference)

6.a name="リンク箇所名"(name)

7.Br(break)

8.テーブルの基本タグ(table/border/row/data)

9.セル(cell)

10.テーブルの大きさを指定 (width/height/pixel)

11.テーブル内の大きさを指定 (cellspacing)

12.テーブル内の大きさを指定2 (cellpadding/pad)

13.bordercolor="色"(color)

14.bgcolor="色名または#番号"

(background)

15.テーブル枠線の形状

(dot/dash/solid/double)

16.align="横位置"

(align/horizontal/vertical)

17.テーブル背景の位置指定

(repeat)

番外編　メモ帳の使い方

 番外編　テーブルの使い方例（1）

（*タグに使う＜＞は，半角に直して使って下さい）

＜TABLE BORDERCOLOR="#e10000" border="5" style="border-style:double;" BACKGROUND="http://*****ここに画像のURL（枠に使う素材です）*****.gif" cellspacing="50" cellpadding="15"＞
＜TR＞＜TD bgcolor="#ffffff" style="border-width :2px; border-style : solid;border-color : #009900;"＞＜div style="height:360px;overflow-y:scroll;fixed;scrollbar-face-color:#339900;scrollbar-track-color:#bbe096;scrollbar-arrow-color:#ffffff;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#5c6f84;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#ffffff; border-style:dotted;border-color:#3380cc; padding:40px; border-width:0px;"＞＜font color="#339900"＞＜FONT FACE="HGｺﾞｼｯｸM"＞＜font size=4＞＜b＞＜span style="line-height:29px"＞
＊＊＊＊＊ここに日記を書きます＊＊＊＊＊
＜/b＞＜/font＞＜/div＞＜/TD＞＜/TR＞
＜/TABLE＞

BORDERCOLOR="#e10000" border="5" style="border-style:double;"
↓
この部分が，一番外側の枠の指定です。
色が，"#e10000"（ちょっとくすんだ赤）
線の太さが，border="5"
線の種類が二重線，style="border-style:double;"

cellspacing="50" と言う部分で，枠の間の素材（緑に金色の葉の柄）が入っている部分の「太さ」を指定します。
素材の柄の大きさに合わせて，もっと太くしたければ，数字を大きく。狭くしたければ数字を小さく。

cellpadding="15" で，中の文字と枠との間の空白の幅を指定します。
この空白が無いと，文字が枠にピッタリくっついてしまって見づらくなります。
周囲グルッと，枠から文字部分が離れているのがわかりますね？

TD bgcolor="#ffffff" 　これは，一番内側の（文字が入っている部分の）背景の色です。
"#ffffff"と言うのは，「白」の色番号です。#ffffffとせずに，"white"　としてもOKです。
色はお好みで・・・

style="border-width :2px; border-style : solid;border-color : #009900;" これは，一番内側の枠の色と線の種類
今回は，緑（#009900）で，無地（border-style : solid）で，線の太さも，細く（2px）してありますから，枠が背景の素材と一体化してしまって，よくよく見ないとわからないかもしれません。（よく見るとわかりますよ！）

div style="height:360px;overflow-y:scroll;fixed;scrollbar-face-color:#339900;scrollbar-track-color:#bbe096;scrollbar-arrow-color:#ffffff;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#5c6f84;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#ffffff; border-style:dotted;border-color:#3380cc; padding:40px; border-width:0px;"

この部分が，内側のスクロールバーの指定になります。
この中で，一番動かす部分と，△の印の部分の色の指定が，
scrollbar-face-color:#339900

バーが動く部分の下地の色（と言うのか？道路部分？）の指定が
scrollbar-track-color:#bbe096

この二箇所を変えるだけで，結構使えます。
後は，立体的に見えるように，色々な色を組み合わせて，他の部分も細かく指定できるのですが，私はこの二箇所を変えるだけで済ませてしまっています。

この部分の組み合わせで，ずいぶん見栄えが違います。

font color="#339900" 　これは，ご存知，文字の色指定

FONT FACE="HGｺﾞｼｯｸM" 　文字の字体指定

font size=4　文字のサイズ（大きさ）

＜ｂ＞文字を太めにするタグ

span style="line-height:29px" 　文字の行間の高さを指定
この指定によって，行間（上下の間隔）が広がって見やすくなります。

お気に入りの記事を「いいね！」で応援しよう

Last updated November 29, 2005 03:39:31 PM
コメント(2) | コメントを書く

■コメント

おお～！

グロワーズさん

リクエストにお応え下さいましてありがとうございます。m(_ _)m
まだまだプロとは言えず、発展中のグロワーズです。

最近ではレイアウトがテーブルレイアウトからCSSレイアウトへと変化しつつあり、落ちこぼれながらも勉強を続けている私です。

ポンチョさんのブログは役立つ情報満載！

いつも本当に有り難うございます（＾＾）ノ (November 29, 2005 06:00:27 PM)

返事を書く

Re:おお～！(11/29)

ポンチョ♪ さん

グロワーズさん
テーブルはお手軽ですが，限度がありますからね。
私も本を読んで試行錯誤してやってます。
楽天内の規制もあるので，難しいです。
(November 29, 2005 10:12:53 PM)

返事を書く