【web開発 CSS】Inputのtextデザイン

はじめに

最近のwebサービスの開発では正しく機能しているかを重視してきたが、そろそろCSSの基本的なデザインは理解しとくべきだし、必ず役に立つ（と信じている）ため、今回はInputのtype="text"についてGoogleなどの大手サイトを参考にしながら作成してみた。また、基本的なアニメーションの勉強も兼ねた。今回はCSSデザインの勉強ということで、下に紹介する検索textボックスなどの検索ボタンや削除ボタンなどは機能は持たせていない。

1. 少し見栄えの良いtextボックス

ここでは3つの簡単なデザインを紹介。

1.1 枠線のみ変更

#text1{
    width: 100%; /*親要素いっぱい広げる*/
    padding: 10px 15px; /*ボックスを大きくする*/
    font-size: 16px;
    border-radius: 3px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

上のCSSではデフォルトの枠線をpaddingによって広げ色を変えただけのシンプルなもの。これだけでもデフォルトのtextボックスより見栄えは良い。上のgif画像で見られるようにfocus時にはデフォルトの青い枠線が表示される。これをもうちょっと変えてみたのが下の二つ。

box-sizing: border-box;

これを設定することで要素がpaddingとborderも含めてwidthと考えるようになる(デフォルトではwidthは要素本体のみ)ため親要素をはみ出ない。

1.2 focus時の枠線の色変更(border)

#text1:focus {
    border: 2px solid #ff9900; 
    z-index: 10;
    outline: 0;

こちらはborderのデフォルトの色を変えただけ。

1.3 focus時の枠線の色変更(shadow)

#text1:focus {
    box-shadow: 0 0 5px 0 rgba(255,153,0,1);
    border: 2px solid #FFF !important;
    outline: 0;
}

こちらはshadowだけで色を表現。borderは背景と同じ白に設定しているため非表示になっている。

2. 検索テキストボックス

こちらはGoogleの設定画面に設置されているものを参考に作成。

<div class="group">
   <label for="text2">text2</label>
   <div class="search_bar">
      <i class="fas fa-search search_icon"></i>
      <input id="text2" type="text" placeholder="キーワードを入力">
      <i class="fas fa-times search_icon"></i>
   </div>
</div>

.search_bar{
    display: flex; /*アイコン、テキストボックスを調整する*/
    align-items: center; /*アイコン、テキストボックスを縦方向の中心に*/
    justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/
    height: 50px;
    width: 100%;
    background-color: #ddd;
}

.search_icon{ /*アイコンに一定のスペースを設ける*/
    height: 15px;
    width: 15px;
    padding: 5px 5px;
}

#text2{
    font-size: 16px;
    width: 100%; /*flexの中で100%広げる*/
    background-color: #ddd;
    border: none; /*枠線非表示*/
    outline: none; /*フォーカス時の枠線非表示*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

flex

ここでのポイントは、虫眼鏡と×のアイコンとtextボックスを横並びにする際にinline-blockではなくflexを使っていること。flexを使うことで#text2のwidth: 100%;としても.search_bar要素をはみ出すことなく自動で調整してくれる。また縦のラインを合わせる際にinline-blockよりもflexのほうが簡単。

3. ちょっとしたアニメーションを付けたtextボックス

こちらはYoutubeのコメント投稿欄を参考に作成。擬似要素を使用した二つのデザインを紹介

3.1 中央からのアニメーション

<div class="group">
   <label for="text3" id="l_text3">text3</label>
   <input id="text3" type="text" placeholder="コメントを入力する">
   <div class="text_underline"></div>
</div>

#text3{
    font-size: 16px;
    width: 100%;
    border: none;
    outline: none;
    padding-bottom: 8px;
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

.text_underline{
    position: relative; /*.text_underline::beforeの親要素*/
    border-top: 1px solid #c2c2c2; /*text3の下線*/
}

/*共通のstyle*/
.text_underline::before,
.text_underline::after{
    position: absolute; 
    bottom: 0px; /*中央配置*/
    width: 0px; /*アニメーションで0pxから50%に*/
    height: 1px; /*高さ*/
    content: '';
    background-color: #3be5ae; /*アニメーションの色*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

/*中央から右へのアニメーション*/
.text_underline::before{
    left: 50%; /*中央配置*/
}

/*中央から左へのアニメーション*/
.text_underline::after{ 
    right: 50%; /*中央配置*/
}

#text3:focus + .text_underline::before,
#text3:focus + .text_underline::after{
    width: 50%;
}

擬似要素

今回::beforeや::afterというような擬似要素を使用することで無駄に要素を追加しないでアニメーションを適応してみた。上の例では::beforeと::afterをtextボックスの下線の中央に配置することで左右に伸びるアニメーションを実現した。

セレクタ

今回使用したセレクタは隣接セレクタ(+)。これは該当要素に隣接する兄弟関係の要素でありかつ該当要素直下しか適応されない。これが理由で#text3の直前に存在するlabelにはアニメーションをCSSで加えることはできない(もしあばご教授願います)。よって今回は一番簡単だと考えられるjQueryでの実装にした。

