HTML&CSS

【CSS】指定した要素を横並びにするfloatプロパティの使い方

【CSS】指定した要素を横並びにするfloatプロパティ

指定した要素を横並びにするプロパティはfloatです。

floatプロパティを用いることで、「左から順番に・中央から順番に・右寄りから順番に」など指定した要素を横並びにすることができます。

 css
li{
	liststyle: none;
	float: left;
}

上記のように「float: left;」を指定すると<li>要素が左から順に横に並びます。

 HTML
<ul>
	<li>1行目のテキスト</li>
	<li>2行目のテキスト</li>
	<li>3行目のテキスト</li>
</ul>

【CSS】指定した要素を横並びにするfloatプロパティの使い方

ヘッダーのリストを横並びに表示させたい場合のサンプルコードを作成します。

HTMLで記述した要素は基本的に縦に並んでいくので、横並びにするにはCSSが必要ですが、CSSを用いてヘッダーの要素を右下の図のように横並びにしていきます。

縦に並んでいる「header-list」の<li>要素を横並びにする場合、<li>要素全体に「float: left;」を指定することで、それぞれの<li>要素が一つずつ左から並んでいき、横並びにすることができます。

CSSで<li>要素は横並びにするプロパティ「float: left;」を使用します。

また、クラス名「.header-logo」に「float: left;」で横並び、かつ、「ont-size: 40px;」でフォントサイズが40pxになるように指定しています。

 HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">プログラミング学習</div>
      <div class="header-list">
        <ul>
          <li>プログラミング学習</li>
          <li>学習方法はこちら</li>
          <li>サンプルコードはこちら</li>
        </ul>
      </div>
    </div>
    <div class="main">
    </div>
    <div class="footer">
    </div>
  </body>
</html>
 CSS
body {
  font-family: "Arial";
}
li {
  list-style: none;
  float: left;
}
.header {
  background-color: #d3d3d3;
  height: 90px;
}
.header-logo{
  font-size: 40px;
  float: left;
}
.main {
  background-color: #ffffff;
  height: 600px;
}
.footer {
  background-color: #d3d3d3;
  height: 270px;
}







-HTML&CSS

© 2021 Issy9174 official web site