「ほっ」と。キャンペーン

アル中ララバイ

boardx.exblog.jp
ブログトップ
交野市断酒会topページ

カテゴリ:HTMLの道具箱( 9 )

テーブルタグを使わずに!(覚書)

Hypertext Markup Language



レイアウトに関する備忘録


皆さん、興味ないですよねぇ・・・

・・・それでも、見て行って下さい!


The simple is best!


これが、ボディー内



<div id="wrapper">
<div id="header">
<h1>[ ヘッダ ]</h1>
</div>
<div id="sub">
<p>
これは「#sub」に含まれる段落内のテキストです。
これは「#sub」に含まれる段落内のテキストです。
これは「#sub」に含まれる段落内のテキストです。
</p>
</div>
<div id="container">
<div id="main">
<p>
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
これは「#main」に含まれる段落内のテキストです。
</p>
</div>
<div id="extra">
<p>
これは「#extra」に含まれる段落内のテキストです。
これは「#extra」に含まれる段落内のテキストです。
これは「#extra」に含まれる段落内のテキストです。
</p>
</div>
</div>
<div id="footer">
<p>[ フッダ ]</p>
</div>
</div>


こんな感じになります・・・

f0101759_0171656.gif

こちらが、CSSです・・・


body,div {
text-align: center;
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
text-align: left;
width: 500px;
}
#header {
color: #000;
background: #ddd;
}
#sub {
float: left;
width: 150px;
color: #fff;
background: #06c;
}
#container {
float: right;
width: 350px;
}
#main {
float: left;
width: 200px;
color: #fff;
background: #fc0;
}
#extra {
float: right;
width: 150px;
color: #fff;
background: #06c;
}
#footer {
clear: both;
width: 100%;
color: #000;
background: #ddd;
}




気づけば、随時追記していきます。


おら・・・夢の中
[PR]
by black-board | 2006-11-29 00:21 | HTMLの道具箱 | Trackback | Comments(5)

テーブル (覚書)


慎ちゃん師匠もホームページを開設しよう!

<table>タグの備忘録

テーブルを使ってのデザインは推奨されていませんが
使っていますw
んで、忘れないように覚書しておきます。


環境によって見え方が違うので余り凝らない方が良いと最近思うようになりました。
The simple is best!

タイトル部分で説明
<table summary="ヘッダー" id="header-body">
<tr><td id="header-body-sub">
タイトル
</td></tr></table>

<th>には、<th abbr="見出し説明">を・・・(音声対応)
table { border: 2PX solid #00f; }枠色を共通にする場合
table { border-collapse: collapse; }枠単線
table { border-collapse: separate; }枠重線(現在の環境で規定値みたい)

<style type="text/css">
<!--
#header-body {
width: 800px;
border: 3PX solid #420;
margin: 50px auto 0px;
background: #420;
}
#header-body-sub {
height: 100px;
padding: 30PX 15px 30PX 15px;
letter-spacing: 2px;
text-align: center;
text-valign: top;
background-image: url(../sz/toukay30.png);
}
-->
</style>

width: 800px;
height: 100px;
border-style: dotted;
none(hidden)なしdotted点線dashed破線solid一重線doublo二重線
grooveボーダー凹ridgoボーダー凸inset全体凹outset全体凸
border-width: 2px 5px 3px 1px;
thin細medium普通thick太
border-color: #f00 #0f0 #00f #f0f;
border: 3PX solid #420;(まとめて書けます)
margin: 50px auto 0px;枠外間隔
auto(センターリングできる)
body { margin-top: 0px;  text-align: center; }(合わせて使用)
padding: 0px;枠内間隔
text-align: center;
left左center中央right右
text-valign: top;
top上middle中間bottom下
cellspacing→border-spacing(tableへ)
cellpadding→padding(th,tdへ)
background: #420;(バックの色)
background-image: url(画像URL);



気づけば、随時追記していきます。
[PR]
by black-board | 2006-11-24 12:31 | HTMLの道具箱 | Trackback | Comments(3)

