SoLA2-TechBlog

退屈な作業はプログラムに任せましょう！日々の作業に少し工夫を足すだけであなたの時間はもっとクリエイティブになる。

【HTML基礎】SEのゆかりさんが淡々と解説する動画【floatと回り込み】

基礎知識シリーズ HTML入門

f:id:gootor3030:20180827040040j:plain

概要

皆さんこんにちは、SoLA2です。

現場でバリバリ働いているエンジニアのアナタ！bootstrapのグリッドシステムを利用してしまえばfloatなんていらんわ！とか思って、floatの知識が曖昧なまま、誤魔化したりしてませんかー？・・・何を隠そう私がそう思ってました。

なので戒めの意味も込めてfloatに関する記事を書こうと思います。今回は基礎知識シリーズ番外編です。毎回堅苦しいのもどうかと思ったので、今回は動画にしてみました。動画で見にくいコード部分は記事に載せておきます。

floatと回り込み


サンプルコード

HTML
  • float-sample.html
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>サンプル</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
            ヘッダ
        </header>

        <div class="wrapper">
            <div class="mainContent">
                メイン
            </div>
            <div class="sideBar">
                サイドバー
            </div>    
        </div>

        <footer>
            フッター
        </footer>
    </body>
</html>
CSS
  • style.css
body {
    color: white;
}

header {
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
}

.wrapper::after {
    content:'ここに挿入されてます。';
    color: black;
    clear: both;
    display: block;
}

.mainContent {
    float: left;
    height: 100px;
    width: 60%;
    background-color: green;
}

.sideBar {
    float: right;
    height: 100px;
    width: 30%;
    background-color: blue;
}

footer {
    height: 50px;
    background-color: black;
    margin-top: 20px;
}

まとめ

いかがだったでしょうか。今回はHTMLでややっこしいfloatについて学びました。最近はbootstrapなど便利なものがあるので、こういった基本的な事は忘れがちになってしまいますが、時々そういったものが使えないシーンに出くわすこともありますので、そういったときに恥を欠かないように抑えておきましょう！

ではまた。