text-alignの解除の方法

締切済

質問者：japapapane
質問日時：2010/12/04 02:48
回答数：3件

text-alignの解除の方法ってありませんか？

例えばhtml内に以下のタグがあるとして、

<div style="text-align:center;">
<div style="width:100px; height:120px; background-image:url(○○○.jpg)">
<div style="width 50px; height: 60px;　position:absolute; margin-top: 20px; margin-left:5px">
<p>あいうえおあいうえお</p>
</div>
</div>
</div>

このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか？

IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。

分かりづらくて申し訳ありません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

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

「left 意味」に関するQ&A： leftの意味の捉え方

さらに表示

「CSS ライン」に関するQ&A：インラインフレーム、ｃｓｓの質問です。

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： metametamu
回答日時：2010/12/04 21:10

うーん・・・

単純に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">のdivにtext-align:center;じゃだめなんでしょうか？複数ある場合インラインでの指定だからメンドクサイですが、外部cssなどであればセレクタで簡単に指定できると思うのですが・・・

一応、確認は取っていないですがalign属性を使うとどうでしょう？ちょっと手元では確認できないのですが、

<div style="text-align:center;" align="left">

上手くいったとしても完全に互換モード用のHTMLになってしまいますけど。

- 1
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2010/12/04 19:23

状況を知らない他人から刃状況がつかめません。

誰が読んでもわかるように質問しましょう。

HTML内の要素にスタイルを指定しているのですから、外部スタイルシートでは優先順位が低いため!importantを指定しても上書きできません。
><div style="width:100px; height:120px; background-image:url(○○○.jpg)">
>から、対応している</div>のtext-alignを解除する方法
は、単純にtext-alignをleftを指定すればよい。
<div style="text-align:center;">
　　<div style="text-align:left;--------------">
　　　<div style="text-align:center;----------">
　　　　　<p>あいうえおあいうえお</p>
　　　</div>
　　</div>
</div>

どれをセンターにして、どれを左寄せにするのか？？？を詳しく示してください。

- 0
- 件

通報する

No.1

回答者： outbrave
回答日時：2010/12/04 18:09

text-align: left; を入れればいいんじゃないでしょうか

意味がちがうのかな。

- 0
- 件

通報する

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

「left 意味」に関するQ&A：セルの文字列後ろのスペース削除

さらに表示

「CSS ライン」に関するQ&A：ハイパーリンクに下線を表示するには？

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

質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

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

Q中央寄せの解除

こんにちわ。初歩的な質問ですが、ご教授願います。

CSSのほうでは

.freearea{
font-size:12px;
text-align:center;

}

と記述しております。

これをHTMLのほうで、一時的に解除させたいテキストがあるのですが、適正なHTMLタグが分かりません。

Aベストアンサー

<div>で囲む所で
<div style="text-align:left" class="freearea">
としたら良いと思います。

他の回答も見る

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか？

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像（情報としては必要ない画像や、直前のテキストとかぶっている画像文字等）にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

＞「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか？
　そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

＞この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示（もしくは読み上げ）されることになります。
　その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
　あるいは、alt="本人の写真"
　と画像が表示されない人も画像から得られるはずの情報をいれておく。

　になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
　これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

　<p class="figure main">
　　<img src="" width="" height="" alt="麓から見た紅葉の城山">
　</p>
　<p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
　<p class="figure sub">
　　<img src="" width="" height="" alt="玄関で見送る妻">
　</p>
　<p>
　　妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
　</p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

他の回答も見る

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか？
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

　とりあえず下記サイトは読まれましたか？下記は比較的わかりやすく説明していると思います。

参考URL：http://www.tohoho-web.com/css/basic.htm

他の回答も見る

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数（ボックスの内容）に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

他の回答も見る

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

他の回答も見る

QＣＳＳで、ＩＤとＣＬＡＳＳを同時に設定することは可能ですか？

<div ID="main" CLASS="sub"></div>のように
スタイルシートで、IDにメインのスタイル
CLASSにサブのスタイルを設定してみて、
とりあえず、firefox、IE6、で確認してみたところ、うまく動きました。
しかし、グーグルで”ＩＤ　ＣＬＡＳＳ　同時”等で検索してみても、
同時に使えることが解説されたサイトが大変少なく、
果たして、同時使いは、CSSの構文違反にならないのか不安になり
質問させていただきました。
<div ID="main" CLASS="sub"></div>のようなセレクタ同時使いは、
やっても大丈夫なものなのでしょうか？
サポートされていないブラウザがあったりすることはないのでしょうか？