文書型宣言から全体 (備忘録)


慎ちゃん師匠もホームページを開設しよう!

宣言から全体の備忘録

自己流なので偉そうには、言えません。

ジオシティーズ、アドバンストHTMLエディタ環境を基本に書いています。
アドバンストHTMLエディタで、XMLに挑戦しましたが、
思うようにいきませんでした。
HTML 4.01仕様CSS2バージョンが適正なようなので、
その路線で覚えていこうと思います。
・・・が、如何に?
解らんことだらけですわ(ToT)とほほ


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">

上記EUC仕様(ジオシティーズ無料版は、こちらを使っています。)

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
日本語シフトJIS(通常?は、こちらを使用しているようです。)
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="(キーワードを,で区切って列挙)">
<meta name="description" content="(ページの内容の簡単な記述)">
<meta name="author" content="(管理人製作者名)">
<meta name="generater" content="アドバンストHTMLエディタ(notepad)">
(使用エディタ記載)
<base href="http://www.geocities.jp/katano_d/html/top.html">

(ベースURL)

<title>ホームページタイトル</title>
<link rel="shortcut icon" href="sz/favicon.ico">
(表示アイコン)
<link rel="index" href="index.htm">
<link rel="contents" href="site-map.html">
<link rev="made" href="mailto:katano25@msn.com">
<style type="text/css">
<!--
@import url("css/main.css");
    ←(外部リンク)
(スタイルシート書き込み)

-->
</style>
</head>
<body>
(本文書き込み)
</body>
</html>



気づけば、随時追記していきます。
[PR]
by black-board | 2006-11-24 12:12 | HTMLの道具箱 | Trackback | Comments(0)

趣旨と、Web標準・Webデザイン


皆さん、こんな風に見えていますか?

今に、始まった話じゃありませんが・・・ショック!

交野市断酒会のホームページの話なんですけど・・・
当会会場の在るゆうゆうセンター内のパソコンは、Win2000でIE5.5なのですが、初めて私のサイトを見たときには、何が起こったのか分からない位にハンマーで後頭部を連打されたようなショックに襲われました。
まったく、私のデザインしたホームページとは似ても似つかない代物がそこに有ったのですから・・・
出来るだけ、環境が違っても見れるモノを作ろう!
その日からでした、あくなきWeb標準への挑戦が始まったのは・・・
f0101759_2853100.jpg
先日も、ゆうゆうセンターで確認したのですが、全体のセンターリングが出来てないし、文字設定どうなってるのか字小さすぎ・・・
(まぁこちらの使ってるサイズ記号emだからなのかも知れませんが・・・)
表示から文字サイズ変更して見てもらう方法で許してもらうかw
(呼び込めないCSSが、有るのかも知れない・・・透過PNGもダメだった!)
全ての環境に合わすと云う完ぺき主義への囚われから、ナカナカ抜け出せませんでしたがボチボチ抜けようと思います。
Win2002でIE7とMozilla FirefoxとOperaの3つのブラウザでの環境確認で良しとしようと決めました!
だから、デザイン崩れる環境の方、見苦しいかもですが我慢して見てやって下さい。

もともとは、HTMLやCSSを使いこなせる為に練習と思って軽い気持ちで作り始めたサイトでしたが、『継続は力なり』なのか深みにハマり本気で作ろうと思うようになっていたのでした。
今は、念願で有った、『交野市』の検索で、上位に表示されてたいへん嬉しいのです。
なぜなら、当初の目的であった『地域の人に見てもらう。』その為にも、『交野市』の検索での上位は夢だったのです。
だから、地域向けに断酒への取っ掛かりになるような内容、堅苦しくなく、しかし真剣さを伝え怖さを知ってもらえるようなモノにしたいと思う今日この頃♪
決して全国向けに作ってないし、内容も専門的な事は他に素晴らしいサイトが山ほど有るのでリンクさせてもらって、お任せしようと思うのです。
TOPデザインも、だいたい決まってきたし、何より、『断酒会』の検索では、1ページ目に表示されるように成りましたので、あちらこちらの目を付けていたサイトさんへリンクの申し込みに、お願いしてまわりました。
これからは、『アルコール依存症』や『アルコール』の検索でも上位へ来る事を励みに頑張ろうと思っているのです。

