2024.01.03HTMLでリストを作成した時、もっと凝ったものを作成したいと思ったことがあると思います。この記事では、CSSでリストの「li」要素を横並びにして、レイアウトを綺麗に見せる方法を紹介します。公式HP公式HP公式HP基本のリストHTMLを使った、基本のリストの書き方を確認してみましょう。<li>キウイ</li></ul>自動的に「・」が先頭に付けられ、いかにもリストという感じですが、もっときれいに表示させたくなります。それを実現するのがCSSです。リスト要素を横並びで実現する方法CSSでリストを横並びにする方法は、代表的なもので2種類あります。・「Flexbox」を利用する・「float」プロパティを利用する方法1:「Flexbox」を利用するCSSを使って簡単に横並びを実現する方法として挙げられるのが「Flexbox」です。FlexboxはCSS3で導入されたCSSの機能で、要素の並びを自在に操ることができる大変便利なものです。flexboxを使って横並びをするにあたり、最もシンプルなコードから紹介します。」で先頭の「・」を消しています。このようにただ並べるだけでは余白が無さすぎて窮屈です。横並びにする時は余白(margin)を入れてみましょう。1em;}このサンプルでは、左側に1em(1文字分)の余白を入れています。0.5em;}と左右に設定すると、バランスが取れた表示になります。left」を設定する方法です。こちらもサンプルを確認してみましょう。<li>キウイ</li></ul>「Flexbox」とは異なり、「ul」要素ではなく「li」要素に設定するということに注意してください。2つの方法は同じように表示を実現しているように思いますが、リストの後に別の要素が入った場合の動きが異なります。<li>キウイ</li></ul><p>次の要素</p>このようにリストの後に「p」要素が入ってきた場合の動きを確認してみましょう。left」はリスト外の「p」要素も一緒に横に並んでしまいました。仕様上、リスト以降の要素を横並びで表示するようになるため、このように予期しない配列となる可能性があります。これを避けるためには「p」要素で「float」の設定をクリアする必要があります。以下のCSSに書き換えることにより「Flexbox」と同様の表示をすることが可能です。}どちらの方法を使うのが良いかリストを横並びで扱う方法が2種類あり、どちらも同じように表示をすることができます。それでは、実際に使う時どちらを選ぶのが良いかを判断するため、それぞれのメリット、デメリットを挙げたいと思います。Exproler)2.「float:left」メリット・CSS3非対応ブラウザでも動作するデメリット・他の要素を巻き込んでしまうため「clear:left」が必須になるそれぞれメリットデメリットはありますが、「flexbox」の方が新しい技術のため、自由度は高くなっています。「flexbox」を選択しても大きな問題は無いでしょう。まとめCSSでリストの「li」要素を横並びにする方法を紹介しました。新しい「flexbox」の方が自由度は高く、ほとんどのブラウザがCSS3に対応しているどちらの方法でも、リストを横並びにするには問題はありませんので、必要に応じて使い分けましょう。2024.01.29Pythonとは?注目のプログラミング言語の学習方法やできることを徹底解説。2024.01.31CSSで線を引く方法を徹底解説。WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。資料をダウンロードするIT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。資料をダウンロードする働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。ペースでエンジニア転職を目指す。