• ベストアンサー

html言語でホームページ

学校の授業でhtmlタグを使ってホームページを作っています。 たとえば使いたい画像が4つあるとして、それぞれ大きさも違います。それを水平方向に配置したいのです。さらにその画像の右横に文字を書きたいです。 が、「画像に回り込ませるテキスト」としてalign="left"を使うと4つ全部の画像に適用できません。 やり方を教えてください。 またスペース分を反映させるためにはどうすればいいでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

<img src="××1" width="●●1" height="△△1" border="0" align="left" /> <img src="××2" width="●●2" height="△△2" border="0" align="left" /> <img src="××3" width="●●3" height="△△3" border="0" align="left" /> <img src="××4" width="●●4" height="△△4" border="0" align="left" /> あああ<br /> いいい<br /> ううう<br /> とすれば、良いはずですが、どんな環境のPCでも意図した通りに表示させる為には、 ●●の合計が800以下になっていないと、いけません。

m-oohigata
質問者

お礼

こんなふうにやればいいんですね! 想像もできませんでした。 なんとか見よう見まねでがんばって完成させます。 本当にありがとうございました。

その他の回答 (2)

noname#140082
noname#140082
回答No.3

No.1です。 済みません。 勘違いしていましたので、たぶんmkun55555さんのが正しいと思います。

m-oohigata
質問者

お礼

ありがとうございました。 自分の意図するようにページを作ることがこんなに難しいとは思いませんでした。 参考にさせていただいてなんとかがんばって作り上げたいと思います。

noname#140082
noname#140082
回答No.1

<DIV style="top:50px; left:50px; float:left; width:1000px"> <IMG src="file:1618440579.jpg" border="0" width="167" height="270"> <a>image-1</a> <IMG src="file:1618440579.jpg" border="0" width="167" height="270"> <a>image-2</a> <IMG src="file:1618440579.jpg" border="0" width="167" height="270"> <a>image-3</a> <IMG src="file:1618440579.jpg" border="0" width="167" height="270"> <a>image-4</a> </DIV> 一応、こちらで確認しました。 ミソとしては、CSS(スタイルシート)を用い、float:left;を指定していることです。 もしかしたら、CSSを用いずHTMLだけなのかも知れませんが、たぶんできないと思いますし、そのようなやり方は推奨されていません。 width:1000px は無くとも大丈夫でしたが、折り曲がるようなら適宜入れてください。 また、写真を離して配置するのであれば、さらに<DIV>を入れ子にして、top,leftで指定すればいいでしょう。 ちなみに、ホームページビルダーでやろうとすると、おかしな感じに再編集(?)されてしまいます。

m-oohigata
質問者

お礼

ありがとうございました。「推奨」という言葉じたいタグで見ますが、どういうことなんだろうと思っていました。 なるほど!と思いました。 htmlでやらなくてはいけないというのが課題なので、自分の後学のために参考にさせていただきます。 ほんとうにありがとうございました。

