先日、INPUTタグのデザインの受注がありました。
CSSを一から記述する機会に恵まれたので、今日は久しぶりに
一からコーディングしましたので、まとめて覚えていきます。
[toc]
input要素はボタンになる
動画のアップロードを受け付けるサイト制作の依頼がありまして、
ファイルをアップロードする際によく見かけるボタンのデザインに
こだわりたいという要望でした！！
WordPressでもプラグインをインストールする際に使うやつです。↓↓
注）クリックするとファイル選択の画面になります
このファイルを選択ボタンをクリックすると、
ローカルパソコンにあるファイルがサーバーへアップロードできる機能があります。
エンドユーザーからすると、危険なファイルなどもアップロードすることが可能だったりするので、
レベルの高いボタン（？）にも見えます。
調べてみたところ、どの言語にも属しない「要素」。
クライアントサイドスクリプトのJavaScriptと勘違いしそうです・・・。
ソースはたったこれだけ ↓
See the Pen element by Yukyco (@yukyco) on CodePen.
なんともシンプルです！
ボタンのデザイン方法
このシンプルな要素をカッコよくオシャレにするには？
ポイントは、以下の２点。
- labelタグを使ってデザインを指定
- inputタグには style=”none;” で非表示にする
ソース
See the Pen yPooym by Yukyco (@yukyco) on CodePen.
便利なINPUT要素
INPUT要素には、他にもよく使われる属性がありますので、いい機会なので、まとめて頭に入れておいて、すぐに使える様になっておきたいものです。
INPUT「要素」の特徴
・ inputは空要素であり、type属性を変えるだけで、全く違う部品になる
・ HTML5からバリデーション機能が加わった
(＊バリデーション：入力内容のチェックをする機能）
input要素の「type属性で作るフォーム部品」一覧
| type=”search” | 検索キーワードの入力フィールド |
| type=”tel” | 電話番号 |
| type=”url” | URL（URI） |
| type=”email” | メール |
| type=”password” | パスワード |
| type=”datetime” | 日時（タイムゾーン有） |
| type=”datetime-local” | 日時（タイムゾーン無） |
| type=”date” | 日 |
| type=”month” | 月 |
| type=”week” | 週 |
| type=”time” | 時刻（タイムゾーン無） |
| type=”number” | 数値 |
| type=”range” | スライダーで数値（割合）の選択 |
| type=”color” | 色の選択 |
| type=”checkbox” | 複数選択のボタン |
| type=”radio” | 1つだけ選択のボタン |
| type=”file” | 送信ファイルの選択(ファイル送信) |
| type=”hidden” | 非表示データの送信 |
| type=”submit” | 提出ボタン |
| type=”reset” | リセットボタン |
| type=”button” | 汎用のプッシュボタン |
| type=”image” | 画像を送信ボタンにする |
引用元 : http://honttoni.blog74.fc2.com/blog-entry-138.html
ユーザーのための入力補佐機能もデザイン
HTML5になって増えた要素が沢山あり、input要素に欠かせないplaceholder
今回初めて位置の指定があり、 ::placeholder という記述方法を知りました。
参考にさせていただいたページ：placeholderの位置を調整する方法
まとめ
INPUTタグはただの要素である。
ボタンにデザインを施す際は、labelタグを使う。
HTML４→５になってから、ユーザビリティを考えた使いやすい要素が増えた。
CSSが効かない時の対処
今回、CSSが効かなくて苦労しました。
その理由は
1. ルールをすっかり忘れてしまっていた
2. 優先順位を理解出来ていなかった
3. 閉じタグを書いていなかった
失敗を活かして、実績をあげるには、「検証・分析・実践」をすることが重要。
terateil
terateilでプロに聞いてみよう！
terateilの回答率は90%です。
運が良ければ５分で回答がついて、１時間悩んでいた問題が１０分で解決できます！
初心者なら初心者向けのマークをつけられるし、礼儀をわきまえた質問の仕方をすれば
たいてい助けてもらえます。
Get Helpパーソナルトレーニングを受けてみる
プロに負けないwebデザイナーになる方法 登録はこちら
