• 締切済み

指定した横幅内で文章を左寄せ(右寄せ)したい。

初めまして。 現在、携帯電話向けのホームページを製作しているのですが レイアウト等の設定方法で自分では分からない箇所があったのでこちらに質問させて頂きました。 基本的に全てのコンテンツの横幅の上限を240pxで統一しています 加えてモバイルサイトとして製作中なんですけれど、 PCで閲覧した場合の見栄えも考慮したいので コンテンツをセンターに表示させる形式のレイアウトにしようと思っています。 そ　こ　で、質問です、 タイトルやボーダー等は画面のセンターに表示させ 目次等の各種文章をセンター240pxの範囲内で左寄せしたり右寄せしたいのですが テーブル系タグや、コンテンツの両サイドの余白を固定で設定して対応すると 閲覧環境によってはコチラが意図していない形で表示されてしまう事は無いのでしょうか？？ また、それ以外の方法で適しているタグやスタイルシートがあれば是非教えて下さい 宜しくお願い致します。

画像を拡大する
  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

1) 携帯端末を念頭に置いてVoidなHTMLを書く。 　　スタイル氏ーとを解釈できない携帯電話用 　　基本的に幅を指定しない 2) HTML内(HEAD内)のスタイルシートを解釈する携帯用に、スタイルシートを書く 3) 携帯端末用(PAD用)スタイルシート 　　ディスプレイ(screen)用スタイルシート 　　これを外部スタイルシートとする。 4) 印刷が想定されるなら、印刷用のスタイルシートを用意する。 という方法で作成しています。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 文字の左寄せセンター表示

    文字の左寄せセンター表示 文字の左寄せセンター表示させたいのですが、左寄せはできましたがセンター寄せができません。普通に左寄せに使用したタグをセンター寄せタグを追加すればよいのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • Firefoxで右寄せにならないのですが

    テキストリンクに背景画像を挿入しています。 それをdisplay:blockにしたとたん、右寄せができなくなってしまいます。 <html> <p class="right"><a href="hellow">こんにちは</a></p> <css> p.right{ text-align : right; } p.right a{ background-image : (250px*30pxの画像です).gif); display : block; line-height : 30px; width : 250px; } display : blockを指定したときにFirefoxでは左寄せに戻ってしまいます。IEでは右寄せのままです。 Firefoxでも右寄せのままに表示したいのですが、どなたかアドバイスよろしくお願いします。

    • ベストアンサー
    • HTML
  • IE6でタグ解釈が変わったのは何？

    IE6を導入したところ、今までのバージョンでは左寄せで表示されていたのが、右寄せされたり、センタリングされたりしているのに気づきました。 過去ログから > これはIE6が今までとは違うタグの解釈をするためです。 > タグの書き方によっては左寄せや右寄せが全てセンターになってしまいます。 というところまでは判りましたが、 具体的に、タグの解釈はどのように変わったのでしょうか？ 自分のWebがこのような状態にあることに気づき、 デザイン上なんとか左寄せ表示されるようにしたいのですが、 直し方が判らず困っています。 どうぞ宜しくお願いいたします。

  • HPでイメージを中央、テーブルを右寄せして並べたいのですが・・・？

    　こんにちは。 私はHP作成ソフトを使わずに、タグ打ちで地道にHPを製作しています。 　最近、ネットで調べてもどうしても分からない事があります。 　それは、イメージを丁度画面中央、テーブルを画面の右寄せにして、しかも並べて表示させたいのです。 　<center><div align"rght">や<table>などのタグを色々組み合わせても、どうしてもうまくいきません。 　どなたかうまく表示させられる方法を教えていただけたら有難いです。お願いいたします。

  • １行内に『左寄せ／センタリング／右寄せ』を同時に書くことは可能でしょうか

    ホームページ作成ウェブ講座で、「floatプロパティ用いいると1行内に左寄せと右寄せを同時に書ける」と言うのを目にしましたが、「１行内に『左寄せ／センタリング／右寄せ』を同時に書く」ことは可能でしょうか。 同講座の説明に従って、以下のスクリプトを作成しましたが、sub1／sub2／sub3の３行が全て左側に縦に並べて表示され、３行以下のhtmlスクリプトもそのまま表示されました。また文字は多少大きめですが、文字色は黒で、指定は無視されました。 <div class="titlebar"> <div class="sub1">Relationship with China and Korea</div> <div class="sub2">对中韩关系说起</div> <div class="sub3">中韓問題に触れて</div> div.sub1 { text-align: left; float: left; } div.sub2 { text-align: center; float: center; } div.sub3 { text-align: right; } div.titlebar { background-color:#cc0000; color:white; font-weight:bold; padding:0.1em; }

  • 横幅の違う画像をalignを使って左寄せ

    画像A 文字A 画像B 文字B というような表示をさせたくて、alignを使って左寄せにしたのですが、画像Bの横幅が画像Aより狭いためか、画像Aの隣に表示されてしまいます。 画像A画像B文字A 文字B という感じです。 タグは <img src="画像A" alt="" align="left"> <img src="画像B" alt="" align="left"> <br><br> 文字A<br> 文字B と記述しています。 Fire foxではちゃんと狙い通りに表示されたのですが、IE7だとダメでした。 なぜIE7では表示されないのでしょうか？IE7で表示されるようにするにはどうしたらいいのでしょうか？ わかりにくい説明だと思いますが、よろしくお願いいたします。

  • CSSレイアウトの回り込みについて

    初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。

  • HTMLで横幅をCSSで設定できません。

    HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }

    • ベストアンサー
    • HTML
  • ホームページの横幅が広くて、印刷すると切れてしまう。

    会社のホームページを作っていて、横幅の設定について質問させて下さい。 横幅720pxで作成していたのですが、印刷する時に切れないように横幅を短くして欲しいと言われました。windowsのIEから印刷しようとすると、右側が切れてしまいます。印刷の設定を変えればよいのですが、その設定をしていない（分からない）人も多いようです。 大企業のHPを見てみると横幅700～780pxが多いので、これが主流だと思っていたのですが、やはり右側が切れずに印刷できるように横幅短め（600px以下？）で、ホームページを作成した方がよいでしょうか？ 私としては印刷幅に合わせると横幅がかなり狭くなるように思うので、モニタ表示を優先して作成したいのですが・・・ みなさんはどうしていますか？ご意見伺えたらと思います。

  • 右寄せ揃えに関する質問

    Word２０００でビジネス文書の表を作成しています。 いろいろとわからない部分にぶつかってしまいます。 ●質問１ まず、たとえば『月日』を示す枠で、たてに上から『４月２２日』、その下は順に『２３日、２４日、２５日・・』と入れるとき、一番上の『４月２２日』をまずセル位置で上下左右中央揃えに設定したあと、『２３日、２４日、２５日（４月は省略）』を『４月２２日』の『２２日』の『日』の字に合わせて入れる場合、どのように入れたらよいのでしょうか？ （『２３日、２４日、２５日』を中央揃えにすると揃いません。また右寄せにすると右寄りすぎてしまいます） ●質問２ あと、右寄せにした場合、右端の枠から全角１文字分ほどスペースを空けて右側にそろえて寄せたい場合、どのようにしたらよいでしょうか？ 普通に右寄せした場合、右の枠ぎりぎりに寄ってしまいます。 旧ワープロ検定の問題集回答では、右寄せにした場合、全角一文字程度右側にスペースが空いて縦の数値がそろって入っているのです。 それともこれは私の勘違いで、ただ『右寄せ』にしたらいいのでしょうか？ （解答を見るかぎりは、全角１字分ほど余裕をとってあるように見えるのですが・・・） 『右寄せ』『左寄せ』は、余白を設定できるのでしょうか？ 問題を解いた経験がまだ少なく、見当がつきかねます。 思い当たることがあれば、ぜひ教えてください。 宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する