CSS float | サンプル書き方 | 実例タグ | プロパティ・セレクタ| 5

float CSS コードサンプル DEMO ページ

情報：

floatを使用してfloatヘッダー、フッター、コンテンツとメインコンテンツを含むページを作成する方法

<!DOCTYPE html>
<html>
<head>
<title>CSS float Example</title>
  <style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: lightgray;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: cornflowerblue;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}
  </style>
</head>
<body>
<div class="header">
<h1>float CSS プロパティ Example</h1>
</div>
<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>left</li>
      <li>right</li>
      <li>none</li>
      <li>inline-start</li>
      <li>inline-end</li>
    </ul>
  </div>
  <div class="column content">
    <h1>CSS float</h1>
    <p>CSS の float プロパティは、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義</p>
    <p>CSS の float プロパティは、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義</p>
  </div>
</div>
<div class="footer">
  <p>Footer Text</p>
</div>
</body>
</html>

floatサンプル実行結果

：float ・ float, コード関連記事

全てリセット

CSS float | サンプル書き方 | 実例 DEMO タグ | プロパティ・セレクタ | 5 | 書き方 — CSS float | サンプル書き方 | 実例タグ | プロパティ・セレクタ | 5 – WebRef

2018-07-03css-demo

CSS float | サンプル 書き方 | 実例 DEMO タグ | プロパティ・セレクタ| 5 | 書き方

float CSS コード サンプル DEMO ページ

Html

Glossary

PHP

JavaScript

JQuery

CSS

CSS float | サンプル書き方 | 実例 DEMO タグ | プロパティ・セレクタ| 5 | 書き方

float CSS コードサンプル DEMO ページ