HOME > 開発者向けBLOG >  スマートフォン

Technology Note 開発者向けBLOG

スマートフォン

スペースの空いた要素と長さの違う要素を合わせる。

スマートフォン表示で、スペースの空いた要素と長さの違う要素を、縦の位置に対して合わせる方法をご紹介いたします。 画面いっぱいに表示する、5つのリストからなるナビゲーションリンクを例にしてCSSからご紹介いたします。 1行目の「ul.navi li」クラスでリストの基本プロパティを指定しています。 2行目の「display: inline-block;」でリストを横並びにし、3行...

続きを読む

スマートフォンでinput type text等の幅を揃える

スマートフォンで見たときに「input type text」等の幅を合わせる方法をご紹介いたします。 「input type text」や「textarea」で幅が合わない場合、大抵の理由はその要素が持っているパディングやボーダーにあります。 左右のパディングに対して「0px」を指定すると、実際に指定した「width」以外の幅の要素を除外することができますが、その場合、入力時に...

続きを読む

androidで日本語文字を太文字で表示

androidで日本語文字を太文字で表示する方法をご紹介いたします。 環境にもよりますが、基本的にandroidでは「font-weight: bold;」などを指定しても、日本語文字は太文字にはなりません。太文字に見せる方法はいくつかありますが、ここでは「text-shadow」を用いた方法をご紹介いたします。 3行目は「text-shadow」を指定、8行目は「font-w...

続きを読む

checkedセレクタでチェックボックスを表現

checkedセレクタで、画像を使用せずにチェックボックスを表現する方法ご紹介いたします。 ポイントは20行目の「opacity: 0;」と26行目の「input[type="checkbox"]:checked + label」です。 「opacity: 0;」を使用している理由は、「dispay: none;」ではスマートフォンのアンドロイド携帯では表示されてしまいますので...

続きを読む

checkedセレクタでラジオボタンを表現

checkedセレクタで、画像を使用せずにラジオボタンを表現する方法ご紹介いたします。 ポイントは27行目の「opacity: 0;」と32行目の「input[type="radio"]:checked + label」です。 「opacity: 0;」を使用している理由は、「dispay: none;」ではスマートフォンのアンドロイド携帯では表示されてしまいますので、「opa...

続きを読む

PAGETOP