過去ログ

                                Page    1202
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫   
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ▼画像の表示について  タミヤ 06/2/27(月) 23:11
   ┣Re:画像の表示について  Newのり太 06/2/28(火) 8:04
   ┗Re:画像の表示について  カヅサツ 06/2/28(火) 10:01
      ┣Re:画像の表示について  Newのり太 06/2/28(火) 10:45
      ┃  ┗Re:画像の表示について  カヅサツ 06/2/28(火) 19:23
      ┗Re:画像の表示について  狐 06/2/28(火) 11:22
         ┣Re:画像の表示について  Newのり太 06/2/28(火) 12:16
         ┃  ┗Re:画像の表示について  タミヤ 06/2/28(火) 15:59
         ┗Re:画像の表示について  カヅサツ 06/2/28(火) 19:25

 ───────────────────────────────────────
 ■題名 : 画像の表示について
 ■名前 : タミヤ
 ■日付 : 06/2/27(月) 23:11
 -------------------------------------------------------------------------
   すみません、どうしても分からないので質問させて下さい。

現在、画像展示用のページを作っています。
フレームで「メニュー」の部分と「画像が表示される」部分で
二分割されているページを作っている最中なのですが
表示する画像を表示部分の中央に表示されるようにしたいのですが
上手く画像が中央に表示する事が出来ない状態です・・・

今現在、
<A href="画像アドレス"target="画像の表示先"><div align="center">その1</div></A>

・・・のようにしてあるのですが
表示する画像を画面の中央に表示させたいのに
メニュー部分の文字が中央になってしまいます。
画像を中央に表示させるにはどのようにすれば良いのでしょうか。

御手数お掛けしますが宜しくお願いします。
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : Newのり太  ■日付 : 06/2/28(火) 8:04  -------------------------------------------------------------------------
   ▼タミヤさん:
>すみません、どうしても分からないので質問させて下さい。
>
>現在、画像展示用のページを作っています。
>フレームで「メニュー」の部分と「画像が表示される」部分で
>二分割されているページを作っている最中なのですが
>表示する画像を表示部分の中央に表示されるようにしたいのですが
>上手く画像が中央に表示する事が出来ない状態です・・・
>
>今現在、
><A href="画像アドレス"target="画像の表示先"><div align="center">その1</div></A>
>
>・・・のようにしてあるのですが
>表示する画像を画面の中央に表示させたいのに
>メニュー部分の文字が中央になってしまいます。
>画像を中央に表示させるにはどのようにすれば良いのでしょうか。
>
>御手数お掛けしますが宜しくお願いします。

画像ファイルに直接リンクした場合は、
画像の位置などを指定することは出来ません。

その画像を中央揃えで表示させたHTMLファイルを作り、
そのHTMLファイルにリンクします。

<div align="center">その1</div> の、align="center"は、
表示先の位置を指定するものではありません。


    
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : カヅサツ  ■日付 : 06/2/28(火) 10:01  ■Web : http://kadu.vis.ne.jp/main/  -------------------------------------------------------------------------
   まずテキストがあり、文書構造によって HTML でマークアップを行い、最後に見栄えをCSSで行います。

> 画像展示用のページを作っています。

リンクテキストが並び、リンク先が画像になっているページ作りとお見受けします。

----

画像展示ページ

<a href="" target="">りんごの絵</a>
<a href="" target="">みかんの絵</a>
<a href="" target="">ぶどうの絵</a>

----

「画像展示ページ」は文書の題名ですから、title要素でマークアップします。

「りんごの絵」、「みかんの絵」、「ぶどうの絵」というテキストは箇条書きでしょうから、
li要素でマークアップします。そして、箇条書きが順不同であるならば、それをul要素で括ります。
(「フタを開ける」、「かやくを取り出す」、「お湯を注ぐ」、のように、順序がある箇条書きなら、ol要素です)

----

<title>画像展示ページ</title>

<ul>
    <li><a href="" target="">りんごの絵</a></li>
    <li><a href="" target="">みかんの絵</a></li>
    <li><a href="" target="">ぶどうの絵</a></li>
</ul>

----

CSSで見栄えを整えます。
多くのブラウザでは、特に何も指定しなければ、ul要素の左に余白が、
li要素の先頭に「・(黒丸)」が表示されてしまうので、それを消します。

そして、「箇条書き」内のテキストをセンタリングする指定をします。

ul{
    margin: 0px;
    padding: 0px;
}

li{
    list-style-type: none;
    text-align: center;
}

書いた CSS を HTML に組み込む手段はいくつかあります。本当は外部ファイルにして link要素でリンクするのが良いのですが、ここでは style要素内に直接書き込んでしまいます。

最後に、「題名」「スタイル」のような文書情報を head要素で、「本文」を body要素でマークアップし、この 2つを html要素にした後、文書型宣言を付けて完成です。

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3. org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title>画像展示ページ</title>
<style type="text/css">
ul{
    margin: 0px;
    padding: 0px;
}
li{
    list-style-type: none;
    text-align: center;
}
</style>
</head>
<body>
<ul>
    <li><a href="" target="">りんごの絵</a></li>
    <li><a href="" target="">みかんの絵</a></li>
    <li><a href="" target="">ぶどうの絵</a></li>
</ul>
</body>
</html>
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : Newのり太  ■日付 : 06/2/28(火) 10:45  -------------------------------------------------------------------------
   >> 表示する画像を画面の中央に表示させたいのに
