CSS初心者です。

サイト制作中に疑問に思ったのですが、イメージを縦並びに3つ並べて
中央に配置する時、あるページに「イメージをブロック要素にする」と書かれてたのですが、それは正しいのでしょうか?初心者の為、悩んでしまいました。

(html上)
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />

(CSS上)
img {
display: block;←ここでブロック要素にする必要がわかりません。
margin: 0 auto 10px;
text-align: center;
}

後、違う質問で凄く初歩的なことなのですが、この「イメージを中央にする」時は「領域で中央に」という考え方は間違いなのでしょうか?

例えば先程のイメージの場所を、そのボックス内全てのものを中央にすると考えた場合、

(html上)
<div id="center">
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />
<img src="○○" width="200" height="200" alt="○○" />
</div>

(CSS上)
div#center {
margin: 0 auto;
text-align: center;
}

div#center img {
margin-bottom: 10px;
}

と<div>でセンターにしても文法的にはおかしくないんでしょうか??

初心者過ぎてすいません。教えて下さい。宜しくお願いします。

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

A 回答 (2件)

#1 Wizard_Zeroです。


※正確には「ブロック要素」ではなく「ブロックレベル要素」でした。すみません。以降この表記で統一します。

中央揃えになったということは、<img>がブロックレベル要素化しているか、<img>の外側にあるブロックレベル要素(divやbody)にtext-align:centerがかかっているとしか思えないです。
ブロックレベル要素にしていない<img>に対してtext-alignを指定する意味はなにもありません。

・<img>に限らず、すべてのインライン要素の水平位置は、その外側にあるブロックレベル要素の水平位置指定に依存する。
・text-alignはブロックレベル要素(※)に対してのみ使用するスタイルでありインライン要素には使用できない(しても意味がない)
・display:blockはインライン要素をブロックレベル要素に変更する。

この3点をおさえておけば、display:blockの記述や<img>を<div>で囲む必要性がわかると思います。

※ブロックレベル要素には<td>や<th>を含むとします。
    • good
    • 0
この回答へのお礼

あっわかりましたっ。

<div>でセンターにしてたから中央に行ってました(゜ー゜;A

<img>だけなら中央に行かないってそういうことだったんですね。

すごく勉強になりました。ありがとうございます。

お礼日時:2009/05/20 22:44

text-alignはブロック要素にしか使えません。

<img>自体はインライン要素なので、displayでブロック要素に変更し、text-alignが反映されるようにしているわけです。

> 中央に配置する時、あるページに「イメージをブロック要素にする」と書かれてたのですが、それは正しいのでしょうか?
正しいといえば正しいですが、個人的にインライン要素をブロック要素に置き換えるのは好きではないので、私なら
<div style="text-align: center"><img~~~ /></div>
としますね。

<div>を使った方法について、文法的におかしくはありませんが、それだと「3枚の絵」が中央そろえで並ぶだけです。イメージのあとに<br />を入れるか、すべてのイメージを<div>で囲むなどしてください。

<div id="center">
<img src="○○" width="200" height="200" alt="○○" /><br />
<img src="○○" width="200" height="200" alt="○○" /><br />
<img src="○○" width="200" height="200" alt="○○" />
</div>

あるいは

<div id="center">
<div><img src="○○" width="200" height="200" alt="○○" /></div>
<div><img src="○○" width="200" height="200" alt="○○" /></div>
<div><img src="○○" width="200" height="200" alt="○○" /></div>
</div>
    • good
    • 0
この回答へのお礼

返事ありがとうございます。

そうですねw<div id="center">の部分のイメージの間空けるの忘れてました。すいません。

それと、<img>を要素変えずにtext-alignで中央に行くんですがこれはどういうことでしょうか??

文法的なもので要素を変えなくてはいけないということで理解すればいいんでしょうか?

お礼日時:2009/05/20 00:00

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

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

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

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

QExcelでWordの縦中横のように半角2桁(20)と波線(~)を同時に縦に表示したい

Excel2003です
セルに「平成20年~平成25年」と入力し


20(縦)

~(縦)


25

と表示したいのですが セルの書式設定で文字方向を「縦」にすると数字が縦に「2」「0」と縦に並んでしまいます。
又、セル内で文字ごとに改行すると「~」を縦にできません
「2桁の数字」と「~」を同時に縦にする方法を教えてください

Aベストアンサー

20や25の数字をキーボードから入力する方法では無理だと思います。
記号と特殊記号の中にも「20.」はありますが25はありませんので、どうしてもやりたければ、外字を作成してやるしかないのではと思います。
もちろん1つのセルだけではなく、数字は別セルとしてやればもっと簡単ですが。

Q正規表現で、htmlタグの td height="100" → td style="height:100px"できますか。

正規表現をつかって、htmlタグの td height="100" になっているところを td style="height:100px"に一発変換したいのですが、
正規表現の書き方がわかりません。
また、100にかぎらず、200、250など、そこの値はばらばらなのを一発変換したいです。

よろしくお願いいたします。

Aベストアンサー

秀丸エディタでは置換ダイアログで

 検索(S):「td \fheight\f="\f[0-9]+\f"」
 置換(E):「td style="\1:\3px"」

として、正規表現にチェックを入れて実行すれば
置換できますよ。

Q縦に結合したセルに二桁の半角数字と~を入力したいのですができません。

縦にセルを結合してそこに文字を入力したいのですが、思うようにできません。
例)動力5~10T  と入力したいのですがこうなります。
動    動
力    力
5     5
~  →  ~の縦表示
1     10
0      T
T
どうしたらきちんと入りますか。
作業がそこで止まって困っています。
宜しくお願いします。

