質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

10818閲覧

ログイン画面テキストエリア<input type="text"  ・・・/>の中に、アイコンを表示させたい

nekomura

総合スコア132

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/14 07:53

編集2016/10/14 08:24

よろしくお願いいたします。

現在、レスポンシブ対応のweb画面を製作中です。
現在は某サイトのUIを参考に、ログイン部分を作っています。
参考サイト
テキストエリアの部分に、下記画像のように左端部分にアイコンをつけたいと思っています。
イメージ説明
参考サイトを検証ツール(Chromeデベロッパーツール)で調べたり、ソースを見たりしているのですが、
参考サイト通りのアイコンの付け方がわかりません。
ちなみにテストアイコンとして、Awesomeアイコンを使っています。

私が作ったUIは下記です。
イメージ説明

テキストエリア部分のコードは以下なのですが、どのようなHTMLを記述すればよいのか、
またどのようなCSSを指定すれば参考サイトのようなUIを実現できるのかがわかりません。

<input type="text" id="user_id" autocapitalize="off" class="text-input" name="user_id" value="" size="24" maxlenght="20" placeholder="メールアドレス" data-prompt-position="topRight: 10;" />

実現方法に特に指定はありません。
有職者の皆様、どうぞご教示のほどよろしくお願いいたします。
ボールドテキスト
サンプルコード等いただけると尚幸いです。

以下、全体のHTMLです。

<div id="login"> <div class="login-wrapper"> <form id="loginFrm" action="/authenticate_check" method="post" autocomplete="off"> <div id="inputbox"> <div class="inputbox-wrapper"> <h1><a href="index.html">Inventoies</a></h1> <div id="usrId"> <!-- 質問部分該当箇所 --><input type="text" id="user_id" autocapitalize="off" class="text-input" name="user_id" value="" size="24" maxlenght="20" placeholder="メールアドレス" data-prompt-position="topRight: 10;" /> </div> <br> <div id="usrPass"> <!-- 質問部分該当箇所 --><input type="password" id="password" class="text-input" name="password" value="" size="24" placeholder="パスワード" data-prompt-position="topRight: 10;" /> </div> <br> <div id="login_btn"><input type="submit" value="ログイン" style="font-size: 22px;"/></div> <br> <p id="reset_password"><a href="">パスワードをお忘れの方はこちら</a></p> <p id="new_user"><a href="">新規アカウント作成</a></p><br /> </div> </div> </form> </div> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/14 07:58

webブラウザ付属の開発ツールなどで、参考にしているサイトで任意の要素に係るスタイルシートを調べれば、すぐわかりそうですけどね。
kaz.Suenaga

2016/10/14 08:11

参考にしているソースで、input タグに隣接しているタグにアイコン設定されていませんか。
nekomura

2016/10/14 08:23

suenaga様 いつもお世話になっております。そうですよね、そう思いアドバイスに従って隣接タグは見てみたのですが…。参考サイトを追記いたしました。
guest

回答4

0

ベストアンサー

追記いただいた参考サイトを見ると、

HTML

1<div id="usrId"><input ・・・></div>

という構成になっていますね。
CSS(main.css)を見ると #usrId input に対して、padding-left で左側に余白を作る指定と、背景画像の指定があります。

テキストボックスに背景画像を指定し、実際に文字をかける領域を padding-left でアイコンのサイズ分ずらしたところからにしている、という感じですね。

投稿2016/10/14 08:43

kaz.Suenaga

総合スコア2037

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekomura

2016/12/06 10:53

ありがとうございます。 ご教示を頂いているにもかかわらず、事情によりお礼&お返事がおそくなりました。 大変申し訳ありませんでした。
guest

0

参考サイトをチェックしてみました。
input要素へのスタイルシートとして、background: #fff url("../img/login.png") no-repeat scroll 0 0 なんて書いてあるので、単純に背景画像ですね。
ログイン画面で使う画像3つを連結してある画像で、no-repeatscroll 0 0で見せたい部分のみ見せています。
背景画像が入力文字列とかぶらないように、padding-leftなどで調整してあるようです。

投稿2016/10/14 08:28

編集2016/10/14 08:30
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekomura

2016/12/06 10:52

ありがとうございます。 ご教示を頂いているにもかかわらず、事情によりお礼&お返事がおそくなりました。 大変申し訳ありませんでした。
guest

0

ざっくりと。
テキストボックスにアイコンが入るくらいのpaddingを空けておき、:before<span style="position: absolute;"></span>などでアイコンをテキストボックスに重ねるのがよくやるやり方だと思います。

投稿2016/10/14 08:11

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekomura

2016/12/06 10:52

ありがとうございます。 ご教示を頂いているにもかかわらず、事情によりお礼&お返事がおそくなりました。 大変申し訳ありませんでした。
guest

0

左端のアイコンのつけかた

アイコンのようなフォントを表示するときにはこのサービスを利用するといいと思います。
結構有名(?)で、使いやすいので詳しい使い方は調べてみてください。
参考サイトと色々違うかもしれませんが、このサービスを使ってこのように書けば左端部分にアイコンをつけられます。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <link href="stylesheet.css" rel="stylesheet"> 7</head> 8<body> 9<div class="login"> 10 <form name="loginFrm" class="loginFrm"> 11 <span class="fontawesome-user"></span> 12 <input type="text" placeholder="ユーザー名"> 13 <span class="fontawesome-lock"></span> 14 <input type="password" placeholder="パスワード"> 15 <input type="submit" value="ログイン"> 16 </form> 17</div> 18</body> 19</html>

CSS

1@charset "utf-8"; 2@import url(http://weloveiconfonts.com/api/?family=fontawesome); 3 4[class*=fontawesome-]:before { 5 font-family: 'FontAwesome', sans-serif; 6} 7 8body { 9 color: white; 10 margin: 0; 11} 12 13input { 14 border: none; 15} 16 17.login { 18 width: 350px; 19} 20 21.login .loginFrm span { 22 background-color: #000; 23 float: left; 24 line-height: 50px; 25 text-align: center; 26 width: 50px; 27 height: 50px; 28} 29 30.login .loginFrm input[type="text"] { 31 padding: 0 16px; 32 width: 235px; 33 height: 50px; 34} 35 36.login .loginFrm input[type="password"] { 37 padding: 0 16px; 38 width: 235px; 39 height: 50px; 40} 41 42.login .loginFrm input[type="submit"] { 43 background: #000; 44 width: 100%; 45 height: 50px; 46 color: white; 47 cursor: pointer; 48}

以上、ありがとうございました。

投稿2016/11/23 18:25

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問