10/9(Wed)
授業中にご紹介できなくて本当にすみませんでした。
いかに授業を面白くしようか、どんなボケを入れようか、などと試行錯誤していたら肝心のソースコードが機能しないという本末転倒な自体になってしまったようです。猛省しております。
この場を借りて改めて解説させていただきます。。。！
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サイトをレスポンシブにする方法とそのメリット〜
