2017
11.15
UXデザイン

ファイル選択ボタン(WEBページの部品)のデザインとコーディング

CSS, CSS3, HTML, HTML5, JavaScript

普段なかなかCSSを一から記述する機会に恵まれず、いざという時に慌てて調べ直すということが多い私。

今日は久しぶりに一からコーディングしました。

インプットタグのデザインは初めてやったので、備忘録を作っておきます。

input要素とは

ところどころで見かけるこのボタン。 基本的にはHTMLで使う。

ファイルをアップロードボタンをクリックするとローカルにあるファイルがアップロードできる機能。

(*見本なので使えません)

クライアントサイドスクリプトのJavaScriptと混同しそうですが、どの言語にも属しない「要素」。

ソースはこれだけ ↓

シンプルなボタンでも十分だけど、、ありきたりなデザインではつまらないユーザー様のために、デザインする方法を探りました。

結果。

labelタグを使ってデザインを指定し、inputタグには style=”none;” で非表示にする!

ソース

See the Pen yPooym by Yukyco (@yukyco) on CodePen.

・ inputは空要素であり、type属性を変えるだけで、全く違う部品になる
・ HTML5からバリデーション機能が加わった (*バリデーション:入力内容のチェックをする機能)

input要素の「type属性で作るフォーム部品」一覧

type=”search” : 検索キーワードの入力フィールド
type=”tel” : 電話番号
type=”url” : URL
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の位置を調整する方法

うまくいかなかった時の解決方法

terateilでプロに聞いてみよう!

terateilの回答率は90%です。
運が良ければ5分で回答がついて、1時間悩んでいた問題が10分で解決できます!

初心者なら初心者向けのマークをつけられるし、礼儀をわきまえた質問の仕方をすれば、たいてい助けてもらえます。

検証と分析

失敗を活かして、実績をあげるには、「検証・分析・実践」 をすることが重要。
最近、意識しています。

今回、CSSが効かなかった理由
1. ルールをすっかり忘れてしまっていた
2. 優先順位を理解出来ていなかった
3. 閉じタグを書いていなかった

【PR】


そして、テーブルタグの書き方についても、初心に戻って勉強💧

★参考にさせて頂いたサイト★
テーブルタグの書き方
http://www.tagindex.com/stylesheet/table/border_collapse.html

色々あるテーブルのサイズ指定方法
http://www.koikikukan.com/archives/2012/08/20-005555.php

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。