$('#text3').focus(function(){
    $('#l_text3').animate({'color': '#3be5ae'}, 500);
}).blur(function(){
    $('#l_text3').animate({'color': 'black'}, 500);
});

こちらのanimateメソッドでは色指定にHTMLカラーコード(#から始まる色を表す英数字文字列)、色の名前およびRGB値のどれでも記述可能。またjQueryにはデフォルトではanimateメソッドで色を変える機能は付いていないぽいので以下のスクリプトが必要。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>

アニメーション

transition: 対象 ミリ秒;でアニメーションを与えることができる。非常にシンプル。

左右からのアニメーション

/*左から右へのアニメーション*/
.text_underline::before{
    position: absolute; 
    left: 0px; /*左配置 ここright: 0px;にすると右から左のアニメーション*/
    bottom: 0px; /*左配置*/
    width: 0px; /*アニメーションで0pxから100%に*/
    height: 1px; /*高さ*/
    content: '';
    background-color: #3be5ae; /*アニメーションの色*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

#text3:focus + .text_underline::before{
    width: 100%;
}

3.1のものとほとんど同じなので説明は簡単に。こちらでは左から右にアニメーションするだけなので伸びる方向が1つ。よって擬似要素も::beforeの1つで実現。ただ::beforeを左端に配置して右に伸ばしてるだけ。

4. かっこいいアニメーションtextボックス

こちらもGoogleのログイン画面に設置されているものを参考に作成。

<div class="group">
   <label for="text4">text4</label>
   <div class="password_box">
      <div class="password_inner">
         <input id="text4" type="password">
         <div class="password_string">パスワードを入力</div>
      </div>
      <i class="fas fa-eye-slash"></i>
   </div>
</div>

.password_box{
    display: flex; /*アイコン、テキストボックスを調整する*/
    align-items: center; /*アイコン、テキストボックスを縦方向の中心に*/
    justify-content: center; /*アイコン、テキストボックスを横方向の中心に*/
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid lightgray;
}

.password_inner{
    width: 100%;
    height: 100%;
    background-color: transparent; /*.password_boxの枠線お角一部被るため透明に*/
    position: relative;
}

#text4{
    position: absolute;
    z-index: 1; /*.password_stringよりも上に配置*/
    height: 100%;
    width: 100%;
    top: 0; left: 0; bottom: 0; right: 0;
    border: none; /*枠線非表示*/
    outline: none; /*フォーカス時の枠線非表示*/
    padding: 0 10px;
    font-size: 16px;
    background-color: transparent; /*後ろの.password_stringを見せるため*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

.password_string{
    position: absolute;
    height: 100%;
    width: 140px; /*文字列分の長さ*/
    top: 0; left: 0; bottom: 0; right: 0;
    padding-left: 10px; /*position: absolute;でのmarginは親要素はみ出す*/
    font-size: 16px;
    line-height: 50px; /*文字列を縦方向にmiddleに見せるため*/
    background-color: transparent;
    color: #80868b;
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.fa-eye-slash{ /*アイコンに一定のスペースを設ける*/
    height: 20px;
    width: 20px;
    padding: 5px 5px;
}

/*アニメーション*/
#text4:focus + .password_string{
    color: #3be5ae;
    font-size: 10px;
    line-height: 10px;
    width: 85px;
    height: 10px;
    padding: 0 2px;
    background-color: white;
    transform:translate3d(5px, -6px, 0);
}

$('#text4').focus(function(){
    $('.password_box').animate({borderTopColor: '#3be5ae', borderLeftColor: '#3be5ae', borderRightColor: '#3be5ae', borderBottomColor: '#3be5ae'}, 200);
}).blur(function(){
    $('.password_box').animate({borderTopColor: '#d3d3d3', borderLeftColor: '#d3d3d3', borderRightColor: '#d3d3d3', borderBottomColor: '#d3d3d3'}, 200);
});

こちらでも.password_boxの枠線をCSSで変更する方がめんどくさそうだったのでjQueryで記述。またこの時、borderの色を変えるにはborderTopColor, borderLeftColor, borderRightColor, borderBottomColorの全てを指定する必要があり、色の名前(blackなど)は使えない。使えるのはHTMLカラーコードとRGB値のみ。

position: absolute;でのpadding

少し躓いた。position: absolute;ではmarginを使うと親要素をはみ出してしまうため、paddingを使う。position: absolute;の設定下ではpadding分要素が小さくなり、親要素の中に収まる仕組みになっている。

translate3d

アニメーションで要素を動かす際translate()を使うと描画にCPUを使用し、translate3d()を使うとGPUを使用するようになる。当然GPUを使った方がスムーズだしこれを使うべき。

最後に

今回こうしていくつかデザインを作った目的は、これからのwebサービス作りの際の辞書代わりに使うため、CSSデザインの勉強だった。色々触ってるとアニメーションにもいくつもやり方があったりとかなり勉強になった。擬似要素を使うとかなり複雑なデザインも実現できるため習得できると強みになると思った。また、インターネット上の様々なwebサイトをchromeのdeveloperツールを使ってどのような構造になっているのかを見るのはとても勉強になる。