Ｐａｇｅ 376 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼ページの構成について教えて下さい enoki 04/1/18(日) 10:08 ┣Re:ページの構成について教えて下さい you 04/1/18(日) 18:57 ┃ ┗Re:過去ログ 105 04/1/18(日) 20:26 ┃ ┗Re:過去ログ＆画像の回り込みについて質問 kaiku 04/1/18(日) 21:50 ┃ ┗Re:過去ログ＆画像の回り込みについて質問 むむりく 04/1/18(日) 23:45 ┃ ┗Re:過去ログ＆画像の回り込みについて質問 kaiku 04/1/19(月) 1:39 ┃ ┣Re:過去ログ＆画像の回り込みについて質問 むむりく 04/1/19(月) 3:43 ┃ ┃ ┗Re:過去ログ＆画像の回り込みについて質問 kaiku 04/1/20(火) 19:10 ┃ ┗Re:過去ログ＆画像の回り込みについて質問 ばあど 04/1/25(日) 20:18 ┗Re:ページの構成について教えて下さい enoki 04/1/25(日) 19:55 ┗Re:ページの構成について教えて下さい 105 04/1/26(月) 0:35 ─────────────────────────────────────── ■題名 ： ページの構成について教えて下さい ■名前 ： enoki ■日付 ： 04/1/18(日) 10:08 ■Ｗｅｂ ： http://enoki0312.hp.infoseek.co.jp -------------------------------------------------------------------------
| 画面の構成についての質問なんですが、 僕のページの上のほうにハーボット設置してあるんですけど、ハーボックスの横に文字を入れたいのですが、どうすればよいのでしょうか？ |
| ▼enokiさん： >画面の構成についての質問なんですが、 >僕のページの上のほうにハーボット設置してあるんですけど、ハーボックスの横に文字を入れたいのですが、どうすればよいのでしょうか？ ハーボックスを設置した事はないのですが（笑）、画像やテキストの配置にはCSSで回り込みの指定（または解除）をするか、いっそのことテーブルを利用して左右に配置する、と言うやり方があります。 過去ログで、同様に説明してある部分があります。 一度読んでみてください。 →【1371】絵が入らない（たろさサンの質問です） ・・・過去ログのアドレスは貼り付けちゃってもいいのかな？？？ ひとまず、読んでみてください。 |
| ▼youさん： >・・・過去ログのアドレスは貼り付けちゃってもいいのかな？？？ こんばんは。 過去ログは自由につかっちゃってください。 過去ログがけっこう溜まってきましたね。 画像関連、FTP関連、レイアウト関連の質問が多いので 種類ごとに過去ログをピックアップすると便利かなと考えています。 答え方はケースバイケースですけども、そういう一覧ページが あれば、答えやすくなりそうでしょうか？ |
| ▼105さん： >過去ログがけっこう溜まってきましたね。 >画像関連、FTP関連、レイアウト関連の質問が多いので >種類ごとに過去ログをピックアップすると便利かなと考えています。 > >答え方はケースバイケースですけども、そういう一覧ページが >あれば、答えやすくなりそうでしょうか？ このスレと同じ感じで詰まってたんでyouさんの教えてくださっている過去ログを見てみたんですが…正直探しにくいかもです(^_^;) 私が言うのもなんですが、過去ログが探しやすいと答える側よりも質問する側にとって便利かもしれませんね。せめて検索ができると良いかもと思います。 なんて人のサイトなので好き勝手言ってみたりして（マテ） で、話は変わるんですがやはり詰まっているので質問させていただきます。 スタイルシートで画像に文章を回り込ませるときに、 <img src="#" style="float:left;"> 回り込ませる文章 とすると文章が画像に対して上で揃う様になるんですがこれを、 <img src="#" align="middle"> 回り込ませる文章 とやった時の様に文章の配置を換えるにはどうすれば良いのでしょうか？ なんか簡単にできそうでできないです(-_-;)どうぞよろしくお願いします。 |
| <p> <img src="uri" align="middle"> 回り込ませる文章 </p> と結果を同じにしたいのでしたら、 <p> <img src="uri" style="vertical-align:middle;"> 回り込ませる文章 </p> ですね。 この場合テキストを回り込ませているわけではなく、 画像とテキストを並べたときの垂直表示位置を決めているだけです。 vertical-alignの値には、 長さ（実数値＋単位）やパーセント値もとれますので、 ある程度の微調整はできるかも。 line-heightやbaselineからの位置になるのですが… |
| ▼むむりくさん： お返事ありがとうございます！ が、せっかく答えていただいたのに微妙に質問の方が間違ってたかもです（汗） 申し訳ないっす。 回り込ませる部分の文章を複数行(というか<p>〜</p>)にしたいので <img src="#" align="middle"> <img src="#" style="vertical-align:middle;"> ↑だとできませんよね…たぶん。 <img src="#" align="left"> <img src="#" style="float:left;"> ↑だとできるんですが上に揃ってしまいます。 で、この二つの効果を同時に出せないのかな？と思ってる感じです。 文章の部分を<p>〜</p>とかにするならそっちに高さを設定して「vertical-align」を入れればできるかと思ったんですが、本をよく見たら一部の（？）インライン要素にしか効かないとのこと(￣□￣;)!! 一応妥協して<p>〜</p>の中にpadding-topで空白を入れてそれなりに見えるんですが…。 う〜む。やはりスタイルシートでテーブルのように表現するのは難しいですね(^_^;) 他にもっと良い方法がありましたら教えてくださるとありがたいです。 |
| なるほどなるほど。 回り込みのときは、可能な限り左上に表示されるようになってますからね。 p要素中のコンテンツ領域（テキストなどが表示される部分）の高さは変えられても、 肝腎なテキストの垂直位置は変えられないような…… だから、 > 一応妥協して<p>〜</p>の中にpadding-topで空白を入れてそれなりに見えるんですが…。 その方向で、やはり画像の高さからpaddingかmarginで大体の位置を決めるしかないのかも。 <img src="uri" style="float:left;margin-right:1em;"> <p style="margin-top:3em;">各要素はボックスという領域を持っています。ボックスの一番外の枠をマージン領域と言います。余白部分にあたるもので、背景色は常に透過です。修学旅行など、みんなで蒲団を並べた時、蒲団と蒲団の距離に当たる部分です。</p> あとはビルダーのように絶対配置してしまうか…… いずれにせよ、画像の高さを考えて調節しなければいけませんので意味がない。 > やはりスタイルシートでテーブルのように表現するのは難しいですね(^_^;) テーブルは表ですからね。 垂直位置が変えられますが、p要素は段落なので…… 「原稿用紙はちゃんと上から使え」ということなんでしょう。 お力になれず申し訳ないです。 |
| ▼むむりくさん： アドバイスありがとうございます！ >垂直位置が変えられますが、p要素は段落なので…… >「原稿用紙はちゃんと上から使え」ということなんでしょう。 なるほど。すごくわかり易いです（笑） 確かに<p>の意味を考えれば真ん中に配置と言うのはおかしいですもんね(^_^;) ただ、他にも色々試してみたところ<div>等も同様にできない様子。 う〜む。<div>は手持ちの本を見る限りだと、「意味の無いボックス」見たいな感じで定義されているので縦方向の配置ができても良いと思うんですが…残念です。 >お力になれず申し訳ないです。 いえいえ。とんでもないです。 いつも無理難題をきてるので答えて頂けるだけでありがたく思います。 これからもよろしくお願いします。 |
| ども、毎度お世話になっとります。 新参者のばあどです。 >回り込ませる部分の文章を複数行(というか<p>〜</p>)にしたいので > ><img src="#" align="middle"> ><img src="#" style="vertical-align:middle;"> > >↑だとできませんよね…たぶん。 > ><img src="#" align="left"> ><img src="#" style="float:left;"> > >↑だとできるんですが上に揃ってしまいます。 >で、この二つの効果を同時に出せないのかな？と思ってる感じです。 なるほど。 出来ないことはないです。 が、対応しているブラウザは多分ゼロでしょう・・・ 一応、そうなるはずの机上のサンプルを書きます(^_^; <div> <p> 文書<br> 文書<br> 文書 </p> <img src="" width="" height="" alt="" title=""> </div> で、 <style type="text/css"><!-- div{ position:relative; } div p{ position:absolute; top:0;bottom:0; margin:auto; margin-left:画像の幅px; } --></style> |
| どうもご協力ありがとうございました！ あと、、凄く基本的のようなことなんですけど 直リンってなんですか 教えてください、（スマソ |
| ▼enokiさん： >あと、、凄く基本的のようなことなんですけど >直リンってなんですか http://〜で始まる他サイトの画像をリンクすることを指します。 例）<img src="http://〜"> 詳しくは↓のキーワードからどうぞ。 参考キーワード ---------------------------------------------- http://www.google.co.jp/ 「直リンクとは」 ---------------------------------------------- ※キーワードは自分で情報を探す場合に「こんなキーワード」 で 探すといいよという提案です。 googleで検索するときは 検索結果画面でキャッシュを押すと探しやすくなります。 |