Freepage List
全て
| カテゴリ未分類
| 中華街
| 写真
| バイク
| フリーエージェント（自営業）
| 更新情報
| 中国のお茶
| 楽天ブログ便利帳
| 当選招き
| 粘土でネコ作り
| トピックス
| お出掛け
2005.10.21
テーマ： ホームページ作成の悩み(549)
カテゴリ： 楽天ブログ便利帳
コピペで使えます。もうスペースで位置調整をしなくてもOK
「写真」と「文章」の位置
●写真：左右 交互にズラす
●文章：写真の中央
スペースを入れて、プレビューで位置を確認して・・・・。
大変ですよね。
そこで、
『テーブル』
のタグを使って、位置を調整してみます。
--------------------ここから------------------------------
ネコ発見
服の中に入って来る
ピタッとくっついて放れない
--------------------ここまで------------------------------
『テーブル』というのは、表や枠を作る為のタグです。
この『テーブル』の枠を見えない様にすると、
「写真」や「文章」の配置をデザインする事が出来ます。
今回は、この枠を、左右に寄せる事で、位置を調整してみました。
仕組み
では、上の写真は、どんなタグになっているか、見てみましょう。
『テーブル』は、枠を見える様にしてあります。
--------------------ここから------------------------------
<Div Align="left"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
ネコ発見</center> </TD></TR></TABLE> </Div>
<IMG src="画像のアドレス">
ネコ発見
<Div Align="right"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
服の中に入って来る</center> </Div>
<IMG src="画像のアドレス">
服の中に入って来る
<Div Align="left"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
ピタッとくっついて放れない</center> </TD></TR></TABLE> </Div>
<IMG src="画像のアドレス">
ピタッとくっついて放れない
--------------------ここまで------------------------------
まず、『テーブル』を、左右に寄せます。
■左に寄せる■
<Div Align="left"> ○ </Div>
■右に寄せる■
<Div Align="right"> ○ </Div>
『テーブル』の中に、写真・文章を入れます。
写真・文章 は、『テーブル』の中では、中央に寄っています。
■『テーブル』■
<TABLE width="60%"><TR><TD> ○ </TD></TR></TABLE>
■中央に寄せる■
<center>画像・文章</center>
調整の仕方
■『テーブル』■
<TABLE width=" 60% "><TR><TD> ○ </TD></TR></TABLE>
赤い数字（ここでは60%）を変える事で、左右のズレを調整します。
width=" 60% " →幅（ワイド）の広さを指定するタグ。
左に寄せる場合を例にすると、
少ない数ほど→枠が狭くなり→左に寄ります。
実際に数字を変えて見みます。
５０％
この場合、枠より写真の方が大きい為、一番左に寄ってしまいました。
（０％でも、枠が写真より小さくなる事はありません）
これでは意味がないので、もっと数字を大きくしてみます。
(０％にして、左右に寄せて、画像の下の中央に文章、という使い方も出来ますね)
ネコ発見
７５％
かなり真ん中に寄ってしまいました。
もっと左にあった方が変化を感じます。
やはり最初の ６０％ 位が調度良いでしょうか。
服の中に入って来る
極端に １００％ にしてみました。
ど真ん中になります。
枠は、最大の幅になります。
その枠の中で、写真が中央にある訳ですから、ど真ん中に来てしまいます。
これは意味がありませんね。
単に中央に寄せるだけなら、テーブル（表・枠）のタグは必要ありません。
■中央に寄せる■
<center> <IMG src="画像のアドレス"> </center>
ピタッとくっついて放れない
数字を変えると、位置を調整できる、という例。
好みですので、納得できる位置に来るように、数字を変えてみて下さい。
下のタグを「コピー」＆「貼り付け」で使って下さい。
■左に寄せる■
■右に寄せる■
画像タグって何？ → 日記に写真を貼る方法
画像タグの基礎 → 【タグ帳】画像タグ
【画像倉庫】【画像オプション】が一杯なんだけど・・・ → 画像置き場の紹介
【ブログランキング】
今日もクリック（投票）してニャ＾＾
ここ
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
【写 真 集】 【中 華 街】
【楽天ブログ便利帳】
「タグ帳」 「画像置き場」 「便利ソフト」
「楽天ブログQ&A よくある質問」 「ホームページ スペース」
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
「写真」と「文章」の位置
●写真：左右 交互にズラす
●文章：写真の中央
スペースを入れて、プレビューで位置を確認して・・・・。
大変ですよね。
そこで、
『テーブル』
のタグを使って、位置を調整してみます。
--------------------ここから------------------------------
ネコ発見
服の中に入って来る
ピタッとくっついて放れない
--------------------ここまで------------------------------
『テーブル』というのは、表や枠を作る為のタグです。
一つの枠
二つの枠
二つの枠
| 複数の枠 | 複数の枠 |
|---|---|
| 複数の枠 | 複数の枠 |
この『テーブル』の枠を見えない様にすると、
「写真」や「文章」の配置をデザインする事が出来ます。
今回は、この枠を、左右に寄せる事で、位置を調整してみました。
仕組み
では、上の写真は、どんなタグになっているか、見てみましょう。
『テーブル』は、枠を見える様にしてあります。
--------------------ここから------------------------------
<Div Align="left"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
ネコ発見</center> </TD></TR></TABLE> </Div>
ネコ発見
<Div Align="right"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
服の中に入って来る</center> </Div>
服の中に入って来る
<Div Align="left"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
ピタッとくっついて放れない</center> </TD></TR></TABLE> </Div>
ピタッとくっついて放れない
--------------------ここまで------------------------------
まず、『テーブル』を、左右に寄せます。
■左に寄せる■
<Div Align="left"> ○ </Div>
■右に寄せる■
<Div Align="right"> ○ </Div>
『テーブル』の中に、写真・文章を入れます。
写真・文章 は、『テーブル』の中では、中央に寄っています。
■『テーブル』■
<TABLE width="60%"><TR><TD> ○ </TD></TR></TABLE>
■中央に寄せる■
<center>画像・文章</center>
調整の仕方
■『テーブル』■
<TABLE width=" 60% "><TR><TD> ○ </TD></TR></TABLE>
赤い数字（ここでは60%）を変える事で、左右のズレを調整します。
width=" 60% " →幅（ワイド）の広さを指定するタグ。
左に寄せる場合を例にすると、
少ない数ほど→枠が狭くなり→左に寄ります。
実際に数字を変えて見みます。
５０％
この場合、枠より写真の方が大きい為、一番左に寄ってしまいました。
（０％でも、枠が写真より小さくなる事はありません）
これでは意味がないので、もっと数字を大きくしてみます。
(０％にして、左右に寄せて、画像の下の中央に文章、という使い方も出来ますね)
ネコ発見
７５％
かなり真ん中に寄ってしまいました。
もっと左にあった方が変化を感じます。
やはり最初の ６０％ 位が調度良いでしょうか。
服の中に入って来る
極端に １００％ にしてみました。
ど真ん中になります。
枠は、最大の幅になります。
その枠の中で、写真が中央にある訳ですから、ど真ん中に来てしまいます。
これは意味がありませんね。
単に中央に寄せるだけなら、テーブル（表・枠）のタグは必要ありません。
■中央に寄せる■
<center> <IMG src="画像のアドレス"> </center>
ピタッとくっついて放れない
数字を変えると、位置を調整できる、という例。
好みですので、納得できる位置に来るように、数字を変えてみて下さい。
下のタグを「コピー」＆「貼り付け」で使って下さい。
■左に寄せる■
<Div Align="left">
<TABLE width="60%"><TR><TD>
<center> 画像のタグ
コメント</center> </TD></TR></TABLE> </Div>
コメント</center> </TD></TR></TABLE> </Div>
■右に寄せる■
<Div Align="right">
<TABLE width="60%"><TR><TD>
<center> 画像のタグ
コメント</center> </TD></TR></TABLE> </Div>
コメント</center> </TD></TR></TABLE> </Div>
画像タグって何？ → 日記に写真を貼る方法
画像タグの基礎 → 【タグ帳】画像タグ
【画像倉庫】【画像オプション】が一杯なんだけど・・・ → 画像置き場の紹介
【ブログランキング】
今日もクリック（投票）してニャ＾＾
ここ
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
【写 真 集】 【中 華 街】
【楽天ブログ便利帳】
「タグ帳」 「画像置き場」 「便利ソフト」
「楽天ブログQ&A よくある質問」 「ホームページ スペース」
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
お気に入りの記事を「いいね！」で応援しよう
[楽天ブログ便利帳] カテゴリの最新記事
-
【図で解説】 動画置き場 容量無制限 『As… 2006.12.07 コメント(8)
-
【動画】 背伸び してでも 2006.12.06 コメント(15)
Re:【解説】写真を左右に 文章は写真の真ん中(10/21)
ぽんこ７２９
さん
ウ～ン便利なタグですね
さっそく頂いて帰ります
ブログ初心者のわたしにはspikyさんはとっても頼りがいのあるお兄さんです
実年齢はわたしのほうがだいぶ上だと思いますが（笑） (2005.10.21 09:44:27)
さっそく頂いて帰ります
ブログ初心者のわたしにはspikyさんはとっても頼りがいのあるお兄さんです
実年齢はわたしのほうがだいぶ上だと思いますが（笑） (2005.10.21 09:44:27)
★ ぽんこ７２９さん へ
spiky09
さん
＞ウ～ン便利なタグですね
＞さっそく頂いて帰ります
使ってやって下さ～い＾＾
誰も使わないであろうタグ、
というのも載せてみようと思ったのですが、
やっぱり使って貰えないと寂しいｗｗ＾＾；
＞ブログ初心者のわたしにはspikyさんはとっても頼りがいのあるお兄さんです
あぁ、冥利に尽きます＾＾
＞実年齢はわたしのほうがだいぶ上だと思いますが（笑）
３２歳でありんす。
えっと・・・私の方が年上かも・・・ｗｗｗｗ (2005.10.21 10:10:30)
＞さっそく頂いて帰ります
使ってやって下さ～い＾＾
誰も使わないであろうタグ、
というのも載せてみようと思ったのですが、
やっぱり使って貰えないと寂しいｗｗ＾＾；
＞ブログ初心者のわたしにはspikyさんはとっても頼りがいのあるお兄さんです
あぁ、冥利に尽きます＾＾
＞実年齢はわたしのほうがだいぶ上だと思いますが（笑）
３２歳でありんす。
えっと・・・私の方が年上かも・・・ｗｗｗｗ (2005.10.21 10:10:30)
Re:【解説】写真を左右に 文章は写真の真ん中(10/21)
やっしーぃ
さん
★ やっしーぃさん へ
spiky09
さん
＞ほぅ。。。。日記内でテーブルタグが使えるとは思ってなかった！！
＞これわ便利ぃぃぃ＾▽＾
テーブルを使うと、
写真や文章のレイアウトが楽になります。
こんだけ延々と書いておいて、私はさっぱり使っていませんｗｗ
だって～、デザインセンス無いんですも～んｗｗｗ
デザインする方法だけは知っていますｗｗｗｗｗｗｗ (2005.10.21 10:34:11)
＞これわ便利ぃぃぃ＾▽＾
テーブルを使うと、
写真や文章のレイアウトが楽になります。
こんだけ延々と書いておいて、私はさっぱり使っていませんｗｗ
だって～、デザインセンス無いんですも～んｗｗｗ
デザインする方法だけは知っていますｗｗｗｗｗｗｗ (2005.10.21 10:34:11)
Re:【解説】写真を左右に 文章は写真の真ん中(10/21)
ランランリンリン
さん
Re:【解説】写真を左右に 文章は写真の真ん中(10/21)
四季の風３６５
さん
感激です。
こういうの自分もできたらいいなと憧れ、できないだろうなと最初から諦めておりました。
また、この前みたいに、できるまでがんばってみます。ただし、私のことですから時間がかかると思います。
急用が出来てしまって、お礼を申し上げるのが遅れてしまいました。 (2005.10.21 20:04:58)
こういうの自分もできたらいいなと憧れ、できないだろうなと最初から諦めておりました。
また、この前みたいに、できるまでがんばってみます。ただし、私のことですから時間がかかると思います。
急用が出来てしまって、お礼を申し上げるのが遅れてしまいました。 (2005.10.21 20:04:58)
困った時はspikyさん・・・・
花鳥風月５２２
さん
壁紙の貼り方が分からなくて、「虎の巻」を見にきました～！すると、なにやら、とってもお役立ち情報が・・・・なんだか得した気分デス♪♪ホントに分かりやすい解説ですね！！ありがとうございました☆
(2005.10.21 20:18:17)
★ ランランリンリンさん へ
spiky09
さん
＞いつもお勉強させて頂いております。
＞お陰様で、spiky09さんのブログだけでここまで書ける様になりました。
＞また、挑戦してみたいと思ってます。
いつも写真、楽しみにしてます＾＾
少しでもお役に立てているなら、甲斐性というものです。
これからも色んな情報を載せていきます。今後とも よろしくです＾＾
バラは種類の多い花、と聞いていましたが、
色々なバラの写真を拝見して、その種類の多さに実感が湧き、驚いています。
バラ科、と言えば、サクラ。 サクラの紅葉も綺麗なものですね。
今年はこの寒さですので、紅葉も期待できそうです。
猫とバラの写真、今後も楽しみにしてます＾＾ (2005.10.22 05:14:15)
＞お陰様で、spiky09さんのブログだけでここまで書ける様になりました。
＞また、挑戦してみたいと思ってます。
いつも写真、楽しみにしてます＾＾
少しでもお役に立てているなら、甲斐性というものです。
これからも色んな情報を載せていきます。今後とも よろしくです＾＾
バラは種類の多い花、と聞いていましたが、
色々なバラの写真を拝見して、その種類の多さに実感が湧き、驚いています。
バラ科、と言えば、サクラ。 サクラの紅葉も綺麗なものですね。
今年はこの寒さですので、紅葉も期待できそうです。
猫とバラの写真、今後も楽しみにしてます＾＾ (2005.10.22 05:14:15)
★ 四季の風３６５さん へ
spiky09
さん
＞感激です。
＞こういうの自分もできたらいいなと憧れ、できないだろうなと最初から諦めておりました。
★すごい研究熱心ですね。
便利帳を作っている私よりも強いエネルギーを感じます。
（もっと写真を左に寄せた方がバランスが良い）とか、
（写真の真ん中に文章が来るようにしたい）とか、
そおいう所にこだわれる、という事は、素晴らしいですね。
私には、どうもデザインのセンスが無いようで、
語調を整えるだけで、力尽きてしまいます。
＞また、この前みたいに、できるまでがんばってみます。
＞ただし、私のことですから時間がかかると思います。
＞急用が出来てしまって、お礼を申し上げるのが遅れてしまいました。
★今回は、四季の風さんの日記を拝見していて、
この日記（タグの解説）を書こうと思いました。
紹介した方法で、写真と文字の位置調整の労が減ると良いですが、
熱心に取り組まれるので、かえって疲れさせてしまうでは、と心配もしています＾＾；
タグは「覚える」というより、辞書と同じで、必要な時に、
タグ帳から「コピーして使う」というのが良いと思います。
「マスターする」と、りきまないで、「実験してみる」という軽い気持ちでやってみて下さい。
上手くいかなければ、失敗する様な書き方をした私に説明のせいにして下さい。
そして、こんな風な結果になって上手く行かない、と教えて下さい。
失敗する、という事は、同じ失敗をする方が出てくる書き方だ、という事だと思います。
私の「説明の仕方の勉強」になります。
よろしくお願いします＾＾ (2005.10.22 05:53:41)
＞こういうの自分もできたらいいなと憧れ、できないだろうなと最初から諦めておりました。
★すごい研究熱心ですね。
便利帳を作っている私よりも強いエネルギーを感じます。
（もっと写真を左に寄せた方がバランスが良い）とか、
（写真の真ん中に文章が来るようにしたい）とか、
そおいう所にこだわれる、という事は、素晴らしいですね。
私には、どうもデザインのセンスが無いようで、
語調を整えるだけで、力尽きてしまいます。
＞また、この前みたいに、できるまでがんばってみます。
＞ただし、私のことですから時間がかかると思います。
＞急用が出来てしまって、お礼を申し上げるのが遅れてしまいました。
★今回は、四季の風さんの日記を拝見していて、
この日記（タグの解説）を書こうと思いました。
紹介した方法で、写真と文字の位置調整の労が減ると良いですが、
熱心に取り組まれるので、かえって疲れさせてしまうでは、と心配もしています＾＾；
タグは「覚える」というより、辞書と同じで、必要な時に、
タグ帳から「コピーして使う」というのが良いと思います。
「マスターする」と、りきまないで、「実験してみる」という軽い気持ちでやってみて下さい。
上手くいかなければ、失敗する様な書き方をした私に説明のせいにして下さい。
そして、こんな風な結果になって上手く行かない、と教えて下さい。
失敗する、という事は、同じ失敗をする方が出てくる書き方だ、という事だと思います。
私の「説明の仕方の勉強」になります。
よろしくお願いします＾＾ (2005.10.22 05:53:41)
★ 花鳥風月５２２さん へ
spiky09
さん
●壁紙の貼り方が分からなくて、「虎の巻」を見にきました～！
★あぁ、ページ全般のデザインをする、など、「設定」については書いてませんでしたね。
今後、そおいう面も整えて書いていけたら、と思いました。
有難う御座います。
壁紙、というのは、ページ全体の背景でしょうか。
それとも日記の背景でしょうか。
上手くいかない様でしたら、また気軽に声を掛けて下さい。
日記などを使って、方法を紹介させて頂きます。
●すると、なにやら、とってもお役立ち情報が・・・・なんだか得した気分デス♪♪
ホントに分かりやすい解説ですね！！ありがとうございました☆
★ありがとうございます＾＾
褒められて調子に乗るような事を言いますが、かなり力作です。
実は６時間かけて書きました。ぷぷぷ。
色を変えて見易くしたり、説明の仕方を変えてみたり、起承転結になる様に整理したり、
いろいろ色々イジってました。
分かり易い、とお褒め頂いたのですが、実は、自分では満足していないんです。
「一万文字」近くの文章になってしまいました。
それも、一度は「一万７千文字」になったしまいました。
日記は「一万文字」までしか受付けないので、半分近くに減らしています。
要するに、「最後のタグを「コピー」して、ここに画像と文章を入れてくれ」
と書けば、それで済んだ話のように思います。
無駄が多い、回りくどい説明だなぁ、と反省しております。 (2005.10.22 06:10:25)
★あぁ、ページ全般のデザインをする、など、「設定」については書いてませんでしたね。
今後、そおいう面も整えて書いていけたら、と思いました。
有難う御座います。
壁紙、というのは、ページ全体の背景でしょうか。
それとも日記の背景でしょうか。
上手くいかない様でしたら、また気軽に声を掛けて下さい。
日記などを使って、方法を紹介させて頂きます。
●すると、なにやら、とってもお役立ち情報が・・・・なんだか得した気分デス♪♪
ホントに分かりやすい解説ですね！！ありがとうございました☆
★ありがとうございます＾＾
褒められて調子に乗るような事を言いますが、かなり力作です。
実は６時間かけて書きました。ぷぷぷ。
色を変えて見易くしたり、説明の仕方を変えてみたり、起承転結になる様に整理したり、
いろいろ色々イジってました。
分かり易い、とお褒め頂いたのですが、実は、自分では満足していないんです。
「一万文字」近くの文章になってしまいました。
それも、一度は「一万７千文字」になったしまいました。
日記は「一万文字」までしか受付けないので、半分近くに減らしています。
要するに、「最後のタグを「コピー」して、ここに画像と文章を入れてくれ」
と書けば、それで済んだ話のように思います。
無駄が多い、回りくどい説明だなぁ、と反省しております。 (2005.10.22 06:10:25)
Re:【解説】写真を左右に 文章は写真の真ん中(10/21)
Ruheルーエ
さん
おはようございます。
先日四季の風さんのところでぼやいていた事の回答が
ここにあり驚きました。
今日実行してみます。
ご指導ありがとうございます。
ネットの輪ってすごいなぁ。。。
(2005.10.26 07:46:08)
先日四季の風さんのところでぼやいていた事の回答が
ここにあり驚きました。
今日実行してみます。
ご指導ありがとうございます。
ネットの輪ってすごいなぁ。。。
(2005.10.26 07:46:08)
★ Ruheルーエさん へ
spiky09
さん
●おはようございます。
先日四季の風さんのところでぼやいていた事の回答が
ここにあり驚きました。
今日実行してみます。
ご指導ありがとうございます。
ネットの輪ってすごいなぁ。。。
★日記、拝見しました。
完成ですね＾＾
分からない事などがありましたら、気軽に声を掛けて下さい＾＾ (2005.10.27 01:09:25)
先日四季の風さんのところでぼやいていた事の回答が
ここにあり驚きました。
今日実行してみます。
ご指導ありがとうございます。
ネットの輪ってすごいなぁ。。。
★日記、拝見しました。
完成ですね＾＾
分からない事などがありましたら、気軽に声を掛けて下さい＾＾ (2005.10.27 01:09:25)
【毎日開催】
15記事にいいね！で1ポイント
PR
spiky09
横浜中華街 お勧めの「お店」や「商品」を紹介。 中華街に住むネコの写真も載せています。
© Rakuten Group, Inc.
