|
|
|
2005年07月14日
テーマ：ホームページ作成の悩み(545)
カテゴリ：バカネコＰＣ講座
 久々に、バカネコ講座。 本日の講義は、写真と文章の配置について、一般的なテーブルレイアウトの 方法を紹介する。 次のような質問があった。 左に写真を貼り付けその右側に写真の説明を３行ほど つけたいのですが、うまくレイアウトできません。 で、写真を【align="left"】にしたところ小さい 画面では、良かったのですが【最大化】してみると 写真が左の隅っこで説明文とは離れてしまいます！ ホームページを作り始めると、誰でもぶつかる問題である。 こういうのは、tableタグを使って、簡単な表を組み、 写真と文章を分けて流し込んでやると、簡単にレイアウトできる。 例によって、超おおざっぱに解説しよう。 さて、左に写真、右に何行かの文章であるから、 マスがふたつ、横に並んだ表に、材料を流し込めばよい。 テーブルというと、苦手な方もおられるようだが、原理は簡単だ。 今日は、いつもとは逆に、小さい部分から、表を作ってみる。 たった５つの手順で、HTMLが完成する。 手順１ 材料となる写真はあらかじめ、画像倉庫などに用意しておき、 その場所を、MyURLとする。 すると、画像表示HTMLの基本形は、 <img src="MyURL"> となる。 手順２ 上記のHTMLを、<td>タグと</td>タグで囲む。 これで、１マス分のデータが、一丁上がり。 <td><img src="MyURL"></td> 手順３ これに文章用のマスを足す。 何のことはない、同じ発想で、<td>文章</td>を横に並べるだけだ。 中身は後で書くとして、今は「文章」とだけ、入れておく。 <td><img src="MyURL"></td><td>文章</td> これで、２マス分のデータが出来た。 手順４ これら２マスが、１行であることを示す必要がある。 ここから、ここまでが１行だよ、とタグで明示するために、 <tr>タグで囲む。 <tr><td><img src="MyURL"></td><td>文章</td></tr> 手順５ さて、仕上げに、これがテーブルであることを示すタグを書く。 これも、tableタグで挟むだけだ。 <table><tr><td><img src="MyURL"></td><td>文章</td></tr></table> これで、基本的なテーブルができあがった。 あとは、写真の右に置く説明文を用意して、先ほどの 「文章」と書いたところに書き込むだけである。 結果はこうなる。 ↓