Aベストアンサー

「外字エディタ」で「~」の縦を作ってみました。
作り方
http://support.microsoft.com/kb/881004/ja
入力の方法
http://support.microsoft.com/default.aspx?scid=kb;ja;881005
表示したら単語登録
http://support.microsoft.com/kb/881295/ja
いかがでしょうか。
 ただし、外字登録していないPCで表示されるかはテストしていません。

 縦のセルの結合を3分割にして「~」のセルだけを縦書きにしても出来ました。

Qメールのタグ(○○)の、件名ではなく本文に文章を書き込んだ状態のメールを作りたいのですが。

メールのタグ(<a href="mailto:"○○@△△>○○@△△</a>)の、件名ではなく本文に文章を書き込んだ状態のメールを作りたいのですが。

サブジェクトに指定の文章を入れる方法は、分かります。
(○○@△△?※○○についての問合せ=subject)

では、メールフォームが立ち上がった状態になった時に

【メールアドレス】
○○@△△
【件名】
※○○についての問合せ

【本文】
・名前

・住所

・電話番号

・メッセージ

と、するのはどうすればいいのでしょうか?
うまく文章がまとまらず、分かりづらいかもしれませんが
教えて下さい。よろしくお願い致します。

Aベストアンサー

bodyだそうです。

参考URL:http://www.tagindex.com/html_tag/link/a_mailto_sub.html

QExcel 軸項目 西暦 3段 ~ 縦

Excelのグラフで,項目軸に西暦の期間を表示したいです。斜めに表示させるのではなく,例えば1901~2000を3行に1901と~(縦に表記)と2000と表すにはどうしたらよいでしょうか。~を縦表記させる方法が分かりません。教えてください。

Aベストアンサー

「~」の縦書きの件で苦労されてるみたいですね。
「テキストボックスを使えば?」って回答した者です。
gvouda1114さんのNo.6回答が一番簡単かもしれません。

もしグラフタイトルに何も記入してないのであれば、グラフタイトルの項目に「~」を記入してそれを文字の配置で縦書きにする。
それをテキストボックスで作った「1901→改行→空白→改行2000」の2段目の空白のところにドラッグする方法もあります。

もしくは、テキストボックスの上にもう一度「~」を縦書きにしたテキストボックスを重ねる方法はどうでしょうか?

QDelphi Edit1.Widthを自動調整

Delphi 6又はターボ

TEdit(コンポーネント?)の幅を、入力された文字数に合わせて自動的に大きくしたり小さくするプロパティ(?)ってありますか?

Aベストアンサー

TEditコンポーネントのTextに合わせて幅を調節するプロパティはないと思います。