これからが、大変で内容を模索検討しなければです。
考えていなかったのかと言われると困りますが、デザインばかり気にしながらも・・・
方向性を暗中模索し、まとまらなかったし、文章力の無さに涙し、お腹出てきたし、イロイロあったし・・・ここまで来れたのは仲間の、お蔭です!感謝感謝♪
このブログを、始めて素敵な仲間と出会って何かしら形が見えてきたようにも思います。

皆さん、ありがとう♥そして、これからもヨロシク♪



ごますりすり更新でけた~♪ 
これからも、楽しみながら作っていきたいと思います。。。(^o^)v ブイ♥

[PR]
by black-board | 2006-11-07 02:01 | HTMLの道具箱 | Trackback | Comments(9)

おまちどうさま、かな?


拝啓、とんぼさんへ


パソコンを、どう使うかは、とんぼさんの自由です。
ネット界には、イロイロな人達が入り込んでいますので少しずつ理解していけば良いと思います。
f0101759_214943100.jpg
とんぼさん、イメージ図 (シブイ男です!)


さて、ネット界には多くの小物のフリーソフト(無料)が流出しています。
利用できるものは利用していきましょう。
その為にも持っていれば良い物を一つ紹介しておきます。

f0101759_2113748.gif+Lhaca
↑クリックして、新しいウインドウでLhacaのページを開いて下さい。
私は、デラックス版のVersion 1.20をインストールしています。
(ソフトダウンロードの際に必要となります。)

下に、ソフトを扱っている2大サイトを紹介しておきます。
Vector Softライブラリ
窓の杜
最初は、眺めてどのような物が有るのかを知っておくだけでも良いと思います。

FWINDOWS.com←WINDOWSの調べ物に使ってみて下さい。

タイピングステーション←キーボードの配列を覚えるために、軽量で使いやすいと思います。


何か一つ始めると枝葉が分かれて色々と覚えれると思うので、ブログでも始めましょ!
[PR]
by black-board | 2006-10-30 00:21 | HTMLの道具箱 | Trackback | Comments(11)

本文リンクの件

ビリケンさんへ

Gooのブログを調べてみました。
TEXTエディターをHTMLエディターに変更してHTMLを編集するようですが、
リンクの書き込みはTEXTエディターでもHTMLタグが使えるようですし簡単です。
f0101759_13212049.jpg
下のHTMLエディターにしなくても上のTEXTエディターで出来ます。


■■■ そして、基本 ■■■

<a href="★" target="_blank">●</a>
 ↑ コピペして使って下さい。

★=URLを、入れます。
●=クリックする部分の文字を入れます。
target="_blank" を、削除すると新しい画面を開かずに移動します。

たとえば-------ビリケン断酒日誌-------の場合
<a href="http://blog.goo.ne.jp/nango75/" target="_blank">
ビリケン断酒日誌</a>
-------と成ります。(TEXTエディターにコピペするか書き込んで下さい。)

早い話が<a href・・・>と</a>で挟んでやれば良いわけです。
参考に・・・1と2の間辺りからはじめるホームページ講座









最近、マイブームで使っているOperaのブラウザです。

スキンが驚くほど豊富、アルラはアッサりしたものを選択してます。(変更簡単)
IEが席巻している現在の日本Web業界・・・
使えないサービスも有りますが、ネットサーフィン、サクサク軽くてお気に入りです。
f0101759_23545723.jpg
IEは勿論、NNの代わりにMozilla Firefoxもインストールしています。
何故か?アル中ですねぇ・・・それぞれのエンジンでのWeb標準の確認のためです。
ちなみに上のサイトは、プロバイダへFTPでアップロードしたアルラ正規のHPです。


