HTML 入力画面を作成（CSSでファイル選択した画像を表示する方法）

はじめに

今回は記事の入力画面を作成します。写真や画像をファイルから選択して張り付けます。ファイル選択の部分はJavascriptを使います。

f:id:Start_python:20200206112359p:plain

動作環境

Windows10
メモ帳
Google Chrome

作業フォルダ/
 ├ static/
 │   ├ back_image.jpg
 │   ├ edit.css
 │   └ edit.js
 └ edit.html

ソースコード

edit.hrml

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="static/edit.css">
<script src="static/edit.js"></script>

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

<head>
    <title>入力画面</title>
</head>

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

    <div id="main">
        <label>タイトル</label>
        <input id="text1" type="text">
        <br><br>
        <div id=image_box>
            <label class="btn1" for="file-sample">ファイルを選択</label>
            <input id="file-sample" type="file">
            <img id="file-preview">
        </div>
        <label>コメント</label>
        <textarea rows="12" cols="100"></textarea>
        <div class="time"></div>
        <input class="btn1" type="submit" value="  登  録  ">
    </div>

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

「ファイル選択ボタンと画像」の２つの要素をスマホ用では「コメント」の上に表示したかったので、<div>~</div>で１つのブロック要素にしました。（PCの時は、CSSで「float: right;」を使って右に寄せています）
※ここでハマりました。「２つの要素を１つのブロック要素にして右寄せする」方法を見つけたのはファインプレーでした。

<label class="btn1" for="file-sample">ファイルを選択</label>

「ファイル選択ボタン」用にラベルを作っています。<input type="file">ではボタンの見た目を変えられません。「ラベルをクリックすると指定した要素をクリックしたことになる」を利用して、ボタン自体を非表示してラベルにボタンのような装飾をすることで解決しました。（「登録ボタン」も「btn1クラス」にして同じ装飾にしました。）

edit.css

header{
    position: fixed; /*絶対位置で固定*/
    top: 0px; /*上に配置*/
    left: 0px; /*左の隙間をなくす*/
    padding:0px 30px; /*範囲内の余白（上下、左右）*/
    width: 100%; /*幅*/
    height: 60px; /*高さ*/
    background-image: url("back_image.jpg");
    /*画像を背景に指定*/
}

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

label{
    font-size: 24px; /*文字のサイズ*/
}

#text1{
    padding: 8px; /*範囲内の余白*/
    width: 100%; /*幅*/
    font-size: 18px; /*文字の大きさ*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

textarea{
    padding: 10px; /*範囲内の余白*/
    width: calc(100% - 300px); /*幅*/
    font-size: 17px; /*文字の大きさ*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
    resize: vertical;
}

#image_box{
    float: right; /*右に寄せる*/
    width: 300px;
}

#file-sample {
     display:none; 
}

.btn1{
    display: block;
    padding: 5px 30px; /*余白*/
    color:#fff; /*文字の色*/
    font-size: 16px; /*文字のサイズ*/
    text-align: center; /*文字の位置*/
    background:#1B73BA; /*背景色*/
    border-radius: 10px; /*角の半径*/
    cursor: pointer; /*カーソル（指のかたち）*/
}

.btn1:hover{
    opacity: 0.8; /*透明度*/
}

img{
    margin: 2px 0;
    width: 100%;
}

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

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

footer{
    position: fixed; /*絶対位置で固定*/
    bottom: 0px; /*下に配置*/
    left: 0px; /*左の隙間をなくす*/
    width: 100%; /*幅*/
    height: 60px; /*高さ*/
    font-weight: bold; /*文字を太字にする*/
    text-align: center; /*中央に表示する*/
    background-image: url("back_image.jpg");
    /*画像を背景に指定*/
}

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

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

ポイントは、HTMLのところでも触れた「ボタンと画像」の２つの要素を右寄せする部分です。レイアウトの基本である親要素と子要素の関係が理解できました。

CSSだけではどう考えても解決できないこともあるので、行き詰った時はHTMLとセットで考えたほうがよさそうです。

CSSで指定するスタイルが増えてくると順番がバラバラだと見返した時に編集しにくかったので、記述順を決めました。詳しくは、
【保存版】CSS 逆引き辞典（初心者用随時更新予定） - 基本の書き方に載せました。

edit.js

window.onload = function () {
    document.getElementById('file-sample').addEventListener('change', function (e) {
        var file = e.target.files[0];
        var blobUrl = window.URL.createObjectURL(file);
        var img = document.getElementById('file-preview');
        img.src = blobUrl;
    });
}

ファイルを選択する部分です。

今回もまだ「Javascript」については勉強不足なので詳しい解説はできません。アップロードしてWebサイトで利用する時は、おそらくこのままでは利用できないと思うのでその時に勉強します。（たぶんPython側で作成するこになると思います）