css

cssでメニューに区切り線を表示させる方法

投稿日:

Pocket

うもチャーさんです。

 

あなたは、cssでメニューに区切り線を、

表示させたいと思っていませんか?

 

 

この記事では、以下の画像のような、

区切り線を表示させる方法を書いています。

 

css メニュー 区切り線

なので、あなたがcssでメニューに、

区切り線を表示させたい場合、

このまま読み進めてみてください。

 

スポンサードサーチ

cssでメニューに区切り線を表示させるコード

 

とゆうことでまず結論からいきまして、

コードから紹介しますと、以下の記述を書けば、

区切り線つきのメニューが表示されます。

 

HTML

<body>
 <ul>
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
 </ul>
</body>

 

CSS

li {
 display:inline;
}

li::after {
 content:”/”;
 margin:10px;
}

 

こちらを記述すると、

以下のような画像が表示されます。

 

css メニュー 区切り線

 

区切り線を表示させる記述の説明

 

では補足説明に入ります。

 

liタグはわかると思うので、

li::after {
 content:”/”;

 

の記述のとこを説明しますと、

この::afterというのは、

擬似要素というものです。

 

 

擬似要素を使うと、

HTMLで書いたように文字や、

記号を表示させることができます。

 

で、この機能を使うと、

cssでも文字や記号を表示できます。

 

これを使って、メニューの間に、

区切り線を表示させてるわけです。

 

 

で、区切り線を表示させるには、

このcontent:の””ダブルクオーテーションの、

間に書いた記号が表示されます。

 

li::after {
 content:”/”;

 

なので、このcontentの後にスラッシュではなく、

|を書けば|が表示されますし、

*と書けば*が表示されるわけです。

 

 

で、擬似要素で、区切り線を表示させても、

間が詰まってるので、

左右にmarginを入れてあげると綺麗になります。

 

li::after {
 content:”/”;
 margin:10px;
}

 

 

というわけで、

CSSの記述として、

li {
 display:inline;
}

li::after {
 content:”/”;
 margin:10px;
}

 

と書いてやればメニューの間に、

区切り線を表示できます。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

cssでメニューに区切り線を表示したい場合、

HTML

<body>
 <ul>
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
 </ul>
</body>

 

CSS

li {
 display:inline;
}

li::after {
 content:”/”;
 margin:10px;
}

 

上記を、

bodyの中と、cssの中に書けば、

表示できますよ。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。