プログラミングの方が専門で、デザインにはあまり詳しくないので質問させてもらっています。
今回、MacBook Proを買ったのですが、自分が作っているサイトの一行分の文字数の改行位置が
MacBook Proでみた場合、一行分の文字数の最大値から少しはみ出してしまっていて、行数文字を揃えて書いたつもりが、ばらばらの見苦しい見え方になっていました。
これまでほとんどWindowsで仕事をしていたので、Windows上にIE以外にもSafariやFirefoxのブラウザもインストールして、それらでは一応見栄えは確認していたのですが、同じSafariのブラウザでもWindows上で見た場合とMacBook Proのデフォルとでみた場合には見栄えの違いがあることがわかりました。(多分、デフォルトで使っているフォントの違いで一行の文字数の最大値が変わっているのだと思います。)
そこでお聞きしたいのは、どのPCのどのブラウザで見た場合でも、意図した一行分の文字数の最大値を超えないで必ず改行するようなCSSの書き方とかあるのでしょうか?全てのPCの全てのブラウザで改行位置を確認しなくてもうまくいく方法とかあれば教えていただきたいのです。
よろしくお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
No.1です。
>上記のような意図した見栄えと違ってしまうのを防ぐ
これはウェブの世界では、致命的な誤りだということは御理解されているとして。
下記のHTMLにおいて、特定の重要な単語が折り返されたくないときには
<p>
ここからはひとつの<em>段落</em>です。<em>段落</em>を<em>マークアップ</em>するときは<p></p>(Paragraph)というタグを使ってマークアップします。<br>は、ひとつの<em>段落</em>でありながら<strong>強制改行(orced line break)</strong>で、通常のHTMLでは一度も登場しないはずです。
</p>
とマークアップしておいてあるとしたら
em,strong{white-space:pre; font:bold normal;text-decoration:none;}
strong{font-color:red;}
とデモすれば、em,strong内では改行されません。
長い文章には使うのは望ましくありません。20文字程度の文字しか表示できない端末(携帯電話)とか・・
<pre>を使うとしたら、詩とかコンピューター用のコードとかでしょうか??
No.2
- 回答日時:
とりあえず、あなたの考え、やりたいことは、WEBデザインとしては致命的誤りであることをまず理解してください。
>どのPCのどのブラウザで見た場合でも、意図した一行分の文字数の最大値を超えないで必ず改行する
これが閲覧者に対してどれほど不親切かということを考えたことは無いのですか?
「1行の文字数」なんてものを決めてはいけません。折り返しまでの文字数なんていうのは、閲覧者の環境によって「変わらなくてはいけない」ものです。たとえば視力の弱い人があなたのサイトをフォントサイズ3倍にしないと読めなかったらどうするんですか?1行の文字数を固定して閲覧者に横スクロールを強要しますか?それではユーザビリティのかけらもありません。
ちなみに、本文には書いてないけどなんだかあなたのサイトはフォントサイズも固定にしてそうですが…それは大丈夫ですか?
とにかく、「1行の文字数」を固定しようなんていうおろかな考えは今すぐ捨て、折り返しまでの文字数が変わっても困らないようなサイト作りをしてください。
ついでに言うと、「改行」と「折り返し」の区別もつけましょう。
No.1
- 回答日時:
>自分が作っているサイトの一行分の文字数の改行位置が
MacBook Proでみた場合、一行分の文字数の最大値から少しはみ出してしまって
もっとも基本的な事ですが、HTMLを使ってページを作成されていらっしゃいますよね。あなたが、そして多くの方がHTMLを使用されるのは、ただひとつ・・・
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML4.01仕様書邦訳/2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
例えば視覚弱者がCtrl++でフォントサイズを大きくしても、スクリーンリーダーで読み上げても、携帯電話(ガラケー)で見ても、幅広のディスプレイでもスマホのような小さな画面で見ても・・利用できるようにするためにHTMLで作成するのですよ。
どのような指定をされているか分かりませんが、例えば段落でしたら
<p>
ここからはひとつの段落です。段落をマークアップするときは<p></p>(Paragraph)というタグを使ってマークアップします。<br>は、ひとつの段落でありながら強制改行(orced line break)で、通常のHTMLでは一度も登場しないはずです。
</p>
と言う風にマークアップしますから、幅やフォントサイズがどのようであっても、右端で折り返されるされるはずです。
また詩の様に改行なども内容の一部であるような場合は、
<pre>
山のあなたの空遠く
幸 住むと人のいふ。
噫、われひとゝ尋めゆきて、
涙さしぐみ、かへりきぬ。
山のあなたになほ遠く
幸 住むと人のいふ。
</pre>
とマークアップします。
>意図した一行分の文字数の最大値を超えないで必ず改行するようなCSSの書き方
div.section p{font-family:monospace;width:40em;}
とすれば、その段落(sectionブロック内の段落)については、40文字幅になります。
※プロポーショナルフォントは小さな文字があると40文字を越えます。monospaceにします。また英文を含む場合は、単語内では改行されません。
しかし、この方策はHTMLの目的を考えると間違っていますよ。
段落内では、段落の幅にきたら自然と改行されるのが本来の姿です。
この回答への補足
御返答ありがとうございます。
<pre>というタグは使ったことはありませんが、やりたいことはこれと同じで、
たとえばこの文章がもう少し長くてPCやブラウザの違いにより途中で折り返されて
しまって、上記のような意図した見栄えと違ってしまうのを防ぐことってできる
のでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ノートパソコン Windows 10 動作改善方法 6 2023/04/26 22:30
- その他(ブラウザ) Operaブラウザの文字の自動改行設定はどこにありますか 1 2022/12/16 15:34
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/04/21 08:59
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- Excel(エクセル) capeofdragonと申します Excel2016を使っておりまして 半角又は全角の任意文字列が 2 2022/10/31 13:51
- その他(プログラミング・Web制作) プログラミング pythonの問題について 2 2022/04/19 00:41
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- Excel(エクセル) エクセル関数の変わった使い方 3 2022/05/13 17:12
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/03/09 10:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
高校1年生情報の問題について。
-
<h1></h1>のタイトルの行に画像...
-
preタグがプロの現場であまり使...
-
改行したときの幅を狭くする方法
-
PCの画面を縮小したらサイズ...
-
各種ブラウザの改行位置
-
改行が変な位置、中途半端な位...
-
テキストエリア内の改行禁止
-
Labelでは1行しか書けない
-
改行コードの削除
-
textarea と、 input type の...
-
均等な空白部分をつくるには?
-
<a href="長いURL"> を途中で...
-
テーブルの中にスペースを入れたい
-
キーフレーム
-
掲示板からIPアドレスってど...
-
XMLを作成してもタグしか表示さ...
-
aviutlで最後まで動画が読み込...
-
GoogleChromeでレイアウトが左...
-
ボタンコントロールのTEXT...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルのセルデータを自動改...
-
テキストエリア内の改行禁止
-
長いURLを途中で改行(折り返す...
-
H1タグに改行の<br>を使う
-
\\n \\r \\t について
-
テーブルの幅を固定するとnowra...
-
テーブル内の文字列を改行させたい
-
<TD><input type="text"></TD>...
-
「:」について
-
PCの画面を縮小したらサイズ...
-
preタグがプロの現場であまり使...
-
改行できる・できない入力ボッ...
-
Windowsのformでtextareaに入力...
-
文字の最後に半角空白が勝手に...
-
XMLの改行方法とリンクの仕方
-
テキストエリア内の改行もその...
-
<br />タグの、brの後の半角ス...
-
htmlで文字列をクリップボード...
-
Hタグを改行禁止にしてspanのよ...
-
VBE でスペースと改行を見える...
おすすめ情報