Aベストアンサー

・　 CLASS="sub" の方は、ほかのタグにも共通で使えますからそれらと同じ設定が出来るようになり有効に使えます。CSSをサポートしているブラウザなら大丈夫です。

他の回答も見る

Q「以降」ってその日も含めますか

１０以上だったら１０も含める。１０未満だったら１０は含めない。では１０以降は１０を含めるのでしょうか？含めないのでしょうか？例えば１０日以降にお越しくださいという文があるとします。これは１０日も含めるのか、もしくは１１日目からのどちらをさしているんでしょうか？自分は１０日も含めると思い、今までずっとそのような意味で使ってきましたが実際はどうなんでしょうか？辞書を引いてものってないので疑問に思ってしまいました。

Aベストアンサー

「以」がつけば、以上でも以降でもその時も含みます。

しかし！間違えている人もいるので、きちんと確認したほうがいいです。これって小学校の時に習い以後の教育で多々使われているんすが、小学校以後の勉強をちゃんとしていない人がそのまま勘違いしている場合があります。あ、今の「以後」も当然小学校の時のことも含まれています。

私もにた様な経験があります。美容師さんに「木曜以降でしたらいつでも」といわれたので、じゃあ木曜に。といったら「だから、木曜以降って!聞いてました?木曜は駄目なんですよぉ(怒)。と言われたことがあります。しつこく言いますが、念のため、確認したほうがいいですよ。

「以上以下」と「以外」の説明について他の方が質問していたので、ご覧ください。
http://oshiete1.goo.ne.jp/kotaeru.php3?qid=643134

他の回答も見る

Q開閉式の隠し要素が一瞬表示される。

いつもお世話になっております。

ヘッダー部分に開閉式の隠し要素を埋め込みしているのですが、時々その隠し要素が一瞬表示されてしまいます。

問題のページ　／　http://blackartcard.com/?p=1820

どのページに飛んでも一瞬だけ表示されたり、されなかったり、、、どこでエラーが起きているのかわからないです。
<head>内も確認したのですがおかしい記載はしていないと思います。

どこがひっかかっているのでしょうか？？

Aベストアンサー

エラーではなく、当然の結果です。正常な動作です。

　単純にそれを隠すスクリプトなりスタイルシートが後から読み込まれ実行されるからです。
本来、HTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　ですし、javascriptやスタイルシートを理解しないユーザーエージェントもあります。もちろん検索エンジンもそのひとつです。
　もうひとつの理由は、HTMLは原則として逐次表示だからです。可能なものから表示していくことになっている。

　対策としては、基本に忠実--すなわち文書構造にしたがってきちんとHTMLをマークアップすることです。
　なれないうちは、HTMLを書くときに、それをLynxのようなテキストブラウザで確認することも必要です。添付画像は実際にそのページをLynxで確認したものです。ごらんのようにそのページの主題がどこにあるか分かりませんよね。

　HTML5では、そのあたりが徹底されHTMLは基本的に
<body>
　<header>
　　ここのページタイトルや要約
　</header>
　<section>
　　本文
　　<aside>
　　　本文と直接関係ない記事
　　</aside>
　</section>
　<section>
　　本文
　　<article>
　　　<header></header>
　　　<section></section>
　　　<footer></footer>
　　</artice>
　</section>
　<footer>
　　フッタ
　</footer>
</body>
　先のサイトの隠す予定の内容は、footerないしasideに書くべき内容です。
　HTL4.01でしたら<div class="footer"></div>など・・

　もし、そのように書かれていたら、スタイルシートやjavascriptが動作していない段階やそもそもそれらを利用しないユーザーエージェント(や検索エンジン)にページの主題を正確に伝えられます。

　いずれにしても、HTMLの最初のほうに「検索エンジン目立つように記事を書きねそれをスタイルシートで隠す」という手法は、検索エンジンから悪質と判断される危険があります。

他の回答も見る

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family： "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳＰゴシック","MS PGothic"；
font-size： 14px；
line-height： 1；
margin： 0；
padding： 0；

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

他の回答も見る

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか？
↓下記のようなイメージにしたいです。

--------------------
--------------------
　　　　□　□　□　　←これがボタンです

↓htmlファイルです↓
<div class="button">
<input type="submit" value="＜＜戻る＜＜" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="＜＜戻る＜＜" />
<input type="submit" value="選択リセット" />
<input type="submit" value="＞＞進む＞＞" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

他の回答も見る

ページトップ