HTMLの書き方 例 ↓ <table><tr><td><img src="MyURL"></td><td>うちのバカネコはヒマラヤン種。<br>ペルシャの長毛とシャム猫の色、<br> 両方を受け継いでいる。</td></table> 自動改行について 日記ページの場合は、自動改行されるので、上の例では、すべて１行になるように、 つなげて書いてある。 「文章」の部分にある<br>は、書かずに、ただ改行するだけでもよい。 しかし、通常のホームページ、あるいは、自動改行なしにセット してあるフリーページの場合は、「文章」のところを改行するには 必ず、<br>タグを入れなければならない。 そのかわり、各タグを１行につなげて書く必要はない。 すなわち、以下のように書くことも出来る。 <table> <tr> <td> <img src="MyURL"> </td> <td> うちのバカネコはヒマラヤン種。<br> ペルシャの長毛とシャム猫の色、<br> 両方を受け継いでいる。 </td> </table> まあ、横書きを縦書きに、なおしただけであるが．．．。 【本日のポイント】 １．画像の横に、複数行の文章を配置するには、 テーブルレイアウトという方法がある。 ２．マスを２つ用意して、それぞれに画像と、文章を別々に流し込む。 【注意事項】 テーブルによるレイアウトは、直感的でわかりやすく、ブラウザを選ばないので、 非常によく使われる方法である。 そのへんで、無料配布されているテンプレートも、これを使ったものは多い。 しかし、、tableは本来、表を作るためのものであるから、レイアウトに使うのは 好ましくないと、お偉いさん方は言っている。 レイアウトなど、見栄えに関するものは、中身の情報とは関係ないから、 CSSでやってくれ、というわけだ。 （ CSSというのは、見てくれを決める規格のこと ） そうはいっても、HTMLでさえ、ひぃひぃ言っている初心者に、 CSSでレイアウトせよ、というのは、ちと酷な話である。 とりあえずは、テーブルの学習をかねて、ここから覚えよう。 【ダウンロードページ】 ・楽天日記専用バックアップツール、バーニャン３号のサンプル版、 「バーニャン・ミニ」のダウンロードはこちら。 ・にゃんタグのサンプル版は、このページの中段付近。 ・バカネコ・ビューアのダウンロードはここ。 １日１票！ ブログランキング→  ※バカネコ講座では、安全な方法を選んで紹介していますが、 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。 ネコでもわかるＰＣ講座はこちら → バカネコ講座 バカネコ村特製！手抜きツール → バカネコソフト 【楽天トラベル】 バカネコ講座 バカネコソフト バカネコ村 爆笑ガイド 猫砂の研究 パソコン購入費用の削り方 現物の投下位置 ずぼらなアクセスアップ ページを読みやすくする方法 バーニャン・ミニ 楽天日記のバックアップ にゃんこのコスプレ テキストリンク下線の消し方 楽しめるアフィリ 己を知れ 自分のＰＣを知る バカネコ・ビューア バーニャン３号 にゃんタグ・フルバージョン The Power ! 楽天日記の保存なら、バーニャン３号！ 日記のテキストだけじゃなく、コメントも画像も保存したい。 トップページも残したい。 フリーページも全部、画像付きでバックアップしたい。 特定期間の日記だけ取りたい。 1000ページ以上あるんだけど、なんとかラクして、ダウンロードできないかしら。 ついでに、ダウンロードしたファイルの一覧もあったらいいな、リンク付きで．．．。 バーニャン３号なら、これらが全部できます。 しかも、クリック一発で。
画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 このサイトの新着記事の通知をご希望の方はご利用ください。 お気に入りの記事を「いいね！」で応援しよう
[バカネコＰＣ講座] カテゴリの最新記事
入力ばかりで目が疲れたので
癒されたいとお邪魔しましたが 気を引くネタだったので帰宅後， またじっくりお邪魔します。 暑いので夏バテと夏風邪にはお気をつけて！ 私はお先に夏バテして４日間も休んでしまった・・・ おかげで３週間は休みなし！ 皆勤が惜しくなければ休んでも良いんだけど ２万はイタタッ・・・ (2005年07月15日 14時55分33秒)
これ！！これ！！どうやればいいのか困ってたのっ！
ほんとにっ！ こないだ「写真の横にコメントつけたいんだけどなぁ」っておもって！ 「改行しなけりゃいいのか？」なんてやって失敗して挫折してました！ あーりがとぉーーー！ (2005年07月15日 15時04分41秒)
テーブルで見栄えを整えるのは一番使うやりかたです(^▽^)
テーブルも簡単なのなら全然問題ないんだけど、 ブチ抜きにしたり入れ子にしたらもうお手上げ(T-T) 理屈がわかってても使いこなせないってのは･･･頭が悪いとしか･･･ＯＴＬ (2005年07月15日 15時20分42秒)
＞暑いので夏バテと夏風邪にはお気をつけて！
ありがとうございます。 ＞皆勤が惜しくなければ休んでも良いんだけど ＞２万はイタタッ・・・ うーむ。 痛し痒しですにゃ。 皆勤賞は、労基法では、アカンということになってるはずにゃんだけど．．．。 (2005年07月15日 15時45分14秒)
＞ブチ抜きにしたり入れ子にしたらもうお手上げ(T-T)
＞理屈がわかってても使いこなせないってのは･･･頭が悪いとしか･･･ＯＴＬ にゃはは！ ブチ抜きや、入れ子はやらない方がいいです。 最悪、ブラウザが解釈を間違えます。 HTMLを手打ちする場合は、相当、明晰な記憶力を要求されますし。 (2005年07月15日 15時48分37秒)
私もできましたぁ！
ありがとうございました。 でも一つ教えていただきたいのですが、文字の最後の列を写真の下のラインにそろえるにはどのようにすればいいのですか？ (2005年07月15日 20時18分19秒)
＞私もできましたぁ！
よっしゃあ！ ＞でも一つ教えていただきたいのですが、文字の最後の列を写真の下のラインにそろえるにはどのようにすればいいのですか？ あせらない、あせらない。 一気にやると。アタマが混乱しますよ？ (2005年07月15日 21時06分52秒)
いつか勉強したいと思いながら、
のばしのばしになっていた テーブルさん。 こうなっていたのねー 感動。。 これで、私のへぼい楽天フリマのページも 少し読みやすく出来るかも、です。 嬉しいわん☆ トドさん、ありがとう～～！！ (2005年07月16日 17時20分54秒)
＞いつか勉強したいと思いながら、
＞のばしのばしになっていた テーブルさん。 ＞こうなっていたのねー 感動。。 にゃはは！ 構造がわかると、カンタンでしょ？ といいつつ、私も最初は何が何だか、分かりませんでしたぁ～(笑) それが今では、解説する側ですから、面白いモンですね。 (2005年07月16日 19時14分05秒)
＞レイアウトなど、見栄えに関するものは、中身の情報とは関係ないから、
＞CSSでやってくれ、というわけだ。 ＞（ CSSというのは、見てくれを決める規格のこと ） 文字と写真の位置がずれないようにテーブルを使ってるんですが、またも知らない言葉が。 ＣＳＳって、どうやるんだろう？ 大体テーブルがレイアウトじゃないって、誰が決めたんだーッ 私はそれしか知らんわぃ（＾＾； (2005年07月17日 09時39分29秒)
＞文字と写真の位置がずれないようにテーブルを使ってるんですが、またも知らない言葉が。
＞ＣＳＳって、どうやるんだろう？ CSSというのは、カスケ－ディング・スタイル・シートの略です。 スタイルシートと同じと思っていただいてかまいません。 厳密には違うそうですが．．．。 ＞大体テーブルがレイアウトじゃないって、誰が決めたんだーッ W3C(World Wide Web Consortium)という団体のお偉方です。 ＞私はそれしか知らんわぃ（＾＾； にゃはは！ プロになるワケじゃないですから テーブルレイアウトでも間に合うでしょう。 (2005年07月17日 12時41分31秒)
＞＞私はそれしか知らんわぃ（＾＾；
＞ ＞にゃはは！ プロになるワケじゃないですから ＞テーブルレイアウトでも間に合うでしょう。 ----- いつもありがとうございます。 大体、テーブルということも楽天を始めてだいぶ立ってから知ったわけですから。 最初は手当たりしだい入れて、空白と改行でやってました。（笑） おかげさまでだいぶ見られるようになったと、自分では思ってるんですけどね。（＾＾； (2005年07月17日 18時29分26秒)
＞大体、テーブルということも楽天を始めてだいぶ立ってから知ったわけですから。
＞最初は手当たりしだい入れて、空白と改行でやってました。（笑） 私も初めはそうでしたよ(笑) (2005年07月17日 18時31分24秒) |
|
|||||||||||||||||||||||||||||||||||||||||||||
Re:レイアウト方法 １(07/14)
