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

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

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

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

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

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

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

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

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

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

最新記事

チャーさん

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

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

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