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

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

ただいまの
回答率

89.10%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 6,457

nekomura

score 132

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

現在、レスポンシブ対応の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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m6u

    2016/10/14 16:58

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

    キャンセル

  • kaz.Suenaga

    2016/10/14 17:11

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

    キャンセル

  • nekomura

    2016/10/14 17:23

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

    キャンセル

回答 4

checkベストアンサー

+3

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

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


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/06 19:53

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

    キャンセル

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/06 19:52

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

    キャンセル

+3

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/06 19:52

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

    キャンセル

  • この投稿は削除されました

+2

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="login">
    <form name="loginFrm" class="loginFrm">
        <span class="fontawesome-user"></span>
        <input type="text" placeholder="ユーザー名">
        <span class="fontawesome-lock"></span>
        <input type="password" placeholder="パスワード">
        <input type="submit" value="ログイン">
    </form>
</div>
</body>
</html>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*=fontawesome-]:before {
    font-family: 'FontAwesome', sans-serif;
}

body {
    color: white;
    margin: 0;
}

input {
    border: none;
}

.login {
    width: 350px;
}

.login .loginFrm span {
    background-color: #000;
    float: left;
    line-height: 50px;
    text-align: center;
    width: 50px;
    height: 50px;
}

.login .loginFrm input[type="text"] {
    padding: 0 16px;
    width: 235px;
    height: 50px;
}

.login .loginFrm input[type="password"] {
    padding: 0 16px;
    width: 235px;
    height: 50px;
}

.login .loginFrm input[type="submit"] {
    background: #000;
    width: 100%;
    height: 50px;
    color: white;
    cursor: pointer;
}


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • CSSに関する質問
  • ログイン画面テキストエリア<input type="text"  ・・・/>の中に、アイコンを表示させたい