ホーム＞J-CONT＞談義ホーム＞HTMLの事＞自作のページ＞自作のページ２

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


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

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

ファイルを辿る

カッパ　../ （点々スラッシュ）て何かッパ？美味いんかッパぁ？

履歴転進

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

　　　　　　大親
　　　親１━┻━親２　　　義父　　　　母　　　父
　　　┏┻…　…┻━┓　　┗━┳━┻━┳┛
　　　┃　　　　　　　　 ┃　　　　　┃　　　　 ┃
　　従兄弟　　　　　　義兄━━義姉？　　 ┃
　　　┃　　　　　　　　　　　　　　　　　　　　　┃
　　　┃　　　　　　　　　　　　　　　　　　　　　┃
　　遠縁　　　　　　　　　　　　　　　　　　　　大元帥

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

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

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

テーブル（箱）

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

履歴転進

カッパ♥よくお腰いただきカッパ、え〜お尻いただけん事をばﾑﾆﾑﾆお手ほどきさせて頂きカッパと
（ボクッ・殴られた皿が割れた）
大元帥引っ込めｻﾙﾌﾞﾀｶｯﾊﾟ あ〜、じゃまずタテヨコ２つずつ４つ部屋の箱を作ってみるね。

<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>
平安 チアガ
メガネ ツンツン
大元帥上のひな形を表示させると、左の様なテーブルになるのだ（画像要素は略記）。
　実際はもっと細かく要素を書込むが、ど基本という事で。
　平安とチアガが上段、メガネとツンツンが下段という風に並んでるが、最初の２人と後の２人を分けてるのは <tr> というタグだとお判りかな？

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

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

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

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

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

テーブル・続き

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

履歴転進

カッパ…。
（こういうの、苦手でカッパ…）
大元帥（ｵﾏｲ…汗）え〜、ご相談の主旨は…


ダメですー。
（・Ａ・）BAD!!
イイですー。
（・∀・）GOOD

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

<td><img src="○○.gif">　←行替えしてる　（・Ａ・）BAD!!
</td>

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

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

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

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

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

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

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

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

メガネ(c)PHALSAIL HeadQuarters

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