>> メニュー部分の文字が中央になってしまいます。

えっと、メニュー部分の文字(「箇条書き」内のテキスト)を中央揃えにするのではなく、
「画像の表示先」フレーム内で、画像を中央揃えにしたいというご質問ではないでしょうか?
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : カヅサツ  ■日付 : 06/2/28(火) 19:23  ■Web : http://kadu.vis.ne.jp/main/  -------------------------------------------------------------------------
   >「画像の表示先」フレーム内で、画像を中央揃えにしたいというご質問ではないでしょうか?

そんな気が投稿し終えてからしましたが、せっかくなので。    
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : 狐  ■日付 : 06/2/28(火) 11:22  -------------------------------------------------------------------------
   ▼Newのり太さん:
>>> 表示する画像を画面の中央に表示させたいのに
>>> メニュー部分の文字が中央になってしまいます。
>
>えっと、メニュー部分の文字(「箇条書き」内のテキスト)を中央揃えにするのではなく、
>「画像の表示先」フレーム内で、画像を中央揃えにしたいというご質問ではないでしょうか?

「<a>(インライン要素)で<div>(ブロック要素)を囲むことはできない」
……という肝心の注意文がないのがさらに的外れ感をかもし出してるような(笑)

×<A href="画像アドレス"target="画像の表示先"><div align="center">その1</div></A>
○<div align="center"><A href="画像アドレス" target="画像の表示先">その1</A></div>

▼カヅサツさん:
>まずテキストがあり、文書構造によって HTML でマークアップを行い、最後に見栄えをCSSで行います。
>
>> 画像展示用のページを作っています。
>
>リンクテキストが並び、リンク先が画像になっているページ作りとお見受けします。
>
>----
>
>画像展示ページ
>
><a href="" target="">りんごの絵</a>
><a href="" target="">みかんの絵</a>
><a href="" target="">ぶどうの絵</a>
>
>----
>
>「画像展示ページ」は文書の題名ですから、title要素でマークアップします。
>
>「りんごの絵」、「みかんの絵」、「ぶどうの絵」というテキストは箇条書きでしょうから、
>li要素でマークアップします。そして、箇条書きが順不同であるならば、それをul要素で括ります。
>(「フタを開ける」、「かやくを取り出す」、「お湯を注ぐ」、のように、順序がある箇条書きなら、ol要素です)
>
>----
>
><title>画像展示ページ</title>
>
><ul>
>    <li><a href="" target="">りんごの絵</a></li>
>    <li><a href="" target="">みかんの絵</a></li>
>    <li><a href="" target="">ぶどうの絵</a></li>
></ul>
>
>----
>
>CSSで見栄えを整えます。
>多くのブラウザでは、特に何も指定しなければ、ul要素の左に余白が、
>li要素の先頭に「・(黒丸)」が表示されてしまうので、それを消します。
>
>そして、「箇条書き」内のテキストをセンタリングする指定をします。
>
>ul{
>    margin: 0px;
>    padding: 0px;
>}
>
>li{
>    list-style-type: none;
>    text-align: center;
>}
>
>書いた CSS を HTML に組み込む手段はいくつかあります。本当は外部ファイルにして link要素でリンクするのが良いのですが、ここでは style要素内に直接書き込んでしまいます。
>
>最後に、「題名」「スタイル」のような文書情報を head要素で、「本文」を body要素でマークアップし、この 2つを html要素にした後、文書型宣言を付けて完成です。
>
><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>    "http://www.w3. org/TR/html4/loose.dtd">
><html lang="ja" dir="ltr">
><head>
><title>画像展示ページ</title>
><style type="text/css">
>ul{
>    margin: 0px;
>    padding: 0px;
>}
>li{
>    list-style-type: none;
>    text-align: center;
>}
></style>
></head>
><body>
><ul>
>    <li><a href="" target="">りんごの絵</a></li>
>    <li><a href="" target="">みかんの絵</a></li>
>    <li><a href="" target="">ぶどうの絵</a></li>
></ul>
></body>
></html>
    
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : Newのり太  ■日付 : 06/2/28(火) 12:16  -------------------------------------------------------------------------
   >「<a>(インライン要素)で<div>(ブロック要素)を囲むことはできない」
>……という肝心の注意文がないのがさらに的外れ感をかもし出してるような(笑)

あ、そこ突っ込まれたか。。
ごめ〜ん。(^^ゞ
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : タミヤ  ■日付 : 06/2/28(火) 15:59  -------------------------------------------------------------------------
   皆さん丁寧にお教え下さってありがとうございます!
おかげさまで無事に問題が解決しました。
本当にありがとうございました。
 ───────────────────────────────────────  ■題名 : Re:画像の表示について  ■名前 : カヅサツ  ■日付 : 06/2/28(火) 19:25  ■Web : http://kadu.vis.ne.jp/main/  -------------------------------------------------------------------------
   > 「<a>(インライン要素)で<div>(ブロック要素)を囲むことはできない」
> ……という肝心の注意文がないのがさらに的外れ感をかもし出してるような(笑)

まずテキストがあり、論理マークアップを行い、最後に見栄えを整える、という作業を行えば、おのずとこの件は解決されるので、別にいいんじゃないかとは思いました。

まぁ、いらん投稿であったのは確かですが。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━    通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━                                 Page 1202