参照 : 君、Operaをつかいたまへ
[PR]
by black-board | 2006-09-28 23:57 | HTMLの道具箱 | Trackback(1) | Comments(5)

本文にリンクを貼る方法

※タグが作動しないようにHTML不使用で記入しています。

■■■ 基本 ■■■

<a href="★" target="_blank">●</a>
 ↑ コピペして使って下さい。

★=URLを、入れます。
●=クリックする部分の文字を入れます。
target="_blank" を、削除すると新しい画面を開かずに移動します。


■■■ 個別にリンクの色を変える方法 ■■■

----- スキン編集画面CSSへ記入 -----

DIV.URI A:LINK {COLOR: #00F; TEXT-DECORATION: NONE}
DIV.URI A:VISITED {COLOR: #00F; TEXT-DECORATION: NONE}
DIV.URI A:ACTIVE { COLOR: #00F; TEXT-DECORATION: NONE }
DIV.URI A:HOVER {COLOR: #F00; TEXT-DECORATION: NONE}
※コツが有って一番下に記入する事!

色を変えるには、F00・00Fの部分を変えます。
今回、3つですが、文字の時のように6つでも記入できます。

※URIの部分が任意で個別化できます。

----- 本文記入タグ -----

<DIV CLASS=URI>
<a href="http://www.geocities.jp/katano_d/top.html" target="_blank">
http://www.geocities.jp/katano_d/top.html
</a></DIV>
 ↑ コピペして使って下さい。
(便宜上、改行していますが改行ナシし変更して下さい)

※URIの部分が任意で個別化していますので、
------------------------------ CSSと同じ文字を挿入して下さい。

f0101759_16584577.jpg
サンプル見本を、下に作っています。
[PR]
by black-board | 2006-05-01 18:33 | HTMLの道具箱 | Trackback | Comments(0)

サンプル見本です。

↓こんな感じです!(^^)v

[PR]
by black-board | 2006-05-01 17:41 | HTMLの道具箱 | Trackback

見本(本文内引文の枠の作り方)

今回は、パンタさんの要望にお答えして!

投稿画面に枠を使用する方法を書きます。(テーブルタグは使えません!)
尚、一部ソースはたま猫さんの所から、お借りして来たものを使っております。
(かってに、ゴメンなさい♪)

アルラは、額縁として利用しようと思います。(↓使用例)
f0101759_235311.gif

スキン編集など詳しくはすみさんのブログを参考にして下さい。

(とても楽しいブログですよ♪)

本文内の枠の作り方
-----------------------文章編集部↓------------------------

<blockquote>文章をここから書きます♪
</blockquote>

※開始タグから改行せずに書いたほうが上部空白の間隔が適正です。
 (終了タグは改行してもOKでした。)

-------------------------CSS部↓-------------------------

スキンの変更→編集ページで下のCSS(スタイルシート)編集に書き込むタグです。

BLOCKQUOTE { margin: 16px; padding: 10px; border: solid 1px #d3e6b6 }

最後の数字の部分の6桁16進数の数字を書き換えると線の色が変わります。
カラーチャートは、すみさんお勧め原色大辞典を参照して下さい。

※注意:スキンを変えるたびにCSS部にタグを書き込まないと枠は消えてしまいます。

solid

solid

solid

応用編
solidの部分を書き換えると以下の様になりますよ。
(線の太さを、5px に書き換えたものです。)

BLOCKQUOTE { margin: 16px; padding: 10px;
border: solid 1px #d3e6b6 }

margin:  (線枠外側の空白領域)
padding: (線枠内側の文字との空白領域)
border: (線の種類) (太さ)px #(線の色)

double

dashed

dotted

groove

ridge

inset

outset
f0101759_0155347.jpg
[PR]
by black-board | 2006-04-15 22:52 | HTMLの道具箱 | Trackback | Comments(9)