Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

最新記事

チャーさん

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

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

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