- ベストアンサー
【HTML5、CSS2.1】imgのalign
HTML5、CSS2.1でホームページを作成しています。 http://www.tagindex.com/html_tag/img/img_align.html このサイトを参考に画像の右中央に文字を配置したいのですが HTML5ではalign属性が認められていません。 どのように対処すればよいのか教えていただけましたら幸いです。
- timespace
- お礼率8% (74/903)
- HTML
- 回答数4
- ありがとう数0
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
>いろいろあるとは思いますが作る側はだいぶ配慮が求められるようになりましたね。 >あきらめようと思います。 そうではなくて、HTML4.01の時代から「HTMLからプレゼンテーションに関わるものは非推奨で、将来廃止される」となっていました。 きちんと文書構造にしたがってマークアップされていれば、デザインはHTMLのプレゼンテーション機能の制約を越えて自由に設定できます。 「画像の右中央に文字を配置したい」のでしたら、それは、ある文章を背景画像の右中央に配置したい」と考えます。 <p id="message">ようこそ、我が家へ</p> でしたら、スタイルシートは #message{ width:200px;margin:0 auto; background:url(画像URL) no-repeat 50% 50% gray; height:150px; line-height:150px; text-align:right; } で良いはずです。
その他の回答 (3)
- opacity1
- ベストアンサー率0% (0/1)
TAG index さんのサイトにあるコードを見るに、 こういうことでしょうか? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style> #cen img { vertical-align:middle; } </style> <body> <p id="cen"> <img src="rainbow.jpg" alt="写真" width="193" height="130"> 右側の中央にテキストを表示します。 </p> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんなサイトを見たらダメです。きちんと仕様書を読みましょう。HTML4.01の仕様書には 【引用】____________ここから IMG要素とOBJECT要素の、視覚的配置及びプレゼンテーションに関する属性は、推奨しないこととなった。スタイルシートを奨める。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[13.7 画像、オブジェクト、アプレットの視覚的プレゼンテーション( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#visual )]より と明記してあります。 そのサイトは、HTMLK4.01strictではなく、transitinalについて書かれています。 【引用】____________ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 HTML 4仕様が定める各DTDの詳細については バージョン情報の項を参照のこと。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より と、HTML4.01が勧告になった1999年以降、strictは非推奨で、 【引用】____________ここから 推奨しない 推奨しない要素・属性とは、新しい枠組みができたことによって、陳腐化したものを 指す。推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを 明記する。推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より と予告どおり、HTML5では、すべてと言ってよいくらい廃止されています。 今学ぶなら、HTML4.01strictをしっかり身につけなさい。そしたら、 ★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) を読むくらいで卒業です。 画像を画面の右中央に表示する方法は、CSS3にもありません。当然ですが・・・ そのような場合は、画像ごとに位置を指定するか、背景画像で指定するかになります。
補足
いろいろあるとは思いますが作る側はだいぶ配慮が求められるようになりましたね。 あきらめようと思います。
- 4017B
- ベストアンサー率73% (1305/1776)
関連するQ&A
- img の align 属性を css に変更したいが、位置がずれる
img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top 上端に合わせます。 ■middle 中央に合わせます。 ■bottom 下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。
- ベストアンサー
- HTML
- <IMG>のALIGN属性値「absmiddle」は使用してはいけない?
HTML4.01 Transitional としてソースチェックを行うと、 「 <IMG>のALIGN属性値「absmiddle」は正しくない」 と注意を受けてしまいます。 画像をテキストを並べて配置しちゃってる場合、便利なので、よく利用してしまうのですが、何か起こりうる問題等あるのでしょうか? absmiddleを利用した場合、確かに、ネスケやFirefoxでは表示がIEの時と若干違うようなのですが…
- 締切済み
- HTML
- legendの属性alignをCSSに変更する・・・
legendの属性alignをCSSに変更する場合 調べたら text-align ではなく float で左右が配置できることがわかりましたが、top や bottom に関しては無かったので教えてください。 それと、なぜ text-align ではなく float なのでしょうか?
- 締切済み
- HTML
- HTML CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか? (オレンジ画像 width=100 height=50 でお願いします。) 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
- HTMLとCSSを教えてください。
画像を中央揃えしたいのですが、 <img src="xxx.jpg"> img{ text-align:center; } とやったのですが、中央揃えできないのですがなぜでしょうか? もうひとつ質問させてください。図書館の参考書に書かれている内容で、「今はtext-align:center;よりposition:absolute;top:105px;left:50px;を使う事が多くなっています」と書いてありました。ほかにもサイトのソースをみると、absoluteを使用しているサイトを良く見かけますが、positionを使ってデザインすると画面サイズとか、見るブラウザによってデザインが崩れてしまわないでしょうか?そうなるとやはりtext-align:center;を使うのがいいのではないでしょうか? どれも初歩的ですみませんが、よろしくおねがいします。
- ベストアンサー
- HTML
- IMGタグごとにCSSを設定する方法
自分でGoogleやYahoo検索をしても見つけられなかったので、どなたかお教えください。 現在、HTML内に以下のようにIMGタグで画像添付しています。 -------- <img src="***" width="160" height="140" /><br /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> -------- 最初に大きな画像を表示し、その下に並列するかたちで小さいサムネイルを並べています。 普段はCSSでレイアウトをして、画像それぞれにstyle属性やclass、ID属性などを付けています。それが、今回は上述のHTMLを外部サイトのPHPから出力しているもので、一切触れない(編集できない)状態にあります。 このような状態の場合でも、画像それぞれにCSSを設定することは可能なのでしょうか?最低限の希望は、大きい画像(160px*140px)をひとかたまり、サムネイル画像(32px*30px)をひとかたまりとして、それぞれのかたまりにCSSを設定できれば良いと思っています。 可能であればHTML+JavaScript+CSSで実現できる方法を希望します。 どなたかお教えください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- HTMLについて教えてください。
最近ホームページに興味を持ちましてHTML、CSSを覚えているのですがお聞きしたい事があり投稿させていただきました。 text-align:center;で中央表示にしますよね?position:absolute;を使用して中央に表示することは可能なのでしょうか?positionで慣れてしまっているのでどうせならpositionを使用して中央に表示させたいのですが、どなたか簡単な方法はないでしょうか?
- ベストアンサー
- HTML
- [HTML][CSS] 画像の高さを揃えるには?
HTML、CSSの書き方について教えてください。 ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。 ベースとなるHTMLコードの例: <div class="photos"> <img class="photo" src="xxx1.jpg"> <img class="photo" src="xxx2.jpg"> <img class="photo" src="xxx3.jpg"> </div> やりたいこと: 要件1. <div>内の写真の数によって幅を固定させたい。 例:写真が3枚なら、1枚あたりの幅は3/画面幅。 要件2. <div>内の複数の写真を一番小さい高さの写真に揃えたい。 例:写真1の高さ200px、写真2の高さ250px、写真3の高さ100px →写真1~3の高さを100pxとしたい。 要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。 →幅をベースとして高さを動的にトリミングしたい。 読み込んだポストによって幅や高さが変わるので、 css+JavaScriptというよりはHTMLタグに属性を直に書いてできると良い。 (<div style="xxxxx">とか<img style="yyyy">とか。) clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです…。 なお、HTML内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。 何か良い案はありますでしょうか?
- ベストアンサー
- HTML
- 文字の前の画像を縦中央に配置したい
はじめてCSSを使ったホームページを作ってます。 文字の前に画像を置きたいのですが、それが上付きになってしまいます。 <IMG src="***.gif" align="absmiddle"> として文字と同じ高さ(縦の中央)になったのですが、これをCSSですることはできますか。 教えてください。
- ベストアンサー
- HTML
- HTML+フレーム構成のページを、HTML+CSSで書き換えるには?
HTML+フレーム構成のページを、HTML+CSSで書き換えるには? コンテンツはそのままに、HTML+フレーム構成のページを、HTML+CSSで書き換えることになりました。 ヘッダー、フッター、上部に画像ロゴ、左にメニューを配置したいと思ってます。 メインコンテンツ部分以外はSSIでインクルードしたいと思っています。 案外簡単だと思ったのですが・・・すぐ配置が崩れて悩んでます。 さらに、CromeとIEで確認をするたびに配置が違ってしまいます。 merginとpadsdingを0にしてから始めるらしいことまでは調べたのですが、 そうするととても配置が変で面倒になります。 現在はFFFTPと秀丸とブラウザで作業してます。 ほかに、PhotoShop6とホームページビルダー14とMicrosoftExpressionweb3は手元にライセンスがあります。 HTMLは分かりますが、CSSは初めてです。多少がんばれば、javaScriptも使えるかもしれません。 お薦めの本や、作り方、フリーウェアなどありましたらご指導ください。よろしくお願いいたします。
- ベストアンサー
- HTML
補足
やってみたのですが画像の右「下側」になってしましました・・・。 何か他に影響しているかもしれません・・・