Ｐａｇｅ 740 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼画像の寄せ方について 紫雨 04/8/9(月) 23:45 ┗Re:画像の寄せ方について らら 04/8/9(月) 23:55 ┗Re:画像の寄せ方について カヅサツ 04/8/10(火) 17:55 ┗Re:画像の寄せ方について らら 04/8/10(火) 19:02 ┣Re:画像の寄せ方について 紫雨 04/8/10(火) 20:25 ┃ ┗alignは非推奨。使っちゃいけないのか？ 105 04/8/11(水) 0:43 ┗Re:画像の寄せ方について カヅサツ 04/8/12(木) 15:25 ┗Re:画像の寄せ方について らら 04/8/12(木) 15:43 ─────────────────────────────────────── ■題名 ： 画像の寄せ方について ■名前 ： 紫雨 ■日付 ： 04/8/9(月) 23:45 -------------------------------------------------------------------------
| どうも初めまして。いきなり質問なのですが画像を右端や左端に寄せたいのですがやり方がよくわかりません。誰か教えてくださいm(＿＿)m真ん中に寄せるのはわかるんですが… |
| 一番簡単なのは <img src="画像のパス" alt="" width="幅" height="高さ" align="right"> <img src="画像のパス" alt="" width="幅" height="高さ" align="left"> でもこれは非推奨。 こっちかな <img src="画像のパス" alt="" width="幅" height="高さ" style="float:right;"> <img src="画像のパス" alt="" width="幅" height="高さ" style="float:left;"> これでなるかなぁ…。 |
| > 一番簡単なのは > <img src="画像のパス" alt="" width="幅" height="高さ" align="right"> > <img src="画像のパス" alt="" width="幅" height="高さ" align="left"> > でもこれは非推奨。 > こっちかな > <img src="画像のパス" alt="" width="幅" height="高さ" style="float:right;"> > <img src="画像のパス" alt="" width="幅" height="高さ" style="float:left;"> > これでなるかなぁ…。 ええと、これは「回り込み」です。 > 画像を右端や左端に寄せたいのですがやり方がよくわかりません。 > 真ん中に寄せるのはわかるんですが… 真ん中は center ですから、右は right 。左端は left です。 |
| >ええと、これは「回り込み」です。 そうでした(>_<) 浅はかでした。申し訳ありません。 <div style="text-align:right;"> <img src="画像のパス" alt="" width="幅" height="高さ"> </div> <div style="text-align:left;"> <img src="画像のパス" alt="" width="幅" height="高さ"> </div> こんな感じでしょうか。 これも違うかなぁ。 <div align="right">〜</div>とか……。 どんな方法が一般的なのでしょう……。 |
| <div align="right">〜</div>このやり方でやってみたら右端に寄りました。でも非推奨とはどうゆうことでしょう？問題なくできたと思うのですがサーバーにアップしたときにおかしくなるのでしょうか？ |
| ▼紫雨さん： ><div align="right">〜</div>このやり方でやってみたら右端に寄りました。でも非推奨とはどうゆうことでしょう？問題なくできたと思うのですがサーバーにアップしたときにおかしくなるのでしょうか？ こんばんは。 サーバーにアップしても問題なく表示できます。 HTML4.0（HTMLにもバージョンがあります）からは HTMLで文章の意味付けをし、CSSで見た目のコントロールをしましょう ということで、alignは非推奨となりました。 実際、そうしたほうが簡単にデザインをコントロールできるように なりますが少しばかり慣れは必要です。 では使ってはいけないのかというと、非推奨なんだから ダメということもない。だけどもalignは使わずにCSSでやりましょうという なんとも歯切れの悪い状態です。 ※歯切れは悪いですが、ニュアンスとしては「alignは使わないで」です。 もし、今後もHTMLやCSSを勉強していきたいという場合は CSSでの記述方法をお勧めします。CSSをある程度使いこなせるようになると こっちのほうが簡単なんですよね。 ただ、レイアウトの組み方によってはalignを使ったほうが簡単だ！という場合も ありますので、そのあたりは個人の判断です。 参考リンクのっけときます。 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#adef-align http://www.google.co.jp/search?q=cache:hgb18ekcaZsJ:www.kanzaki.com/docs/html/deprecated.html+html3.0+4.0+align+%E9%9D%9E%E6%8E%A8%E5%A5%A8&hl=ja |
| 「非推奨」問題と絡めて > どんな方法が一般的なのでしょう……。 (1) テキストを書く (2) 論理マークアップを行う (3) 最後に見栄えを整える これがHTMLの「理想的な」作り方です。ので、どのようにすれば良いかは「どのような文脈で画像を使っているか」につきます。 一例を挙げましょう。 『マリア様がみてる』登場人物 福沢祐巳 リリアン女学園高等部二年松組。一年時は桃組三十五番。 本作の主人公で、「紅薔薇のつぼみ」（ロサ・キネンシス・アン・ブゥトン）。 小笠原祥子 リリアン女学園高等部三年松組。「紅薔薇さま」（ロサ・キネンシス）。 この時、「中見出し」すなわち「福沢祐巳」と「小笠原祥子」を画像にし、論理マークアップを行うと、以下のようになります。 <h1>『マリア様がみてる』登場人物</h1> <h2><img src="" alt="福沢祐巳"></h2> <p>リリアン女学園高等部二年松組。一年時は桃組三十五番。 本作の主人公で、「紅薔薇のつぼみ」（ロサ・キネンシス・アン・ブゥトン）。</p> <h2><img src="" alt="小笠原祥子"></h2> <p>リリアン女学園高等部三年松組。「紅薔薇さま」（ロサ・キネンシス）。</p> さて、この画像を右寄せにしたいということは、「中見出しの内容を右寄せにしたい」ということであるはずです。 ならば適用するスタイルシートは以下のようになります。 h2{ text-align: right; } style要素に記述するだけで、そのページ内のすべての中見出しの内容がが右寄せになりますし、外部スタイルシートにすれば、複数のページに同様の効果を指定できます。これにより、ページ、あるいはサイト全体に、一貫したデザインを与えることができます。 上記例は h2 と p要素でマークアップしましたが、dl, dt, dd要素でマークアップしてもいいでしょうし、table系要素を使ってもいいです。 重要な点は２つ ・HTMLにおいて、画像はテキストと置換される要素なので、センタリング・右寄せの指定は、親のブロック系要素に対して行う。 ・親のブロック系要素を何にすべきかは、文脈による。迷ったら「段落」(<p></p>)が無難。 ちなみに、その小説をサンプルで使うのはどうよ？ とかいうツッコミは禁止したい。 |
| つまり画像（img）は画像（視覚効果）のみとして扱うのではなく、 論理マークアップ(意味付け？)を行った上で、 その親要素に対して（imgそのものではなく）CSSを適用させるのが理想ということですね。 ↑短い言葉で表現するのは難しいですが、（理解していないように見えますが） しっかりと理解できたと思います。 わかり易い説明ありがとうございます。 |