【html-css-javascript】PureCSSで無骨なページをそれっぽくする│株式会社シーポイントラボ

前回は、PureCSSで色々いじくり倒していましたが、今回はちゃんとしたアプリっぽい見た目で作ってみました。

今回は、imgタグとinput fileを使った画像を表示するページを作りました。備忘録ぽいですがご容赦ください。

input fileといえばボタンを押すと画像ギャラリーに飛ぶあのコンテンツです。

メジャーなので知らない人はいないと思いますが、そのままこいつを使うとどうも雰囲気が堅いというかなにも

手を付けていないようで野暮ったいです。

せっかくなので前回でも使ったこのPureCSSで今風のボタンにかえてあげましょう。

html↓

    <div class="thumb-wrapper">
      <img id='myImage'>
    </div>
    <div class="button-wrapper">
      <span class="label">
        画像アップロード
      </span>
        <input type="file" name="upload" id='upload' class="upload-box" placeholder="Upload File">
    </div>

CSS↓


/*画像が表示されるコンテンツの位置調整*/
    .thumb-wrapper {
      position: relative;
      height: 50px;
      text-align: center;
      margin: 20% auto;
    }
/*ボタンの幅と位置の調整*/
    .button-wrapper {
      position: relative;
      width: 150px;
      text-align: center;
      margin: 20% auto;
    }
/*ラベルの設定*/
    .button-wrapper span.label {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      background: #00bfff;
      cursor: pointer;
      color: #fff;
      padding: 10px 0;
      text-transform:uppercase;
      font-size:12px;
    }
/*実際に働くボタン*/
    #upload {
        display: inline-block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

JavaScript。↓

    <script>
      const target = document.getElementById('upload');
      const img = document.getElementById('myImage');
      target.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          img.height = 200;
          img.src = e.target.result;
          console.log(img);
        }
        reader.readAsDataURL(file);
      }, false);
    </script>

script側は従来の画像を表示させる機能だけなので割愛させていただきます。

今回使うオブジェクトは4つ。一つ目は画像が表示された時の場所を調整するCSSです。画面中央にくるように

してありますが、このコンテンツは特にPureCSSの恩恵を受けていないのでそこまで語るまでもないです。

二つ目のCSSははボタンの幅を調整しています。これもアップロードするボタンの位置を決めているだけで

こちらも特にPureCSSの影響は受けません。

三つ目のCSSですが、ここでボタンの基本的な部分を生成しています。

button-wrapper span.labelを指していますが、これはbutton-wrapperタグの中のspan.labelを操作しますよという意味合いに

なります。divの中にspanで定義されているので、それが操作の対象になります。

ここでbackgroundやwidthで調整するとこんな感じに仕上がります。