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 HTML

liタグを横並びにする方法。この方法なら15秒でできますよ。

投稿日:

Pocket

うも、チャーさんです。

 

あなたがliタグを横並びにしたい、

そう思っていませんか?

 

 

この記事では、liタグを横並びにする方法を、

書いています。

 

なので、あなたがliタグを横並びにしたいなら、

読んでみてください。

 

*この記事の情報の信頼性

この記事を書く僕は、プログラミング歴1年弱ぐらいです。

 

スポンサードサーチ

liタグを横並びにする方法

 

さて、早速結論ですが、

 

liタグで作ったメニューを、

横並びにする方法は、

display:inline; を使うことです。

 

ということで、早速具体例をみていきましょう。

 

 

まずは、普通にliタグを普通にかくと、

以下の画像のようになります。

 

 

しかし、ここに、

display;inline; をつけると、

 

 

はい、liタグ(menu)が横並びに、

なってくれましたね。

 

こんな風に、liタグは、

display:inline; をつけて、

インライン要素にすると横並びになるのです。

 

liタグが横並びになる理由、理論の説明

 

ちなみになぜdisplay:inlineで、

横並びになるのか?

ということの理論説明も書いときます。

 

 

まずinlineとは、みた通り、

インライン要素のことを意味します。

 

そしてこのインライン要素はブロック要素(縦に並ぶ)、

と違い横に並んでいく仕組みになっています。

 

liタグは何もしなければ、

ブロック要素で縦に並びます。

 

 

しかし、display:inline; をつけると

ブロック要素なのがインライン要素に変化します。

 

つまりliタグで作ったメニューも、

横並びになってくれるのです。

 

という訳で、display:inline;で、

横並びにできるという訳です。

理論説明でした。

 

スポンサードサーチ

liタグで横並びにする手順

 

では、どうやってliタグを横並びにするか、

一応説明します。

 

もう画像のコードでわかると思いますが、

1 liタグを書き、

2 そしてliタグに、display:inline; をつけましょう。

 

 

ここでポイントなのが、

親要素であるulや、olタグでなく、

子要素であるliタグにつけるという点です。

 

ulなどにdisplay:inline;をつけても、

liタグのメニューは横並びにならないので、

注意しましょう。

 

スポンサードサーチ

まとめ

 

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

 

liタグを横並びにしたいなら、

display:inline;を使いましょう。

 

そしてそれをliタグにつけましょう。

そうすれば横並びになります。

 

 

では、liタグを横並びにする方法が、

これで伝わったと思います。

 

なので、早速あなた自身のエディターで、

試してみてください。

 

そうするとあなたのプログラミングスキルが、

上達しますよ。

 

 

ということで、まずはliタグを書くとこから、

始めましょう。

 

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

 

チャーさん

 

-css, HTML

スポンサードサーチ

関連記事

no image

htmlのspanとは?使い道を紹介します。「意外に便利」

  どうも、チャーさんです。   あなたはspanタグとは何だ? spanタグって何に使えばいいの? と思っていませんか。   この記事では、spanタグとは、 そしてs …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

no image

htmlのテーブルを結合させたい場合は読んでください。

  どうも、チャーさんです。 あなたは、htmlで作るテーブルのセルを、 結合させたい、くっつけたいと思っていませんか?   この記事では、htmlのテーブルのセルを、 結合させる …

no image

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

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

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

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

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

no image

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

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

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

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

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

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

最新記事

チャーさん

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

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

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