• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:ユーザースタイルシートの限定的適用)

ユーザースタイルシートで文末を揃える方法はあるか?

このQ&Aのポイント
  • ウェブブラウザ上の文章の文末が揃っていなくてストレスを感じている人向けに、ユーザースタイルシートを使用して文末を揃える方法を説明します。
  • ユーザースタイルシートを利用すれば、text-align: justify;やtext-justify: inter-ideograph;を設定することで文末を揃えることができます。
  • しかし、text-align: center;や<div align="center">など他の設定との競合問題があるため、適応範囲を制限する必要があります。また、strictな設定を使っている人が少ないため、解決策は限られています。

質問者が選んだベストアンサー

  • ベストアンサー
noname#137826
noname#137826
回答No.3

IEにどうしてもこだわるということであれば、Proxomitronというソフトがあるようです。 ローカルプロキシとして動作するソフトだそうで、データを手元で改変してからIEに渡す、ということだと思います。 また、ご自分でブラウザを書く気があったのであれば、それよりはるかに簡単な方法として、胃に穴が開く前に^^;他のブラウザを使うことを検討されてもよいかと思います。 例えば、Firefoxであればドメインごとに適用するユーザースタイルシートを変更可能です。Stylishというアドオンを併用すれば、ユーザースタイルシートの適用・管理が簡単になります。さらには、Greasemonkeyというアドオンを使用すれば、ユーザースクリプトの適用も可能です。(同様の機能はOperaにもあったはずです。) ここまでくれば、あらゆるページの表示を自分の意のままに変えることができるといっても過言ではありません。 もっとも、そちらにはまってしまって、すべてのページを自分の気に入るように変えなくては気がすまなくて胃に穴が開きそうになっては困りますが・・・。

snowize
質問者

お礼

お返事遅れてしまって済みません。 Proxomitronですが、現在やや体調不良につき、後日じっくりと確認させていただきたいと思います。ただ確認した限りだと要望はかなえてくれそうな感じですね。外部にはき出す情報が変わらないのでしたら、特に問題はないかな? ブラウザに関してはSleipnirに慣れきっちゃっているので少し避けたいところではありますね。というかご指摘の通りあらゆるサイトを自分好みに改変しそうで怖いので(そんくらいの偏執狂じゃなきゃ自作ブラウザなんて考えもしないって話ですかw)、適度な縛りがないと駄目っす(苦笑)。 困った性格です、ほんと。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

>胃に穴が空くほどのストレス 大変ですね そういう方はあえてHTMLという枠に縛られずに、pdfやフラッシュに なさるとよろしいかと思います。 しょせんHTMLなどのマークアップランゲージではブラウザ依存はさけられません。

snowize
質問者

お礼

言葉足らずでした。せっかくアドバイスいただいたのに本当に申し訳ないです! 問題は自分で作成する場合ではなく、他人が作成したもの(それもウェブ上にアップされていて自分で編集できないもの)を自分が閲覧する場合に”限定”(=IEしか使わないので他のブラウザはこの際無視)しています。 閲覧していて不揃いなのが気になるため、IEのユーザースタイルシート機能を用いてなんとか修正できないかどうかという意味の質問でした。 マークアップランゲージ自体は大好きというか、仕様書からなにから全部読み尽くしているようなオタクなのですが、ブラウザの機能についてはさっぱりとかいう。 いっそ自分でブラウザ作ろうかと思いましたが、設計段階で挫折しました。 P.S. ユーザースタイルシート以外でなんとかするのは不可能と勝手に判断しただけなので、「~のプラグインを使えば大丈夫だよ」みたいな方法でも構いません。

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

初めまして。 早速で申し訳ないのですが、文章中の > 世の中には strict なんてことを考えてる人は少ないのだと思い知らされました。 という部分ですが、これは 「本来文章は<p>や<blockquote>などで囲わなくてはならないが、 それらのタグを使用せずに文章をベタ打ちしてしまう人がいるため<p>や<blockquote>のみに限定的に指定してもそれらが反映されない部分が出てくる」 ということでよろしいでしょうか? どのような場面なのかがいまいち分かりませんが、snowizeさんが作成されたWebサイトを第三者が更新する場合があるということですよね? では、『文章を囲むためのみのdiv』を作って、それに指定をかけるのではだめでしょうか? で、デザイン要素(右寄せなど)はさらにdivで囲って、その囲ったdivに指定しておくとか…。 <div id="main">   <div class="text">   文章文章文章   <p>文章文章文章</p>   <blockquote>文章文章文章</blockquote>   </div> </div> #main {   width: 800px;   text-align: right; } .text {   width: 500px;   text-align: justify;   text-justify: inter-ideograph; } 上記みたいなのではだめですか? 私も、CSSでifとかの分岐指定が出来たら楽になるなぁとか考えます。 画像の横幅の違いでCSS振り分けられたらなぁ、とか…。

snowize
質問者

お礼