関連するQ&A

  • ホームページのブロック配置 Float

    Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。  --------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0;      float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}

  • hタグの右横に画像を表示

    hタグ(今回は<h3>タグ)の右横に、「new」の画像を表示したいと思っています。 <h3>タグは1ページの中に複数出てきて、それぞれ文字数も異なります。 全てに「new」がつく訳ではなく、任意のものだけに表示です。 css の background image で試してみたのですが 当然のことながら、left か right かの指定なので、どちらかに極端に寄ってしまいます。 right 指定で%で指定していけば、なんとなくバランスよくはできますが あくまでなんとなくであって、 更にタイトルの文字数によって変わってきてしまうので 個別にcssを指定していかなければなりません。 (そういうものなのでしょうか。) ※例えば「new」画像が左置きなら、 background image を使って、hタグの css に padding-left:100px; などとすれば済みますよね(画像の分だけpaddingで空きを作る)。 でも右側に画像を置くとなると、こんなにも面倒なものなのでしょうか。 hタグのタイトルから右横に(例えば)20px空きをつくり画像を配置、 ということが簡単には出来ないものでしょうか。 それとも <h3>テキストテキストテキスト<img src="********"></h3> なんてことをしてもいいものでしょうか。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • ホームページのレイアウトが上手く出来ません

    お世話になります。ブログを開いているのですが、画像と文字のレイアウトが、したいように上手くできません。 画像を2個横に並べて、そのさらに横に文字を配置したいのですが。画像を■で表すと、このような感じです。↓ ■■文字 テーブルを使ってやってみると、文字が何故か大きくなってしまって、フォントサイズを小さくしてみても小さくならず。 画像を2個ともにalign="left"を加えてみたら、配置は一応なったのですが、綺麗に揃わずガタガタになってしまいます。 何かいい方法があれば教えていただけないでしょうか。よろしくお願いいたします。

  • pタグ内、一部の画像のみ左に配置したいとき。

    ホームページの記事のページをDIVタグでくくって、 その中の「p」タグ内の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか? できればCSSで行いたいです。 ちなみにホームページは ​http://www.k-ban.net​ です。こちらの各コンテンツのページ中央に掲載される画像についてです。 左に配置したい画像前後をdivでくくり、align=left指定したのですが、その<p>~</p>全体のCSS設定が崩れ、且つ画像は真ん中のままでした。 <diV id=""> <p> <img>・・・・</img> </p> </div> という形です。 宜しくお願いします!

    • ベストアンサー
    • HTML
  • ホームページビルダーのスタイルシート

    ホームページビルダー9を使いながら、直接タグを打ってサイトを作成しているのですが、スタイルシートがうまく反映されません。 例えば、 th {padding:10px; text-align:left} は、ちゃんとスタイルシートマネージャーも認識して、プレビュー画面にも反映されるんですが、 td {padding:10px] h1 {font-size:24px} は、スタイルシートマネージャーに認識されません。もちろんプレビュー画面にも反映されず、ブラウザで確認しても同じ状態でした。 <STYLE type="text/css"><!-- --></STYLE>の間に記述しているので間違ってはいないと思うんですが・・・ また、スタイルシートを記述するとスタイルの最後に必ず【;】が挿入されてしまうんですが、これを自動的に挿入しないようにするのはどうしたらよいのでしょうか? よろしくお願いします。

  • ホームページを作りたい!!!

    ホームページをサイトで作る(ふりーぺなど)と、文字や画像も自動で入れてくれますが、フリーソフトを使うと、タグを組み合わせて・・・・かなり難しくないですか??? そこで、画像などを自分の好きなところに配置したり、文字も好きなところに書ける。そして、自動で、タグ化(?)してくれるようなフリーソフトを探しています。 よろしくお願いします。

  • スタイルシートで表と画像の水平、垂直位置の指定は?

    いつもお世話になっています。 スタイルシートなんですが、 テーブルや画像の水平位置、垂直位置の指定がうまくいきません。 text-align:left; はテーブル、や画像には適応されないのでしょうか? この場合どういった一文を入れるのが適切なのでしょうか??

    • 締切済み
    • CSS
  • ホームページの背景画像が途切れてしまう。

    こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像1を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40px×40pxの背景画像2を「repeat」指定しています。 この背景画像2が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの2種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか?? よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------

  • CSS3のnth-childが上手くいかない

    テーブル内のテキスト配置をtext-align: center;にします。 左側の2番目以降をtext-align: left;にしたいです。 どうやったら良いでしょうか? 宜しくお願いします。

    • 締切済み
    • CSS
  • テキストと画像の縦の中央揃えの質問です

    下記の参考サイトのサイトマップをホームページ作成の練習として作成中です http://lolipop.jp/home/sitemap/ テキストリンクの左右に画像が配置されております。 左の画像は<dd>の背景画像。 右の画像は<img>でテキストリンクの右横に配置されてます(html)。 <dd><a>テキスト</a><img></dd> 左は上手くいくのですが、右の星型の画像が上手く配置されません。 <img>にvertical-align:middleを指定するのですが、各ブラウザでばらつきがあり、均一になりません。 テキストリンク、画像が縦に中央配置されません。 求めていることは、<dd>の中で、テキストリンク、画像を縦に中央配置させたいと思っております。 <dd>の高さは26px フォントサイズは13px <img>は、高さ17px、幅17px が希望です。 どのように、html、cssを指定すれば各ブラウザで均一に表示されるでしょうか?

    • ベストアンサー
    • CSS

専門家に質問してみよう