最近、テンプレートなどを使ってHPの作成に
取り組み始めた初心者です。

画像の縦の位置を調整したいのですが、
うまく行きません。

「~middle」を使うのかなと思っていろいろと試行錯誤、

例えば、
<p class="middle">
<img scr="~",~~~~,class="middle">

とかやってみましたが、駄目でした。
(皆目、見当違いなのかもしれませんが、…)

特に今まではテンプレートの画像設定で規定の画像が中央にあっても、
アフィリタグを入れると位置が乱れます。

お分かりの方はご教授頂けると幸いです。

どうぞ宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

「画像の縦の位置を調整する」といっても、方法はいくつもあります。


どんな風にしたいのか、あるいは、何を試したら何が起こってどんな風に困ったのか、などもっと具体的にご質問されると、より適切な回答が得られる可能性があると思います。

「middleを使う」「アフィリタグを入れると位置が乱れる」と言われても、それだけでは何が起こっているのかわかりようがありません。
ですから、具体的な問題解決法の提供はできないことをご了承ください。

ここでは、すぐに思いつく(一般的と思われる)方法例をいくつか挙げておきます。
いずれも位置を調節したい画像に対してスタイルを適用します。

(1) positionを指定する
position: relative;
top: 100px;

(2) paddingあるいはmarginを指定する
padding-top: 100px;

(3) vertical-alignを指定する
vertical-align: middle;

全て「画像の縦の位置を調節」しているものの結果は全て異なります。
具体的な質問の方が適切な回答が得られる可能性がある理由です。

この回答への補足

ご指摘ありがとうございます。

また不十分な情報の中でもアドバイス頂き、ありがとうございます。

知識不足ゆえ、表現自体がわかりずらい部分もあるかと思いますが、
宜しくお願い致します。

今回の件で申し上げると、テーブルの中でのアイコンの位置が
アフィリタグを入れるまでは、スペースの中央に位置されていますが、
例えば、「詳細」というアイコンにアフィリタグをリンクさせると、
左右の位置左によって見栄えが悪くなります。

<tr>
<td align="center">
<img src="アイコンの詳細" />
</td>
</tr>

これだとアイコンはセンターに位置します。



<tr>
<td align="center">
<a href="アフィリタグ">
<img src="アイコンの詳細" /></a>
<img border="アフィリタグ″>
</td>
</tr>

上記のようにアフィリタグではさんでアイコンをリンク付けると、
画像がよってしまいます。

CSSのテーブルの設定にもよると思いますので、少し長いですが、
下記にコピーさせてもらいます。

伝わりにくいかもしれませんが、宜しくお願い致します。



#table-01{
border-collapse:collapse;

}

#table-01 th{
text-align: center;
padding:0px 0px 4px 0px;
}

#table-01 tr{
}

#table-01 img{
border:0px ;
}

#table-01 td{

background-color: #F9F9F7;
font-size: 14px;
text-align: center;
border: solid 1px #757575;
padding: 2px;


}

#table-01 .tdleft{

text-align: left;

}

table#table-01 a:hover{
color:red;
text-decoration: underline;

補足日時:2009/05/17 11:19
    • good
    • 0

<img border="アフィリタグ">



というのは何でしょう?

このimg要素にはsrc属性が指定されていません。
ですから、「画像が見つかりません」という旨のアイコンが表示されるのではありませんか?
本来のアイコンと、この「見つかりません」アイコンが2つ並んだ状態でセンタリングされると、本来のアイコンは中央より少し左側にずれることになります。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Q

になってしまう。

標記の件ですが、<h2></2>で囲みたいのに<h2 class="class"></h2>で囲まれてしまいます。

どうやらスタイルシートのせいだと思うのですが、
これはどちらもh2の効果はあるのでしょうか?

よろしくお願いいたしますm(_ _)m

Aベストアンサー

>これはどちらもh2の効果はあるのでしょうか?

質問の意味があいまいですが、SEO対策の効果は同等でしょう
スタイルシートによるビジュアルの効果は設定したclassによって
異なるものになります

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

QCSSファイルが見当らないclass名があり、しかもCSSが効いています。どこにあるんでしょうか?

tableのtdやthの背景にうまく画像が入っていてうまいつくりがあったので、方法を調べようとしてソースを見て、CSSファイルを調べるのですが、該当のclass名が検索しても存在しないのです。こんなこと初めてです。
なのにちゃんとCSSは効いています。HTMLソースには記述という記述がないので、どう考えても外部スタイルシートとしか思えないのですが・・・
JavaScriptで操作しているのか?と思ってそのあたりも見はしたのですがわかりませんでした。

以下のURLです。
※ちなみに「比べてください!圧倒的なコストパフォーマンス」というところの表のように、背景画像や2ピクセルでの区切り線、tdやthによって背景画像や色を変更している手法などを知りたいものです。

http://www.rensaba.com/campaign/ocssl/

とりあえず、tableタグにある「class="comparison"」が見当たらないのです。

このソースにかかれてあるCSSファイルは複数ありますが、全て検索かけてみたのですがひとつも出てきませんでした・・・・

この表の作り方だけでなく、いったいどうやって効かせているのかも知りたいです。

宜しくお願い致します。

tableのtdやthの背景にうまく画像が入っていてうまいつくりがあったので、方法を調べようとしてソースを見て、CSSファイルを調べるのですが、該当のclass名が検索しても存在しないのです。こんなこと初めてです。
なのにちゃんとCSSは効いています。HTMLソースには記述という記述がないので、どう考えても外部スタイルシートとしか思えないのですが・・・
JavaScriptで操作しているのか?と思ってそのあたりも見はしたのですがわかりませんでした。

