デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

今日から使えるHTML5/CSS3/JSのシンプルテクニック15選

 
2015年2月21日に開講された、株式会社LIG フロントエンドエンジニア 堀口 誠人先生による授業の中で、お届けできなかった14番目のテクニックをご紹介いたします。


■先生より

授業中にご紹介できなくて本当にすみませんでした。
いかに授業を面白くしようか、どんなボケを入れようか、などと試行錯誤していたら肝心のソースコードが機能しないという本末転倒な自体になってしまったようです。猛省しております。

この場を借りて改めて解説させていただきます。。。!

■使用するツールのURL

http://codepen.io/seito2014/pen/VYxZKw

■対応ブラウザ

IE9~
safari(最新)
chrome(最新)
firefox(最新)
Android 4.1~
iOS 7.1~



内容はCSSとJavascriptを使って「input[type=“file”]要素をデザインできるようにする」というものです。

input[type=“file”]はかなり扱いづらい要素でして、複数のブラウザ対応を考慮すると、CSSで装飾することは残念ながらできません!
そこで、ここではJSの力も借りて、ちょっと強引な手で装飾するワザをご紹介します。
よりイメージできるよう、サンプルコード(http://codepen.io/seito2014/pen/VYxZKw)もぜひご覧ください。

 

【HTML】

input[type=“file”]を装飾するには複数のHTMLタグを用意する必要があるのですが、まずそれら全体を囲う要素< div class="file" >~< /div >を記述します。

 

次に、この中に以下の3つのタグを記述します。

1. < div class="file-button" >ファイルを選択< /div >
2. < div class="file-text" >選択してください< /div >
3. < input type="file" class="file-input" value="" >

最後にjqueryを読み込ませてHTMLの記述は完了です。バージョンの指定はありませんが、特に理由がなければなるべく新しいものを利用しましょう。
< script src="//code.jquery.com/jquery-1.11.2.js" >< /script >


【CSS】

まずは全体を覆っている< div class="file" >~< /div >にスタイルをあてます。

.file{
    position:relative;
    width:500px;
    height:30px;
    overflow:hidden;
}

次に最も大事な< input type="file" class="file-input" value="" >にスタイルをあてます。

.file-input {
    position:absolute;
    top:0;
    right:0;
    z-index:10;
    width:100%;
    height:100%;
    font-size:315px;
    opacity:0;
    cursor:pointer;
}

position,opacityを設定しているのがポイントです。
position:absolute,z-index:10を与えることで、.file-inputが他の要素の一番上に重なるようになります。
加えてopacity:0で透過させることで、ユーザーからは見えないようにしておきます。

また、width,heightを指定していますが、これだけだと古いバージョンのIEでサイズが認識されないため、font-sizeを設定して無理やり幅がinput要素のサイズを大きくしています。

そして次が最後のCSSです。

.file-text {
    float:left;
    width: 358px;
    height:28px;
    line-height:28px;
    border: 1px solid #000;
    padding: 0 10px;
}
.file-button {
    float:left;
    width: 120px;
    height:30px;
    line-height: 30px;
    background-color: #000;
    color: #FFF;
    text-align: center;
    font-size: 12px;
}

これらは単なるdiv要素ですが、スタイルをあてることであたかもデザインされたinput[type=“file”]に見えます。
さらに、これらの要素の上には透過された.file-input(本物のinput[type=“file”])が存在しているので、ユーザーがクリックした際は.file-inputがクリックされたことになり、ファイルをアップロードするための小ウィンドウが開きます。

ここまでくればあと一歩です!

 

【JS】

ここまでの内容だと、装飾もされているしクリックも出来ますが、ファイルを選択しても値が変わっていないように見えます。
そこで最後にjQueryを使って簡単な記述をします。

$('.file').on('change',function(){
    
  var $this = $(this),
      $fileText = $this.find('.file-text');
  var fileValue = $this.find('.file-input').val();

  //実体が変更されたら、テキストフィールドに値をいれる
  if(fileValue === '') {
    $fileText.html('選択してください');
  } else {
      $fileText.html(fileValue);
  }
     
});

.fileがクリックされ、アップロードするファイルが選択されると、そのタイミングで'change'イベントが発火します。

このとき、もしユーザーがファイルを何も選択せず、キャンセルボタンを押した場合はif(fileValue === ''){...}の判定となり、.file-text内にデフォルトの値(”選択してください”)が入ります。

ユーザーが通常通り何かしらのファイルを選択していれば、else{...}の判定となり、.file-inputのvalue値、すなわちユーザーがアップロードしたファイルのパス、ファイル名が入力されます。

ここまでで動くようになったはずです!
ぜひぜひ、お試しくださいませ。

※上記のコード内、都合上「<」の後と「>」の前に半角スペースが入っておりますが、実際は半角スペースなしで記述してください

※質問がある場合は、次回授業時にお待ちしております



■堀口先生の授業紹介


レスポンシブ基礎 〜Webサイトをレスポンシブにする方法とそのメリット〜

 


HTML5/CSS実践 明日から使えるテクニック(全3回)

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