なお、入力に合わせて幅が変わるインタフェースは見たことがないように思います。それは使いにくい、美しくないからではないでしょうか。(^^;;; よくあるのはフォームの幅に連動するというもので、Anchorsを使って実現できます。

それでも入力に合わせたいという場合、実現の一つの案は、Form1にEdit1が置いてあるものとして、Edit1のOnChangeイベントを下記のようにすることです。Windows XP + Delphi2007で試しました。なお、どこまで広げるかはチェックが必要だと思います。

procedure TForm1.Edit1Change(Sender: TObject);
begin
Form1.Canvas.Font:=Edit1.Font;
Edit1.Width := Form1.Canvas.TextWidth(Edit1.Text)+20; // 幅に余裕を持たせる
end;

Q理由は何でも構いません!縦と横どちらが好きですか?( ̄∇ ̄)

理由は何でも構いません!縦と横どちらが好きですか?( ̄∇ ̄)

Aベストアンサー

横です!
なんか可愛いから笑

Qtable などの height を外から変えられませんか?

例えばtableなどの高さを500pxにしておいて、ページ内にあるボタンを押すと
700pxに変わったりするような設定はできないでしょうか?

[長][短]ボタンがあって、押すと700になったり500になったりする・・
というような感じです。よろしくお願いします。

Aベストアンサー

Javascriptからふつうにできます。以下はとくにひねりのないサンプルですが……
<form>
<input type="button" value="長" onclick="window.document.all.hoge.style.height = 700;" />
<input type="button" value="短" onclick="window.document.all.hoge.style.height = 500;" />
</form>
<table id="hoge" style="height:700px; border:1px solid #000000;">
<td>古池や蛙飛びこむ水の音</td>
</table>

Q(~)の矢印を縦表示する方法

 Word2010を使用してます、文章を作成してると
(~)のマークを縦表示したい時があります、しかし、
やり方解りません、知っている方教えて頂けないでしょうか
宜しくお願いします。
パソコンは、Windws7,IE9です。

Aベストアンサー

質問の趣旨が違っていたらごめんなさい
Wordでしたら拡張書式の ”縦中横” を使用したら如何でしょうか
2010の場合は 段落⇒拡張書式(+A+) です。

Q秀丸マクロ =検索文字を文末まで置換=

秀丸エディタのマクロを使って以下の処理を行おうとしました。

1.検索した文字の一行下の行をコピーし、
  そのコピーした行末にコピーしたデータを貼り付ける。
2.最初に検索した文字に該当する次の文字の一行下の行をコピーし、
  そのコピーした行末にコピーしたデータを貼り付ける。
  (繰り返し。)
3.文末(EOF)まで2.の処理を繰り返す。

以下のマクロを作ってみました。

while(code != eof){
setcompatiblemode 15;
searchdown "検索文字" , hilight;
down 1;
copyline;
paste;
finddown;

すると、2.の処理まで正常に実行されるのですが、
検索文字がなくなった時点で2の処理がストップされる事がなく、
それ以降の行のすべてが文末(EOF)まで、コピー&ペーストの処理が
繰り返されます。

例:______________________________________________________
(元の文)
○○
×××
△△
■■■
○○
□□□□
☆☆

(検索する文字)
○○

(マクロ実行後の文)
○○
×××
×××
△△
■■■
○○
□□□□
□□□□
☆☆
☆☆
______________________________________________________

上記の例でいうと、(元の文)の☆☆の部分が、(マクロ実行後の文)で
☆☆
☆☆
となってしまってます。
この部分を
☆☆
のままにしたいのです。

マクロをどのように組めば実現できるのでしょうか。
よろしくお願いします。

秀丸エディタのマクロを使って以下の処理を行おうとしました。

1.検索した文字の一行下の行をコピーし、
  そのコピーした行末にコピーしたデータを貼り付ける。
2.最初に検索した文字に該当する次の文字の一行下の行をコピーし、
  そのコピーした行末にコピーしたデータを貼り付ける。
  (繰り返し。)
3.文末(EOF)まで2.の処理を繰り返す。

以下のマクロを作ってみました。

while(code != eof){
setcompatiblemode 15;
searchdown "検索文字" , hilight;
down 1;
copyline;...続きを読む

Aベストアンサー

以下のようにしてください
----------------------------------------------------
setcompatiblemode 15;
//ファイルの先頭へ移動(カーソルがどこにあっても良いようにするため)
gofiletop
searchdown "検索文字" , hilight;
while(1){
if (result == 0) { break;}
//行頭へ移動(しないと正しくコピーできない)
golinetop;
down 1;
copyline;
paste;
finddown;
}
------------------------------------
不明点は、聞いてください。動作確認済みです。


人気Q&Aランキング

おすすめ情報