スタイルシート、文章の一部にリンクをはると改行される現象について

質問

スタイルシート全くの初心者です。
文章の一部にリンクを貼りたいのですが、改行してしまいます。

（詳細は<a href="＊＊＊.html">参照</a>してください。）

としますと、

（詳細は
参照
してください。）

と表示されてしまいます。
改行されないようにしたいので、考えられる原因を教えてください！

回答No.4

神崎 渉瑠（@taloo）

質問者さんが全部人任せな人なら回答はやめようかと思いましたが、そうでもなさそうなので。。。

> スタイルシート全くの初心者です。
ということは勉強を始めたばかり何ですよね。
> どのようにすれば上記を実現することができますでしょうか。
少なくとも消せばいいことくらいは、聞くまでもないはず。
中学校の体験学習でホームページ作りを勉強している学生さんでもすぐに思いつくことでしょう。
自分が思いつく方法を全て試して、それぞれどのようになったかくらいは書いてもらわないと、
質問者さんが何を書いて、何を試されたかはまったくわかりません。
何を書いているかがわからなければ、どのように修正するばいいかもわかりません。

タグセレクタに対してdisplayプロパティを変更しているような、大規模な調整は、
その変更に対してどのような影響が出るか、想像は出来ないです。
ましてや<a>のような、ページのどこにでもあるような要素ですから。
どんな使い方をしているかは想像にすぎませんが、
スタイルシートを消せば「その部分への対策」にはなりますが、その弊害は大きいでしょうね。

調整方法はいくつかありますが、
HTML全体、CSS全体がどのように書かれているかで変わりますので、
HTML全体、CSS全体もわからずにどうすればいいか、というのはお答え出来ません。

おすすめはしませんが、手っ取り早く作るなら、
a.inline{display:inline}
などと作っておき、

（詳細は<a href="＊＊＊.html" class="inline">参照</a>してください。）

インライン表示したい<a>全てにclass属性をつけて下さい。

> 作ってもらったホームページを、自力で更新しようとしています。
まぁ、a{display:block;}なんて無茶な書き方をするのは、作った人が悪い、ということになると思いますけどね。。。

おすすめというか、私ならこのように修正する、という方法は、
ページの大きさやサイトの規模（ページ数）にもよりますが、修正しよう物なら、HTML、CSSとも、結構な量になるかもしれません。

> （詳細は<a href="＊＊＊.html">参照</a>してください。）
この部分を調整するのではなく、「この部分以外の全て」を調整しなければならないかもしれません。

タグセレクタを使うのではなく、ブロック表示にしたいところにクラスセレクタやネストセレクタをつかって調整するのが良いんじゃないでしょうか。

a{display:block;}
<a>タグセレクタが適用される</a>

a.menu{display:block;}
<a class="menu">クラスセレクタが適用される</a>

div.menu a{display:block;}
<div class="menu"><a>「class="menu"のdiv要素」にネスト（内包）しているa要素に適用される</a></div>

タグセレクタを書かずに、クラスセレクタしか書かなければ、<a>全体に影響しなくなります。

その上で、display:blockを適用したい<a>全てにclass属性をつけていくことになります。

かけ算も出来ないのに四角形の面積を求めようとしても無理ですよ。
自分で作るなら、いきなり応用から始めるのではなく、
CSSの前提知識でもあるHTMLや、セレクタの書き方を勉強するところから始めるのをおすすめします。
セレクタの書き方は、参考書の最初の数ページ目に書かれています。

回答No.3

higekuman

#2です。

display:block; を削除した結果、まだ改行されるのでしょうか？それとも改行されないようになったのでしょうか？

全体のレイアウトが崩れるかどうかは、これとは別問題です。

回答No.2

higekuman

#1さんの回答への補足に、「display:block; を発見しました」とありますが、発見したとはどうことですか？　ご自分で書かれたわけじゃないのですか？

#1さんは、「改行されてしまうのは、a{ display:block; } が書かれているからじゃないか」とおっしゃっています。
その回答をいただいて、試しに a{ display:block; } を消してみるとかしてみましたか？

そもそも、質問者様は「考えられる原因を教えてください」と言っていて、それに対して#1さんは考えられる原因を回答していますよ。

補足

大変失礼いたしました。
#1様には原因を明確にしていただきましたので、
お礼申し上げました。

「発見した」という表現をいたしましたのは、
作ってもらったホームページを、自力で更新しようとしています。
display:block; の削除もいたしましたが、全体のレイアウトが
若干崩れてしまいました。

削除以外の他の方法はございませんでしょうか。

回答No.1

神崎 渉瑠（@taloo）

一番考えられそうなのは

a{
display:block;
}

が書かれていることでしょうか？

お礼

考えられる原因を明確にしていただき、ありがとうございました。

補足

talooさん、ありがとうございます。
おっしゃるとおり、

display:block;

を発見しました。
どのようにすれば上記を実現することができますでしょうか。