CSSで文字の右に画像を表示する方法／画像を背景に指定する

はじめに

今回は画像を表示させる場所についてです。文章を左に、画像を右に表示してみたいと思います。CSSで「float」を使う方法です。少しハマったところもあったので詳しく解説していきます。

f:id:Start_python:20200205112508g:plain

文字の右に画像を表示する方法

float: right; /*右に寄せる*/

画像サイズを固定（自動で縮小・拡大）させる場合は「width: 300px; /*画像サイズを固定*/」を使います。

「HTMLファイル」での文字の記述場所は、「float」で指定した「画像（要素）」の後ろに記述します。

<h3>サンプル３</h3>
<img src="static/images/sample3.gif">
<h3>タイトル</h3>
<p>本文</p>
<div id="time3"></div>

例えば上記の場合だと、「サンプル３」はそのまま表示されて「タイトル」から下の文字が「画像」の左側に表示されます。（画像より下の部分では文字は通常の全体表示に戻ります）

しかしこのままだと問題が起こります。

f:id:Start_python:20200205105521p:plain

出ました！「CSS完全に理解した」状態です。

www.ttrinity.jp

※Ｔシャツの宣伝ではありません。（画像をそのまま使うといろいろ面倒そうだったので。。。）

そこで「float」を解除する方法がこちらです。

clear: both; /*「float」を解除*/

解除したい要素（今回では日時の部分）で設定します。「folat」の基本だと思うのですが初めて使ったので、ここで少しハマりました。

まとめるとこうなります。

float: right; /*右に寄せる*/

CSSで右に寄せたい要素（画像）に使用します。

clear: both; /*「float」を解除*/

CSSで「float」を解除したい要素（文字）に使用します。（次の要素がない時は空白の<div class="解除用"></div>を作ればオッケーです）

この２つをセットで覚えておくと良いと思います。

ソースコード

作業フォルダ/
 ├ static/
 │  ├ images/
 │  │  ├ sample1.jpeg
 │  │  ├ sample2.jpeg
 │  │  ├ sample3.gif
 │  │  ├ sample4.jpg
 │  │  └ sample5.png
 │  ├ back_image.jpg
 │  └ index.css
 └ index.html

index.html

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="static/index.css">

<meta name="viewport" content="width=device-width,initial-scale=1">

<head>
    <script type="text/javascript">
    window.onload = function() {
        document.getElementById("time1").innerHTML = getNow();
        document.getElementById("time2").innerHTML = getNow();
        document.getElementById("time3").innerHTML = getNow();
        document.getElementById("time4").innerHTML = getNow();
        document.getElementById("time5").innerHTML = getNow();
    }

    function getNow() {
        var now = new Date();
        var year = now.getFullYear();
        var mon = now.getMonth()+1; //１を足すこと
        var day = now.getDate()+3;
        var hour = 9; //now.getHours();
        var min = 00; //now.getMinutes();
        var sec = 00; //now.getSeconds();

        var s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; 
        return s;
    }
    </script>
</head>

<body>
    <header>
        <h2>レイルーク＠ふたり暮らし</h2>

    </header>

    <div id="main">
        <div class="table">
            <img src="static/images/sample1.jpeg">
            <h3>サンプル１</h3>
            <h3>タイトル</h3>
            <p>本文</p>
            <div class="time" id="time1"></div>
        </div>
        <div class="table">
            <p><img src="static/images/sample2.jpeg"></p>
            <h3>サンプル２</h3>
            <h3>タイトル</h3>
            <p>本文</p>
            <div class="time" id="time2"></div>
        </div>
        <div class="table">
            <h3>サンプル３</h3>
            <img src="static/images/sample3.gif">
            <h3>タイトル</h3>
            <p>本文</p>
            <div class="time" id="time3"></div>
        </div>
        <div class="table">
            <h3>サンプル４</h3>
            <h3>タイトル</h3>
            <img src="static/images/sample4.jpg">
            <p>本文</p>
            <div class="time" id="time4"></div>
        </div>
        <div class="table">
            <img src="static/images/sample5.png">
            <h3>サンプル５</h3>
            <h3>タイトル</h3>
            <p>本文</p>
            <div class="time" id="time5"></div>
        </div>
    </div>

    <footer>
        <ul class="footer-menu">
            <li>ホーム ｜</li>
            <li>利用規約 ｜</li>
            <li>ヘルプ ｜</li>
            <li>お問い合わせ</li>
            <br>
            <li id="copy">(c)2020 ふたり暮らし</li>
        </ul>
    </footer>
</body>

index.css

header{
    width: 100%; /*幅*/
    height: 60px; /*高さ*/
    padding:0px 30px; /*範囲内の余白（上下、左右）*/

    position: fixed; /*絶対位置で固定*/
    top: 0px; /*上に配置*/
    left: 0px; /*左の隙間をなくす*/

    background-image: url("back_image.jpg");
    /*画像を背景に指定*/
}

#main{
    width: 100%; /*幅*/
    margin: auto; /*中央寄せ*/
    max-width: 800px; /*最大の幅*/
    padding:60px 0; /*範囲内の余白（上下、左右）*/
}

.table{
    border: outset 2px; /*外枠を作る（スタイル、太さ）*/
    padding:10px 20px; /*範囲内の余白（上下、左右）*/
    margin: 10px 15px; /*範囲外の余白（上下、左右）*/
}

img{
    float: right; /*右に寄せる*/
    width: 300px; /*画像サイズを固定*/
}

@media screen and (max-width: 600px) {
    img{
        width: 100%; /*スマホなどの時の画像サイズ*/
    }
}

.time{
    clear: both; /*「float」を解除*/
}

footer{
    width: 100%; /*幅*/
    height: 60px; /*高さ*/
    font-weight: bold; /*文字を太字にする*/
    text-align: center; /*中央に表示する*/

    position: fixed; /*絶対位置で固定*/
    bottom: 0px; /*下に配置*/
    left: 0px; /*左の隙間をなくす*/

    background-image: url("back_image.jpg");
    /*画像を背景に指定*/
}

ul.footer-menu li {
    display: inline; /*一行で表示する*/
}

#copy{
    position: absolute; /*絶対位置（rightのために必要）*/
    right: 30px; /*右に配置*/
}