ファイルアップロード要素を画像化する | input type="file"
labelとfor属性を併用することにより、ファイルアップロード要素(input type="file")のデザインを変更できる。ただし、ドラッグ＆ドロップが効かなくなる弱点がある。
とはいえドラッグ＆ドロップを任意の要素に組み込む方法はある。 （参考：任意の要素でファイルアップロードができるようにする）
サンプル
ソースコード
<style>
#sec3-1_a{
display:block;
wdith:80px;
height:40px;
background: url(img/btn_back.png) left top no-repeat;
}
</style>
<label id="sec3-1_a" for="sec3-1_fu">
<input type="file" id="sec3-1_fu" style="display:none"/>
</label>
子要素のmargin-topが親要素に適用されてしまう
検証1：子要素のmargin-topが親要素に適用されてしまうケース。子要素
<div style="width:80px;height:80px;background-color:red;">
<div style="margin-top:20px;background-color:green">検証1</div>
</div>
検証2：対策として親要素に「padding-top:1px」を指定する。
子要素
<div style="padding-top:1px;width:80px;height:80px;background-color:red;">
<div style="margin-top:20px;background-color:green">子要素</div>
</div>
※ padding-top以外にもpadding,borderで対策できる。子要素の前に任意文字を入力する方法もある。
内容（子要素）のサイズに合わせて自動フィットさせる
指定なし
親要素のサイズは、子要素のサイズに合わせず横いっぱいに広がってしまう。<div style="border:solid 5px #de5549"> <div style="background-color:#97f0c6;width:50px;height:50px"></div> </div>
display:inline-block;
親要素のサイズを子要素のサイズに合わせるには以下のCSSスタイルを親要素に適用する
display:inline-block;
width:auto;
height:auto;
サンプル
<div style="display:inline-block;width:auto;height:auto;border:solid 5px #de5549"> <div style="background-color:#97f0c6;width:50px;height:50px"></div> </div>
親要素に画像サイズを合わせる
<style>
.img1{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
</style>
<h2>検証</h2>
<div style="width:200px;height:200px;">
<img src="imori.jpg" class="img1" />
</div>
キャンバスや画像下の余白を消す | vertical-align: bottom
img要素や、canvas要素の下にわずかな余白が生じることがある。
img要素に「vertical-align:bottom」または「display:block」を指定することにより解決できる。
<div> <img src="img/note3/imori_md.png" style="vertical-align:bottom;" /> </div>
<div> <img src="img/note3/imori_md.png" style="display:block;" /> </div>
ファイルアップロード要素(type='file')のデザイン化する
HTML
<label for="test_fu" class="file" style="background-color:#e3dfee;border-radius:5px">
<img src="img/note3/log_fu.png" />
<input type="file" id="test_fu" style="display:none"/>
</label>
デザイン化したファイルアップロード要素のサンプル
文字の縁取り
見本
大きな猫と小さな犬
HTML/CSS
<div style="padding: 0px 20px; color: rgb(255, 255, 255); font-size: 40px; font-weight: bold; text-shadow: rgb(166, 152, 201) 2px 2px 1px, rgb(166, 152, 201) -2px 2px 1px, rgb(166, 152, 201) 2px -2px 1px, rgb(166, 152, 201) -2px -2px 1px;">
大きな猫と小さな犬
</div>
背景画像を区分のサイズに合わせてフィットさせる
<style>
#sample3-8{
color:white;
width:80%;
height:200px;
margin-left:auto;margin-right:auto;
padding:20px;
background-image: url(img/note3/imori_md.png);
background-size:100% 100%;
}
</style>
<div id="sample3-8">
いろはにほへとちりぬるをわかよたれそつねならむ<br>
うゐのおくやまけふこえてあさきゆめみしゑひもせすん
</div>
サンプル
いろはにほへとちりぬるをわかよたれそつねならむ
うゐのおくやまけふこえてあさきゆめみしゑひもせすん
うゐのおくやまけふこえてあさきゆめみしゑひもせすん
外枠に画像をフィットさせる
<style>
#sec3-8-2a1 img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
</style>
<div id="sec3-8-2a1" style="width:100px;padding:10px;background-color:#f0b4ae">
<img src="img/note3/imori_md.png" />
</div>
インデックス（番号）を指定してスタイルを適用する
先頭から数えるnth-childと、 末尾から数えるnth-last-childの2種類が存在する。- トウホクサンショウウオ
- イボイモリ
- アカハライモリ
- シリケンイモリ
- エゾサンショウウオ
CSSコード
<style>
/* 先頭から2番目に適用 */
#imori3-9 li:nth-child(2){
color:green;
}
/* 末尾から2番目に適用 */
#imori3-9 li:nth-last-child(2){
color:Crimson;
}
</style>
<ol id="imori3-9">
<li>トウホクサンショウウオ</li>
<li>イボイモリ</li>
<li>アカハライモリ</li>
<li>シリケンイモリ</li>
<li>エゾサンショウウオ</li>
</ol>
先頭または末尾の要素にスタイルを適用する
- チョウセンヤマアカガエル
- ツシマアカガエル
- トノサマガエル
- リュウキュウアカガエル
CSSコード
<style>
/* 先頭要素に適用する */
#akagaeru3-10 li:first-child{
color:red;
}
/* 末尾要素に適用する */
#akagaeru3-10 li:last-child{
color:blue;
}
</style>
<ol id="akagaeru3-10">
<li>チョウセンヤマアカガエル</li>
<li>ツシマアカガエル</li>
<li>トノサマガエル</li>
<li>リュウキュウアカガエル</li>
</ol>