以下のURLです。
※ちなみに「比べてください!圧倒的なコ...続きを読む

Aベストアンサー

http://www.rensaba.com/campaign/ocssl/this.css
にしっかり書かれていますが…

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Qid="○○"とclass="○○"

idとclassの使い分けってどういうものですか?

Aベストアンサー

すでに回答が出ていますが…

idはそのHTMLファイル内に固有の要素を特定する属性です。 同じid名は同一HTMLファイル内では重複して使うことができません。
CSSの適用範囲の特定や、JavaScriptの動作で特定の要素を拾いたい場合、あるいはリンク要素のターゲットの設定などにも利用されます。
スタイルシートの話でしたら、head内のstyle要素で

#id名{style指定}

という形で、特定の要素(一つ)に対してスタイルを指定することができます。


classは、その要素が属するグループ名を指定する属性と捉えるのが良いかと思います。
スタイルシートでは同じclass名を持つすべての要素に対して同じようにスタイル指定を適用させることができます。

.class名 {style指定}

という形で、head内のstyle要素でスタイルを定義しておくと、同じclass名を持つすべての要素にそのスタイルが適用されます。

スタイルシートの話だけで考えるなら、他に同じスタイルを適用する要素がない、そのファイル内唯一の特定要素に対してスタイルを定義するケースでidを、複数の要素に対して同じスタイル指定を適用したい場合にclassを利用するという形でよいと思います。 ただ、よほどのこだわりがあるか、あるいはJavaScriptなどを併用していない限りは、id属性よりもclass属性を利用する方が多いと思います。

参考になれば…

すでに回答が出ていますが…

idはそのHTMLファイル内に固有の要素を特定する属性です。 同じid名は同一HTMLファイル内では重複して使うことができません。
CSSの適用範囲の特定や、JavaScriptの動作で特定の要素を拾いたい場合、あるいはリンク要素のターゲットの設定などにも利用されます。
スタイルシートの話でしたら、head内のstyle要素で

#id名{style指定}

という形で、特定の要素(一つ)に対してスタイルを指定することができます。


classは、その要素が属するグループ名を指定する属性と捉え...続きを読む

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Q~の中に書く場合。

<link rel="stylesheet" type="text/css" href="common.css" media="all">は、普通<body>~</body> に記述しなければなりませんよね?ただ、使用しているソフト(会社指定で変更不可)が<head>~</head>の中がいじれません。そこで苦肉の策で、bodyの中に書いてみたんです。すると普通に適用されるんで、ラッキーと思ったのですが、これって実際大丈夫なんでしょうか??
後々まずいことになったらイヤなのでどなたかこの件詳しい方教えてください。よろしくお願いします。

Aベストアンサー

ブログなど、<head>を変更できないところでは使われる手法だと思います。
理由はわかりませんが、OKWaveでも、昔、使われていました。

文法を絶対視するのであれば当然NG、デザインもあきらめるしかないと思いますが、
ブラウザの独自仕様を良しとするのであれば、OKでしょう。
もちろん独自仕様ですので、スタイルシートが適用されないブラウザもあるかも知れません。
ブラウザの仕様変更により、アップデートで期待通り表示されなくなる可能性もありますので、
お勧めは出来ませんが、それしか方法がなければその方法を使うしかないんじゃないでしょうか。

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qalign="middle"が無視される TOPに

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title lang="ja">文書タイトル</title>
</head>
<body>

<div style="text-align:center;" style="font-size:400%;">
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle">
test
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle">
</div>

</body>
</html>


これをブラウザで表示すると、align="middle"とやってるのに、画像のように文字がTOPの位置に表示されてしまいます。

<div style="text-align:center;" style="font-size:400%;">
がなければ、文字は画像のど真ん中に表示されるのですが、
font-size:400%;はまだしも、画像もブラウザの真ん中に表示させたいので
<div style="text-align:center;"で画像と文字を挟みたいです。

どうすれば、画像&文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか?

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title lang="ja">文書タイトル</title>
</head>
<body>

<div style="text-align:center;" style="font-size:400%;">
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle">
test
<IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"...続きを読む

Aベストアンサー

いまどき、transitinalはさすがに古いのでstrictで・・
 ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )
 またその文書宣言では、互換モードで表示されるためブラウザ間の表示誤差に悩まされることになります。
 ⇒DOCTYPEスイッチ-HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )

様々な方法が思いつきますが、できるだけオリジナルを生かして書き直すと・・
注)見出しtitleですから、divではなく<h1></h1>で括るべきです。
 DIVは他に適切な要素がないときの最後の手段です。そのときも「文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」にidやclassをつけます。
⇒Authors are strongly encouraged to view the div element as an element of last resort( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )

★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
で検証済み
タブは_に置換してあるので戻すこと。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
div.header h1{
font-size:50px;line-height:50px;text-align:center;
height:100px;padding-bottom:25px;margin:0;
position:relative;top:-25px;
}
div.header h1 img{position:relative;top:25px;margin:0 10px}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1><img src="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" width="100" height="100" alt="">タイトル<img src="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" width="100" height="100" alt=""></h1>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-12</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

なお本来なら、
<h1>タイトル</h1>
とだけ書いておいて、
h1:before{content:url();}
h1:after{content:url();}
で画像をスタイルシートで追加するべきでしょう。画像がコンテンツに関係ないので

いまどき、transitinalはさすがに古いのでstrictで・・
 ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )
 またその文書宣言では、互換モードで表示されるためブラウザ間の表示誤差に悩まされることになります。
 ⇒DOCTYPEスイッチ-HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )

様々な方法が思いつきますが、できるだけオリジナルを生かして書き直...続きを読む


人気Q&Aランキング

おすすめ情報