<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>あり、なしで半分ずつにして統計を取るくらいの事をしないと、問題ないか、デザインを諦めるべきか、というのはわからないと思います。
相当な作業になると思いますので、無料で聞くのは無理じゃないでしょうか。
ともあれ情報商材は詐欺も多いようですのでご注意下さい。
少し前にベストアンサーを決めてしまいましたが、早く見れていればこちらにしたかったと思います、ご回答ありがとうございました
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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリア内の改行もその...
-
H1タグに改行の<br>を使う
-
バナーリンクと文字の間の下線...
-
Hタグを改行禁止にしてspanのよ...
-
エクセルVBA テーブルのフィー...
-
テーブルの幅を固定するとnowra...
-
<h1>を使っても無改行にするには
-
「:」について
-
<PRE>~</PRE>の最後を改行しない
-
<br />タグの、brの後の半角ス...
-
なぜか<p> </p>が挿入され...
-
VBE でスペースと改行を見える...
-
textareaを非表示
-
テキストエリア内の改行禁止
-
長いURLを途中で改行(折り返す...
-
XMLの改行方法とリンクの仕方
-
空白行について(できればCSS)
-
<input type='hidden' name='x'...
-
ブラウザでのタイ語の改行について
-
\\n \\r \\t について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
H1タグに改行の<br>を使う
-
テーブルの幅を固定するとnowra...
-
\\n \\r \\t について
-
長いURLを途中で改行(折り返す...
-
Hタグを改行禁止にしてspanのよ...
-
テキストエリア内の改行禁止
-
「:」について
-
改行できる・できない入力ボッ...
-
VBE でスペースと改行を見える...
-
文字の最後に半角空白が勝手に...
-
preタグがプロの現場であまり使...
-
PCの画面を縮小したらサイズ...
-
テキストエリア内の改行もその...
-
XMLの改行方法とリンクの仕方
-
liタグの自動改行をやめたい!
-
<br />タグの、brの後の半角ス...
-
<a href="長いURL"> を途中で...
-
高校1年生情報の問題について。
-
<h1>を使っても無改行にするには
-
mailtoで本文に改行を入れたい
おすすめ情報