|
テーマ:ホームページ作成の悩み(567)
カテゴリ:バカネコPC講座
![]() 久々に、バカネコ講座。 本日の講義は、写真と文章の配置について、一般的なテーブルレイアウトの 方法を紹介する。 次のような質問があった。 左に写真を貼り付けその右側に写真の説明を3行ほど つけたいのですが、うまくレイアウトできません。 で、写真を【align="left"】にしたところ小さい 画面では、良かったのですが【最大化】してみると 写真が左の隅っこで説明文とは離れてしまいます! ホームページを作り始めると、誰でもぶつかる問題である。 こういうのは、tableタグを使って、簡単な表を組み、 写真と文章を分けて流し込んでやると、簡単にレイアウトできる。 例によって、超おおざっぱに解説しよう。 さて、左に写真、右に何行かの文章であるから、 マスがふたつ、横に並んだ表に、材料を流し込めばよい。 テーブルというと、苦手な方もおられるようだが、原理は簡単だ。 今日は、いつもとは逆に、小さい部分から、表を作ってみる。 たった5つの手順で、HTMLが完成する。 手順1 材料となる写真はあらかじめ、画像倉庫などに用意しておき、 その場所を、MyURLとする。 すると、画像表示HTMLの基本形は、 <img src="MyURL"> となる。 手順2 上記のHTMLを、<td>タグと</td>タグで囲む。 これで、1マス分のデータが、一丁上がり。 <td><img src="MyURL"></td> 手順3 これに文章用のマスを足す。 何のことはない、同じ発想で、<td>文章</td>を横に並べるだけだ。 中身は後で書くとして、今は「文章」とだけ、入れておく。 <td><img src="MyURL"></td><td>文章</td> これで、2マス分のデータが出来た。 手順4 これら2マスが、1行であることを示す必要がある。 ここから、ここまでが1行だよ、とタグで明示するために、 <tr>タグで囲む。 <tr><td><img src="MyURL"></td><td>文章</td></tr> 手順5 さて、仕上げに、これがテーブルであることを示すタグを書く。 これも、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> 自動改行について 日記ページの場合は、自動改行されるので、上の例では、すべて1行になるように、 つなげて書いてある。 「文章」の部分にある<br>は、書かずに、ただ改行するだけでもよい。 しかし、通常のホームページ、あるいは、自動改行なしにセット してあるフリーページの場合は、「文章」のところを改行するには 必ず、<br>タグを入れなければならない。 そのかわり、各タグを1行につなげて書く必要はない。 すなわち、以下のように書くことも出来る。 <table> <tr> <td> <img src="MyURL"> </td> <td> うちのバカネコはヒマラヤン種。<br> ペルシャの長毛とシャム猫の色、<br> 両方を受け継いでいる。 </td> </table> まあ、横書きを縦書きに、なおしただけであるが...。 【本日のポイント】 1.画像の横に、複数行の文章を配置するには、 テーブルレイアウトという方法がある。 2.マスを2つ用意して、それぞれに画像と、文章を別々に流し込む。 【注意事項】 テーブルによるレイアウトは、直感的でわかりやすく、ブラウザを選ばないので、 非常によく使われる方法である。 そのへんで、無料配布されているテンプレートも、これを使ったものは多い。 しかし、、tableは本来、表を作るためのものであるから、レイアウトに使うのは 好ましくないと、お偉いさん方は言っている。 レイアウトなど、見栄えに関するものは、中身の情報とは関係ないから、 CSSでやってくれ、というわけだ。 ( CSSというのは、見てくれを決める規格のこと ) そうはいっても、HTMLでさえ、ひぃひぃ言っている初心者に、 CSSでレイアウトせよ、というのは、ちと酷な話である。 とりあえずは、テーブルの学習をかねて、ここから覚えよう。 【ダウンロードページ】 ・楽天日記専用バックアップツール、バーニャン3号のサンプル版、 「バーニャン・ミニ」のダウンロードはこちら。 ・にゃんタグのサンプル版は、このページの中段付近。 ・バカネコ・ビューアのダウンロードはここ。 1日1票! ブログランキング→ ![]() ※バカネコ講座では、安全な方法を選んで紹介していますが、 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。 ネコでもわかるPC講座はこちら → バカネコ講座 バカネコ村特製!手抜きツール → バカネコソフト 【楽天トラベル】 バカネコ講座 バカネコソフト バカネコ村 爆笑ガイド 猫砂の研究 パソコン購入費用の削り方 現物の投下位置 ずぼらなアクセスアップ ページを読みやすくする方法 バーニャン・ミニ 楽天日記のバックアップ にゃんこのコスプレ テキストリンク下線の消し方 楽しめるアフィリ 己を知れ 自分のPCを知る バカネコ・ビューア バーニャン3号 にゃんタグ・フルバージョン The Power ! 楽天日記の保存なら、バーニャン3号! 日記のテキストだけじゃなく、コメントも画像も保存したい。 トップページも残したい。 フリーページも全部、画像付きでバックアップしたい。 特定期間の日記だけ取りたい。 1000ページ以上あるんだけど、なんとかラクして、ダウンロードできないかしら。 ついでに、ダウンロードしたファイルの一覧もあったらいいな、リンク付きで...。 バーニャン3号なら、これらが全部できます。 しかも、クリック一発で。
画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 このサイトの新着記事の通知をご希望の方はご利用ください。
[バカネコPC講座] カテゴリの最新記事
|
|