![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
<header>
<h1>これが私のサイトタイトル</h1>
<nav>
<ul>
<li>りんご</li>
<li>ごりら
</header>
こんなヘッダーを左カラムとして置いていますがサイトタイトルがボックスの幅より長いため自動的に改行されてしまいます
そこで<br>またはwhite-space:preで以下の2通りの記述をするのは望ましくないとされていたり、悪いことだたりするのでしょうか?
具体的にはサーチエンジンのクロウラーが検索結果の上位に来させないようにしたり・・・
<h1>これが私の<br>サイトタイトル</h1>
または
<h1 style="white-space:pre">
これが私の
サイトタイトル
</h1>
ご回答よろしくお願いします
No.1ベストアンサー
- 回答日時:
何かサイトデザイン的な問題で、見出しが改行されるのが不都合なら、CSS等で調整が必要ですが。
長い見出し自体に質問者さん自身が特に何も問題が無いと思っているのなら、変な改行タグ(brなど)を入れないで、そのまま平文のままの方がむしろ良いです。後、「white-space:pre」は全く持ってオススメ出来ませんね。それで見栄えが良くなったと思ってるのは製作者だけで、実際にサイトを利用する人たちにとっては見難いことこの上ないですから。見出しが露骨に本文と関係ない、いわゆる「釣りタイトル」で無いのなら、サーチエンジンの評価が下がる様な事も無いので、何も弄る必要はありません。
つまり…
<h1>これが私のサイトタイトル</h1>
~のままでOK。余計な事はしない方向性で。
No.3
- 回答日時:
デザイン的に改行させたいのなら、brよりもspanの方が良いです。
brは何らかの区切り(文の区切りや、住所の区切りなど)を示します。
<h1><span style="display:block">これが私の</span><span>サイトタイトル</span></h1>
<wbr>というのがありますが、日本語ではOperaしか対応していないようです。
(wbrタグを使う為の条件があるのかもしれませんが。今後OperaのレンダリングエンジンがWebkitになるので、wbrが効かなくなる可能性もあります。)
<h1>これが私の<wbr>サイトタイトル</h1>
ただ、brとwbrの意味関係がよくわかりません。
http://www.w3.org/TR/2012/CR-html5-20121217/text …
例を見ると、私の使い方(英単語の区切り、日本語の言葉/節/詞の区切り、禁則処理)と同じように思えるのですが。。。
適切な位置で改行させた方が、私はかっこいいとおもいますけどね。デザイナーならこれくらいのこだわりがあっても、むしろ当然だと思います。
(添付画像はOKWaveサイトにあった広告バナースクリーンショットを改変しました)
ただし、これがSEOに対してどのような影響があるかはわかりません。
SEO会社なら調査されているかもしれませんが、
おそらく同程度のSEOを施したサイトを100個くらい作って、<span>や<wbr>あり、なしで半分ずつにして統計を取るくらいの事をしないと、問題ないか、デザインを諦めるべきか、というのはわからないと思います。
相当な作業になると思いますので、無料で聞くのは無理じゃないでしょうか。
ともあれ情報商材は詐欺も多いようですのでご注意下さい。
![「見出しを改行させることはしないべきか」の回答画像3](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/b/1238589_5497ea7fa5865/M.jpg)
少し前にベストアンサーを決めてしまいましたが、早く見れていればこちらにしたかったと思います、ご回答ありがとうございました
display:blockは<h1>もすでにブロックレベルだったので思いつきませんでした
試してみようと思います
ありがとうございました
No.2
- 回答日時:
質問のタイトルと、書かれたソースが一致しません。
>見出しを改行させることはしないべきか
とっても難しい日本語です。「見出しは非改行であるべきか?」、改行させないほうが良いのか??と読み取れます。
それでいて、
>以下の2通りの記述をするのは
なのに、
・サーチエンジンのクロウラーが検索結果の上位に来させないようにしたり・・・
・<h1>これが私の<br>サイトタイトル</h1>
・<h1 style="white-space:pre">
と三つの案が出されていたり・・
ひょっとして、指定された位置以外で改行させたくない??ということ?
HTML5ではBRは
【引用】____________ここから
The br element represents a line break.
br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.6 Text-level semantics — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/text … )]より
「brは改行を意味し、改行自体がその段落の内容であるときのみ使う」と言う事です。
<h1>これが私の<br>サイトタイトル</h1>
は改行自体が<h1></h1>の内容として意味があるならまったく構いませんが、常に改行されてしまいます。
<h1 style="white-space:pre">
これが私の
サイトタイトル
</h1>
この場合は、HTML的には一続きの内容です。(半角スペースや改行はHTMLでは空白文字で複数あるときを含め、単語境界としてみなされます。よって、このHTML自体は特に問題はないでしょう。それをスタイルシートで「整形済み」と表現することとはまったく別問題で、スタイルシートは意味的に考えませんから・・
ただ、文書構造上で内容的に異なるのでしたら
<heder>
<hgroup>
<h1 style="width3em">山歩き</h1>
<h2 style="width6em">富士山に登る</h2>
</hgroup>
・・・
として、
header h1{float:left;}
header hgroup:after{content:"";display:block;clear:left;}
とか・・
結論から言うと、内容が分からないので、どうしたらよいかがアドバイスできない。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
\\n \\r \\t について
-
htmlで文字列をクリップボード...
-
テキストエリア内の改行もその...
-
テキストエリア内の改行禁止
-
mailtoで本文指定に改行をしたい
-
「:」について
-
Dream Weaverの改行時にTabキー...
-
テーブルの幅を固定するとnowra...
-
カーソルを合わせると説明を表...
-
<a href="長いURL"> を途中で...
-
テーブルの中にスペースを入れたい
-
ページ下部のDIV要素下部に不要...
-
テキストエディタで文字列を揃える
-
改行できる・できない入力ボッ...
-
H1タグに改行の<br>を使う
-
htmlでの /> や <br /> の意味
-
<br />タグの、brの後の半角ス...
-
Eclipseでタブや改行マークの色...
-
スマホサイトの複数半角スペー...
-
テーブル内のハイフンで改行さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
\\n \\r \\t について
-
テキストエリア内の改行禁止
-
改行できる・できない入力ボッ...
-
preタグがプロの現場であまり使...
-
テーブルの幅を固定するとnowra...
-
H1タグに改行の<br>を使う
-
「:」について
-
テキストエリア内の改行もその...
-
htmlで文字列をクリップボード...
-
Hタグを改行禁止にしてspanのよ...
-
長いURLを途中で改行(折り返す...
-
カーソルを合わせると説明を表...
-
XMLの改行方法とリンクの仕方
-
VBE でスペースと改行を見える...
-
Windowsのformでtextareaに入力...
-
文字の最後に半角空白が勝手に...
-
高校1年生情報の問題について。
-
PCの画面を縮小したらサイズ...
-
<br />タグの、brの後の半角ス...
-
<TD><input type="text"></TD>...
おすすめ情報