ホームJ-CONT談義ホームHTMLの事自作のページ>自作のページ2

初心者ホームページ
自作支援のページ2

メガネ  ここは、超ど初心者でもなんとかWebページ(ホームページ)を作れるようにするコーナーです。
 重くなってきましたので分割しました。
 …ここドコですか?


大元帥まー深みにはまっちゃったし…こんな背景で、な〜んて思っちゃったりなんかしちゃったりして。
 

メガネこちらのページでは、ページを作ってからの幾らかの小技や注意点を中心に提起したいと考えています。

ファイルを辿る

カッパ ../ (点々スラッシュ)て何かッパ?美味いんかッパぁ?

履歴転進

大元帥オマイ地雷踏んだな…判らんで電脳会社に入ったクセに。
 これは飛び先を、出発点から見た位置で表す為の部品である。
( HTML のウリであるリンクシステムなので、やや理論説明容赦)
 オマイにも判るよーに図にしてやるわ:

      大親
   親1━┻━親2   義父    母   父
   ┏┻… …┻━┓  ┗━┳━┻━┳┛
   ┃         ┃     ┃     ┃
  従兄弟      義兄━━義姉?   ┃
   ┃                     ┃
   ┃                     ┃
  遠縁                    大元帥

大元帥ワシから見て遠縁は、どういう立場となるかな?  カッパ(皿が割れた)
答え:アカの他人
 まー(無視)、ファイルの場合はもっとずっとシンプルだから心配無い。

      phalsail ↓下がる時 /(スラッシュ)
   …┳━┻━┓
    kao    java
         …┻━┓
            kouza
                      …┻━┓
                              ここ ↑上がる時 ../(点々スラッシュ)

メガネ誰なんですかその人…横棒の所で考えて下さいね。
大元帥../ は上の階層、「子」から見た「親」の階層だよ、という印。だから ../../ と2つあると2段上という事になるよ。
 この講座のページで言えば、全体で phalsail/java/kouza/ の階層、つまり地下2階の部屋にある様なモノ。
 だから、地下1階の別の部屋 kao に行きたい場合、いちいち phalsail まで上がって kao に行かねばならんのです。../../kao/(2階上がって kao へ)
(小声:実の所、ここは表紙( index.htm )から直リンされているので、深いけど浅いページである。)
(小声・その2:他に更に「 ./ 」ドットスラッシュ、というのがあって、これはその階層そのモノを表しますが、基本無視されます。とゆーか、混乱の元でしたね)


テーブル(箱)

平安 あの、箱のワク…テーブルとお呼びするものでしたかしら?
そのようなモノの作り方などはございませんの?
よく見かけますでしょ。便利なので是非お教え願えないかと。

履歴転進

カッパ♥よくお腰いただきカッパ、え〜お尻いただけん事をばムニムニお手ほどきさせて頂きカッパと
ボクッ・殴られた皿が割れた)
大元帥引っ込めサルブタカッパ あ〜、じゃまずタテヨコ2つずつ4つ部屋の箱を作ってみるね。

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../../kao/smlima.gif"></td>
<td><img src="../../kao/smlnag.gif"></td>
</tr>
<tr>
<td><img src="../../kao/smlohb.gif"></td>
<td><img src="../../kao/smleba.gif"></td>
</tr>
</table>
平安 チアガ
メガネ ツンツン
大元帥上のひな形を表示させると、左の様なテーブルになるのだ(画像要素は略記)。
 実際はもっと細かく要素を書込むが、ど基本という事で。
 平安チアガが上段、メガネツンツンが下段という風に並んでるが、最初の2人と後の2人を分けてるのは <tr> というタグだとお判りかな?

 最初に <table> タグ、とゆー家を建てて…例え話だからね。
 次に <tr> タグで「段・1階2階」を決めて、それから小部屋 <td> (「行・横並び」)を分けるのである。順番厳守だぞ。ま、逆にしても自分が困るだけだがね。

