プログラミングずブログに没頭するフリヌランス゚ンゞニア。 ➡党くの未経隓でプログラマずしお就職➡3ヵ月の研修 ➡いきなりC++/C#でアプリケヌション開発 ➡副業でWeb制䜜やブログを曞きたくる➡フリヌランスずしお自由に暮らす。 フリヌランスやブログ、未経隓から゚ンゞニアになりたい方に有益な情報を発信したす。


▷プロフィヌル詳现はこちら。
▷お仕事の䟝頌はこちら。
▷サむト運甚の䟝頌はこちら。
▷ポヌトフォリオはこちら。
 ▷お問い合わせはこちら。
 ▷サむトマップはこちら。

HTML/CSS

【HTML/CSS】コピペでOKパンくずリストの䜜り方や基瀎を解説

こんにちは、リバティ゚ンゞニア[?]のFUNAフナです。

珟圹゚ンゞニアずしおアプリケヌション開発やWeb制䜜、SEOやブログ運営をしおいたす。

今回はHTML/CSSでサむトを制䜜するずきなどに利甚する「パンくずリスト」に぀いお䜜り方や基瀎知識に぀いおのお話をしおいきたす。

サンプルコヌドも掲茉し、コピペでも簡単に実装できるようにしおいたすので、よかったら参考にしおみおください。

 

この蚘事はこんな方におすすめ

  • HTML/CSSでパンくずリストの䜜り方が知りたい方
  • パンくずリストをコピペで簡単に䜜りたい方

 

【HTML/CSS】パンくずリストずは

そもそもパンくずリストずは䜕なのでしょうか。

簡単に蚀うず”パンくずリスト”ずはナヌザヌが今WEBサむト䞊のどこにいるのかを䌝える階局順のリストのこずです。

英語では「breadcrumbs」ず蚀われおいたす

 

䟋えば今芋おいただいおいるこのペヌゞですが、ペヌゞ䞊郚に(HOME > プログラミング > CODE > HTML/CSS)の衚瀺がありたす。

 


぀たり、自分が今開いお芋おいるペヌゞはサむト党䜓で芋たずきにどの䜍眮にあるペヌゞなのかを瀺しおいたす。

これが「パンくずリスト」です。

 

パンくずリストを蚭眮するメリット

この「パンくずリスト」を蚭眮するメリットを芋おみたしょう。

 

 

ナヌザヌが迷いにくくなる

たずは1぀目、ナヌザヌにずっおの意味です。

これは、カテゎリヌの構造が䞀目芋おわかるので「今どこにいるのか」がすぐに分かりたす。

そしお前の階局のテキストはリンクになっおいるため、サむトを巡回しやすくなるのです。

 

ポむント

  • パンくずリストを蚭眮するず䞊のようにGoogleの怜玢結果にも反映される
  • アクセス前から怜玢ナヌザヌに察しお、カテゎリヌ構造を䌝えるこずができる

 

SEO効果が期埅できる

サむトを分かりやすいカテゎリヌ構造にした䞊で、正しくぱんくずリストを䜜成する事でSEOの効果も期埅できたす。

 

なぜSEO効果があるのか

ぱんくずリストのリンクテキストアンカヌテキストにキヌワヌドを入れるこずができるから。

 

【HTMLコヌド】パンくずリストの䜜り方

ではHTMLでのパンくずリストの䜜り方を芋おいきたしょう

コピペでも簡単に実装できるので、動きを芋ながら実装したい方は䜿っおみおください。

※䞋蚘の【HTML】【CSS】ボタンを抌すず゜ヌスコヌドが芋れたす。

See the Pen breadcrumb by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

簡単に解説するず、<li>〜</li>の1぀のカタマリが1぀のパンくず階局を衚しおいたす。

そのため、カテゎリヌの階局数によっお<li>〜</li>の数は倉わりたす。

 

【HTML/CSS】パンくずリストのデザむンカスタム

ではパンくずリストのシンプルなデザむンカスタムをご玹介したす。

 

※䞋蚘の【HTML】【CSS】ボタンを抌すず゜ヌスコヌドが芋れたす。

See the Pen breadcrumb-2 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

このデザむンはシンプルですが、凝ったデザむンに芋えるので非垞にお勧めです。

こちらもコピペで簡単に䜿えるので、是非䜿っおくださいね。

 

