🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

554閲覧

リストタグで作ったボタンが、他のところに影響してしまう。

reiNaka

総合スコア6

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/29 01:32

編集2021/01/29 02:28

前提・実現したいこと

ボタンを作って並べました。
ボタンそのものは問題ないのですが、パンくずリストの表示が変わってしまいます。
パンくずに影響しないようにしたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html

1<ul class="btn-row-1"> 2 <li class="btn-1-box"> 3 <div class="triangle"></div> 4 <a class="btn btn-1" href="#">オンライン面会について</a> 5 </li> 6 <li class="btn-1-box"> 7 <div class="triangle"></div> 8 <a class="btn btn-1" href="#">面会制限について</a> 9 </li> 10 <li class="btn-1-box"> 11 <div class="triangle"></div> 12 <a class="btn btn-1" href="#">入院診療のご案内</a> 13 </li> 14 <li class="btn-1-box"> 15 <div class="triangle"></div> 16 <a class="btn btn-1" href="#">面会のご案内</a> 17 </li> 18 </ul> 19 20 * {```css 21 padding: 0; 22 margin: 0; 23 box-sizing: border-box; 24 font-size: 14px; 25 } 26 li { 27 list-style: none; 28 } 29 a { 30 text-decoration: none; 31 color: #ffffff; 32 display: inline-block; 33 width: 100%; 34 } 35 36 .btn:hover { 37 color: #000000; 38 background-color: #E5E5E5; 39 40 } 41 42 .triangle { 43 position: absolute; 44 display: inline-block; 45 top: auto; 46 right: 5px; 47 width: 8px; 48 height: 8px; 49 border: 1px solid; 50 border-color: black black transparent transparent; 51 transform: rotate(45deg); 52 } 53 54 55 .btn-row-1 { 56 width: 100vw; 57 display: flex; 58 flex-wrap: wrap; 59 margin: 10px auto; 60 justify-content: center; 61 } 62 .btn-1-box { 63 display: flex; 64 align-items: center; 65 position: relative; 66 width: 190px; 67 margin: 8px; 68 } 69 .btn-1 { 70 background-color: #8CC8F7; 71 color: #000000; 72 /* ボタン内の余白 */ 73 padding: 10px 10px; 74 text-align: start; 75 border: 1px solid #E5E5E5; 76 border-radius: 2px; 77 78 } 79 80 81 } 82``` 83 84### パンくずのところ 85```html 86<div style="margin-left:0;margin-right:auto;"> 87 <div class="BrowserBreadCrumbs_Pref01" style="width:100%;background-color:#ffffff;"> 88 &nbsp;&nbsp;現在の位置:<a id="H7_141925_BreadList_ctl00_BreadLink" href="./">ホーム</a><img src="css/Browser_C/BreadCrumbs_pref01/r-arrow.gif" alt="" width="12" height="6" style="vertical-align: middle !important;" /><a id="H7_141925_BreadList_ctl02_BreadLink" href="soshiki/">○○○○○</a><img src="css/Browser_C/BreadCrumbs_pref01/r-arrow.gif" alt="" width="12" height="6" style="vertical-align: middle !important;" /><a id="H7_141925_BreadList_ctl04_BreadLink" href="fukushi/">○○○○</a><img src="css/Browser_C/BreadCrumbs_pref01/r-arrow.gif" alt="" width="12" height="6" style="vertical-align: middle !important;" /><a id="H7_141925_BreadList_ctl06_BreadLink" href="#">○○○</a> 89 </div> 90</div><div class="EndClear"></div> 91<!--BreadCrumbs_Pref01 end--></div> 92 93``` 94```css 95.BrowserBreadCrumbs_Pref01{ 96 color: black; 97 font-size: 100%; 98 text-align: left; 99 background-image:url(ac13.gif); 100 padding:10px 0px 10px 0px; 101 margin: 0 0 10px 0px; 102float:left; 103} 104``` 105### 試したこと 106 107<div>でかこってみたりしましたが、だめでした。 108 109### 110![イメージ説明](5894ed78617cf97012c0847d56e31789.gif) 111 112親ページ(上の組織)からの子ページです。 113i-SITE PORTAL という CMS を使用しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

plasticgrammer

2021/01/29 01:40

パンくずリスト側のソースがないと、どう影響があるかも判断できませんので掲載をお願いします。
guest

回答1

0

ベストアンサー

こんにちは。

a {a.btn {とかではどうでしょうか。


開発者ツールが使えるようになった方が便利ですよ。
ブラウザー開発者ツールとは? - ウェブ開発を学ぶ | MDN

投稿2021/01/29 06:32

Lhankor_Mhy

総合スコア36930

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reiNaka

2021/02/15 22:42

大丈夫になりました。 ありがとうございました。 開発者ツール 難しいですね。 例えば、headerとかも影響されないように組まないといけませんね。 採用されているシステムのなかでするには当たり前にやっててはできませんね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問