平安 チアガ メガネ ツンツン

 ↑これは、真ん中の </tr><tr> を取ったので、1段になった(つまり段が無い)モノ。

平安
チアガ
メガネ
ツンツン
 ←これは、全部の <td> に <tr> を付けたモノだが判るかな?上とは逆に1箱が1段になっているぞ。こんなの滅多に使わんわ。
 border, cellpadding, cellspacing 等の要素については、実際に書込んで数字を入れてみれば実感出来る。てか実感せよ。
大元帥どうもこのテーブルについては、昔から敬遠する輩がいて困っておる。使いこなせればこんなに便利なモノは無いと言ふに。
メガネでも、レイアウトに使ってはいけないとW3C(エライ人たち)が言ってたと聞きましたが?
大元帥都市伝説ぢゃ。使えるモノは使ってしまえ。
 ちなみに「レイアウト」としては、いま現在ココに使用中である。
 つまり表としてでなく、図版と文章の置き具合に使っているという事よ。いいじゃん。

平安んン…ええと、ワク線が鬱陶しいのですが?
大元帥 border ってのがあるでしょ、数値を 0 にすればワク線は消えるよ。
 でも作ってる最中はワク線を見える様にしておくと便利だね。


テーブル・続き

チアガ あらら、大変ですー。
 言われた通りにしてみたですが、ハコの中で絵が浮き上がるですー。
 助けてくれですぅ〜。あとついでに背景画像も教えろ下さいですぅ。
※ブラウザ・OSの仕様によっては、この問題は出て来ません※

履歴転進

カッパ…。
(こういうの、苦手でカッパ…)
大元帥(オマイ…汗)え〜、ご相談の主旨は…


ダメですー。
(・A・)BAD!!
イイですー。
(・∀・)GOOD

↑こういう事かな?左の絵の下がちょっと開いてるです。
 意外とこの現象を解説してるモノが無いです。でも原因は単純です。

<td><img src="○○.gif"> ←行替えしてる (・A・)BAD!!
</td>

<td><img src="○○.gif"></td> ←行替えしない (・∀・)GOOD

<td>
<img src="○○.gif"></td> ←頭の方はなぜか無問題 (・_・)GOOD

チアガたったこんだけの事で見栄えが変わるです。注意です。
大元帥行替えすると、半角空白を1つ挟むのと同じになるです。
 コンピは律義だから、それも表示しようとしてこうなるです。
 なお頭の <td> の方は行替えしても平気ですです。
メガネ語調が変わってますよ。ところでハコの背景画像の事は、どうするんですか?

<td background="○○.jpg"> ←HTML

<td style="background:url('○○.jpg')
lightskyblue no-repeat center bottom;"> ←CSS

大元帥ハコ <td> の中に、上の様な文言を書き加えれば良いですー。
 <body> タグの時と同じで 上がHTML、下はCSSですぅう。
メガネ基本は、扱い方は変らないんですね。


ブログのネガキャン?【コラム・ブログって2】

 別にブログが悪いというつもりは無いのですが…ただ明らかに、ノリの軽すぎるモノが少なくないでしょう?(もちろんHTMLページの方にもやが)
 更新しない放置プレイはもちろん論外ですが、何か検索対応の偏った書き方やら困るのです、検索してる時に無関係な所が引っ掛かるから。
(狙ってるヤツ・釣りアフェもいるし)
 やる気のある人間だけが続けられる様な環境が欲しい所です。ブログなんての、毎日書く手間省きを進化させて作られたんでしょ、確か最初は?
←とか言ってるエラソーが、こんなマンガ描く
 あと広告キャンセルとか出来ないもんですかね。場合によっては、ダウンロード途中で止めてオフラインで入り直すと壊れレイアウトながら読めたりしますから。
「グチ」になっとるわ…
 

メガネ(c)PHALSAIL HeadQuarters

Web談義ホーム HTML サイトホーム 自作支援1 履歴転進