言葉足らずだったため申し訳ありません。 せっかくお答えいただいたのにごめんなさい。 IEのユーザースタイルシート機能を利用して、MIXIだのなんだのといった「本来なら自分が編集できない部分」にスタイルシートを適用する場合のお話です。strict の解釈はその通りです。 ユーザースタイルシートはあくまでもスタイルシートの上書きしかできないので、HTMLを直接編集することはできません。というか神経質ゆえ、編集できるようになったら見かけるページすべてをガチガチに厳格なスタイルに書き直してますって(笑)。 損な性格です……。 P.S. ユーザースタイルシート以外でなんとかするのは不可能と勝手に判断しただけなので、「~のプラグインを使えば大丈夫だよ」みたいな方法でも構いません。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ボックス幅いっぱいの両端揃えについて、ご質問します。

    ボックス幅いっぱいの両端揃えについて、ご質問します。 cssの「両端揃え」の、  text-align: justify;  text-justify: inter-ideograph; などは、複数行に渡る文章についてのようですが、 単独行で、そのボックスいっぱいの両端揃えはできないでしょうか? 具体的には、表のセル内において、  名   前  出 身 地  好きな歌手 (すみませんが、等幅フォントを想定して見てください) のような、自動で字間が調整されて左右が両方とも揃っているレイアウトです。 現状、letter-spacingでやっていますが、 文字数ごとに調整の必要があるほか、 ブラウザの違いによって、収まらず改行されて  名  前 のようなレイアウト崩れが起こってしまいます。 いろいろ調べてもわかりませんでした。 ご回答いただけますよう、よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル内でセルの幅に合わせて均等割付したい

    テーブルのセルの幅を指定して、その幅に合わせて テキストを均等割付したいのですが、どうすれば良いでしょうか。 テキストは一行です。 justifyを使って均等割付しようとしているのですが、 複数行の場合は上手くいくのですが、一行の場合上手くいきません。 通常通り左寄せになってしまいます。 text-justify:の値も、distribute-all-linesだったりinter-wordだったりと 色々試したのですが、やはり左寄せのままでした。 <TABLE><TR><TD> <DIV STYLE="WIDTH:200px; text-align:justify; text-justify:justify;"> 均等割付したい</DIV> </TD></TR></TABLE> 煮詰まっています。どなたか教えて下さい。 (投稿カテゴリが異なっていたらすみません…)

    • ベストアンサー
    • HTML
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • コラム内に下記のようなスタイルで文章を入力したいのですが、<P>に幾つ

    コラム内に下記のようなスタイルで文章を入力したいのですが、<P>に幾つかクラスを設定して、Firefox (3)ではうまく text-alignができたのですが、他のブラウザーやバージョンでは、あるテキストが次の行に行ってしまうなど、完全に同じようにできません。 テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキス やはり各ブラウザー/バージョンにより、まったく同じに表示するということは 無理なのでしょうか? 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • 外部スタイルシートで段落の行揃えと幅とを指定する

    divを外部cssでスタイル指定し、 すべてのファイルの段落を中央揃え・背景色白にしています。 div { text-align: center;  background-color: #FFFFFF; } これに以下のように幅指定を加えたところ、 width: 400px; 中央揃えが反映されなくなりました。 (IE6.0、NN7.0 WindowsXP) 行揃えと幅とを同時に指定し、反映させるにはどのように記述すればよいでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部スタイルシートは同じなのですが…

    こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記/// <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>  ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス/設備</h2> ○○○徒歩3分<br /> 駐車場2台(バリアフリー)<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright &copy; 2007 All Rights Reserved</div> </div> </body> CSSは下記/// * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか? リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 指定の行のみ右よせのHTML

    ドリームウィーバー2004MXです。 セルの中に3行以上の文字があるのですが、 指定のところだけ右よせにしたいのです。 テキスト1行目は<センター> テキスト2行目は<右よせ> テキスト3行目は<センター> つまりセルには基本 align="center" をしておいて、 2行目だけに“右よせ”を適用したいです。 イメージ -------------------------------------       テキスト1行目                    テキスト2行目       テキスト3行目 ~ ~ ~ ------------------------------------- セルを“分割せず”、 タグだけで“特定の行を右よせにする” やり方がありましたら、教えてください。 お詳しい方、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • 文章を、画像の縦方向の位置の中心に置きたい

    CSSを使ってwebページのレイアウトをしています。 画像の高さの真ん中あたりに、文章を配置したいのですが、方法を教えてください。 「vertical-align:middle;」で指定してみたら1行の文ではうまく行ったのですが、複数行になるとうまくいきません。 どうすれば、複数行の文章で上手く指定できるでしょうか。 [ソース] <style> .test{ width:530px; height:263px; background-color:#ffcccc; font-size:10pt; } img{ vertical-align:middle; } </style> <div class="test"> <p> テキスト<br> テキスト<br> テキスト<strong>テキスト</strong>テキスト<br> <img src="画像のURL"width="250" height="259" alt="画像の名前"> </p> </div>

    • ベストアンサー
    • CSS
  • Netscape7.1のセンタリング

    今、個人でWEBサイトを制作しています。 * { text-align: left; } body { text-align: center; } のようにし、 コンテンツ部を真ん中に配置しようとしているのですが、 Netscape7.1では左に来てしまいます。 調べてみたところ、どうやら Netscapeのバグではなく、InternetExplorerのバグらしいのですが、 それ以上はよくわかりませんでした。 解決策として、どのようなものがあるか 教えてもらえればうれしいです。 ちなみに、 言語はXHTML1.0 Strictで制作しています。

    • 締切済み
    • CSS
  • cssについて

    HTML初心者で困ってます。 cssで body {     text-align: center; } としてレイアウトを中心に表示したのですが、InternetExplorer8で 見ると左寄せになってしまいます。 InternetExplorer6、7では普通に中心になるのですが・・・ どなたか教えてください。