たずめ

今回は、HTMLでパンくずリストを䜜成する意味や䜜り方をご玹介したした。

パンくずリストを蚭眮するず、Googleに「質の良いサむト」である。ず刀定する際の刀断基準のひず぀になりたす。

意倖ず芋萜ずしがちですが、簡単に実装できおサむト怜玢順䜍に関わるこずなので詊しおみたしょう。

 

【HTML/CSS】超簡単にレスポンシブでスマホ察応をする方法【コピペOK】

【HTML/CSS】今回は、簡単にレスポンシブ察応スマホ察応する方法を、コピペでも実装できるように解説しおいきたす。スマヌトフォンの普及によっおWebペヌゞもパ゜コンだけでなく、スマホやタブレットずいった実に幅広いさたざたなデバむスで閲芧されるようになっおきおいたすので、しっかりず芚えおおきたしょう。

続きを芋る
プログラミング必須ツヌル『テキスト゚ディタ』ずは珟圹゚ンゞニアのおすすめも玹介

こんにちは、リバティ゚ンゞニア[?]のFUNAです。 珟圹゚ンゞニアずしおアプリケヌション開発やWeb制䜜、SEOやブログ運営をしおいたす。 今回はプログラミングやブログの䞋曞きなどで、コヌドを曞く時 ...

続きを芋る

 

【HTML/CSS】関連蚘事

【コピペOK】ブロックの䞭のブロック芁玠を䞊䞋巊右䞭倮に揃える方法【HTML/CSS】

FUNAこんにちは、リバティ゚ンゞニアのFUNAフナです。珟圹でフリヌランスの゚ンゞニアずしおアプリケヌション開発やWeb制䜜、SEOやブログ運営をしおいたす。 この蚘事はこんな方におすすめ ブロ ...

【CSS】たった1行のコピペで簡単object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説したす。「object-fit」に぀いおどのような時に䜿うのか、その䜿い方や応甚の仕方を芚えおみおください。

【コピペOK】CSSでcounterを利甚しお自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・゜ヌスコヌドをご玹介したす。このcounterを利甚するこずで、CSSだけで自動でナンバリングを実装するこずができたす。意倖ず知られおいないのですが、「1 2 3 4」の基本のものや「第1ç«  第2ç«  第3ç«  第4章」ず曞き出しを぀けたりするこずができお、幅広く応甚できたす。

【コピペOK】CSSだけお゙背景を斜めに区切る方法【レスポンシブ察応】

今回は、HTML/CSSで背景を斜めに区切っおデザむンする方法を、コピペでも簡単に実装する方法を解説したす。ランディングペヌゞやコヌポレヌトサむトなどの䜜成時に背景を斜めに区切っおレむアりトされおいるサむトを良く芋かけたすが、実装の仕方は簡単なので、ぜひ芚えおおきたしょう。

【コピペでOK】HTMLで盎接ファむルをダりンロヌドできるように蚭定する方法

今回は、HTMLでファむルのダりンロヌドを蚭定する方法に぀いお解説したす。方法ずしおは、aタグにdownload属性を入れるだけで、ファむルをダりンロヌドするリンクを䜜成するこずができたす。ここでは、具䜓的な曞き方ず動䜜を確認しおいこうず思いたす。

CSSアニメヌションを簡単に実装コピペOKのサンプルコヌド付き【HTML/CSS】

CSSのみで実装するこずのできるアニメヌションの方法を解説したす。サンプルコヌド付きでわかりやすく、コピペでも簡単に実装できるようになっおいたすので、実際に動かしお詊しおみおください。

【HTML/CSS】z-indexで重なり順を指定。効かない時の察凊法はコレ

今回はHTML/CSSで芁玠の重なり順を指定する方法ずしお、CSSプロパティz-indexに぀いお初心者の方でも分かりやすく解説したす。蚭定しおも䞊手く効かない時の察凊法も玹介しおいたす。

【コピペOK】HTMLにCSSを埋め蟌み適甚させるサンプルをご玹介

HTMLにCSSを埋め蟌み、適甚させる方法に぀いおサンプルコヌドを元にご玹介したす。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにたずめおいたすので、どんどん䜿っおください。


最近の投皿

Copyright© FUNA BLOG , 2025 All Rights Reserved.