質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

Q&A

1回答

649閲覧

CSS、HTML パンくずリストの作成練習中の質問

yamashita1986

総合スコア0

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/09/13 04:14

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

プログラミングの課題で途中でパンくずリストを行っています。サルカワ(https://saruwakakun.com/html-css) Webサイトを参考にしてリストの使い方は分かったのですが課題のリストを作るとき、自分でできたこと③から課題完成までに途中で書き加えるCSSの過程と意味が理解できない(何のために書いたのか、書くとどうなるのか)部分があったので質問しました。よろしくお願いします。

*初学者で現在は独学でプログラミングの勉強中です

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

課題のHTML。

イメージ説明

作りたいパンくずリストとそのCSS。
イメージ説明

イメージ説明

試したこと

①横並びにするため<li>の親要素の<ol>にdisplay:flexを設定して横ならびに。
②li::after {content: ">" ;でli の後ろに 「>」マークを付ける。
③「>」の両サイドにスペースを作るために「margin-left:6px;,margin-left:6px」を設定。すると下記の画像のようになってしまいました。
}
イメージ説明

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

yambejp

2020/09/13 04:43

ソースは画像ではなくテキストで貼ってください (問題のある表示は当然画像で貼ってもらって結構です)
guest

回答1

0

css

1<style> 2nav ol{ 3list-style:none; 4display:flex; 5padding:0px; 6} 7li:not(:last-child)::after{ 8 content:">"; 9 margin-left:6px; 10 margin-right:6px; 11} 12</style> 13<nav> 14<ol> 15<li>1</li> 16<li>2</li> 17<li>3</li> 18</ol> 19</nav>

投稿2020/09/13 04:49

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問