CSSの擬似クラス:link, :visited, :hover, :active, :focusの使い方

フェノメナの開発担当のレミです!

今回はCSSでよく使われる擬似クラス:link, :visited, :hover, :active, :focusの使い方について解説します。

上記の擬似クラスは「states」(状態)を表現する擬似クラスになります。どういう意味かと言いますと、ユーザアクションに関連する擬似クラスだということです。

a:link {}

:link 擬似クラスはリンクのデフォルトの状態を意味しているものです。一番基本的な設定なので、他の擬似クラスよりも先に宣言することをお勧めします。

一般的に勧められてる宣言の順番がこの通りです ⇨ :link, :visited, :hover, :active, :focus。

例 : 

a:link {
   color: blue;
}

a:visited {}

:visited擬似クラスは既にクリックされている(訪問されている)リンクの状態を表現するものです。

例 : 

a:visited {
   color: orange;
}

a:hover {}

:hover擬似クラスはマウスをリンクの上に置いた時の状態を表現するものです。

リンクには限定されないが、一般的なユースケースがリンクになります。

例 : 

a:hover {
   color: red;
}

a:active {}

:active擬似クラスはリンクがアクティベート(活性化)された時の状態を表現するものです。

リンクに限定はしないが、一番主流でわかりやすいのがリンクになります。リンクの場合は、リンクを押し始める時と、離す時の間の状態になります。

a:active {
   color: purple;
}

a:focus {}

:focus擬似クラスは HTMLエレメントにフォーカスが行った時の状態を表現するものです。

フォーカスというのは、タッチデバイスでタップした時や、キーボードのtabキーで移動した時などになります。

基本的にはform関連のエレメントに使われるがリンクにも使用できます。

a:focus {
   color: yellow;
}

よく混乱してしまう擬似クラスの使い方を少し理解できたでしょうか?

では、また次回も別の擬似クラスについて解説します。

産業用機器の分野でも急速にUIが

フェノメナのマーケティング担当のとしです。

仕事柄、常に世の中の変化をウォッチすることが欠かせなく、ここ数年は東京ビッグサイトの展示会場に月に2回ほどのペースで通い続けています。
見る分野は特定せず、あらゆる分野の展示会を見ることにしています。

2,3年前に、ある変化に気づきました。
産業用機器の世界でも「UI」という言葉が通じるようになってきたことです。
それまでは説明員の方に「使いやすい操作」というテーマで話しかけても、ほとんどの方には興味がありませんでした。必ずと言っていいほど、「これは専門のオペレーターが操作するのでそんなことは考える必要はないんですよ」という言葉が返ってきていました。

[続きを読む…]

色覚対応について

こんにちは。
フェノメナエンターテインメント デザインチームのニキです。

今回は色覚対応についてです。
人は視細胞の錐体と呼ばれる部分で色を認識しています。

錐体は光の三原色である『』を認識する錐体、『』を認識する錐体、『』を認識する錐体の3種類に分かれています。
なので、色を判別する際には3種類の錐体それぞれが機能しているのですが、このどれかの錐体が欠けていたり十分に機能していないと実際の色と自分自身が見ている色に差ができてしまいます。
この状態を『色覚異常』と言います。
 
先天性の色覚異常は日本人男性で20人に1人、日本人女性で500人に1人と言われています。この割合で考えると数百人規模の学校などに必ずいるという計算になります。 [続きを読む…]

ヘッダー/フッターの位置固定について

こんにちは。すーさんです。
今回は、webページのヘッダーとフッターをCSSで位置固定する方法についてです。

ヘッダー用のCSSは下記になります。
CSS:
.headerbar {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

・position: fixed;
  これでスクロールしても位置が固定されます。
・top: 0;
  上からの配置位置を「0」とすることで、一番上に表示されます。

フッターの場合は下記のようにします。
CSS:
.footerbar {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0;
}

ヘッダーと異なるのはtopプロパティではなくbottomプロパティに「0」を指定して、一番下に表示するようにしています。

コンテンツ部分には、通常時、ヘッダー/フッターにコンテンツが隠れないようにヘッダー/フッターと同じ高さの余白(padding)を上下に設定する必要があります。

また、HTML5のheader/footerタグを利用する場合も、CSSでposition/top/bottomプロパティを設定すれば大丈夫です。

Android 新機能:アプリショートカットについて

フェノメナエンターテインメントの「おっちゃん」です。

今回は、Android7.1で追加された「アプリショートカット」についてです。 まだ、Google端末以外はAndroid7.0にすらなっていない端末がほとんどですが、将来のために書こうと思います。

この機能は、ホーム画面でアプリアイコンを長押しすると、下図のようにショートカットが表示されます。

SS1
[続きを読む…]

Photoshop CC以降のテキストにおける「アンチエイリアスの種類」

こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。

WindowsやMacアプリケーションの画面デザインを行う場合、システムフォントを使うのであれば、Windowsならメイリオや游ゴシック、Macならヒラギノ角ゴやSan Francisco等を用いることになると思います。
しかし、Photoshopでこれらのフォントを選択してテキストを配置してみても、どうも実際のWindowsやMacで使われているフォントとは微妙に違って見えたりします。
人によっては気にならないかもしれないぐらいの違いですが、実際のアプリを想定して忠実に画面デザインを行おうとする際、またWindowsの標準的なUIで構築された画面をデザインしようとする際などには、この微妙な違いが「変な胡散臭さ」に繋がってしまったりすることもあります。

img01

[続きを読む…]

iOS10での変化

ios10_400x400こんにちは。フェノメナエンターテインメント デザインチームのニキです。

iOS10がリリースされてから少し時間が経ちましたが、バージョンアップはしましたか?
今回のバージョンアップで多くの変化がありましたので、どのような変化があったのかを見た目の部分と機能的な部分を混ぜながらいくつか紹介していこうと思います。

コントロールセンター

写真 2016-11-01 11 07 13 - コピー 写真 2016-11-01 11 06 52 - コピー写真 2016-11-01 11 06 56 - コピー

 

 

 

 

 

 

 

・ページを分割
iOS 9  : 1ページにまとめられていました。
iOS 10: ミュージック系を分けたので、見た目に余裕ができた印象になりました。

・ボタンがカラフルに
iOS 9  : 選択中は白くなっていました。
iOS 10: 選択中は色がつくようになったので差がわかりやすくなりました。

[続きを読む…]

HTMLのtabindexプロパティの使い方

2016-10-11 1

こんにちは、

フェノメナ技術担当のレミです。今回はHTML「tabindex」の使い方をご紹介します。

tabindexプロパティは、2つの役割をもっています。

  1. 本来tabキーでフォーカス(選択)不可能なエレメントをフォーカス可能にする。そしてその逆。
  2. フォーカスの順番を指定する

書き方はこの通りです : <a href="#hoge" tabindex=番号></a>

デフォルトでフォーカスできるエレメントはいくつかあり、<a><input type="text" /><textarea>がその例です。ユーザが「tabキー」を押すと、それぞれのエレメントにフォーカスが移ります。UIに関しても、アクセシビリティーに関しても大切な機能を果たしています。

しかし、<span>をボタンに見せたデザインにしたときは、どうなるでしょうか?
tabキーを押してもそのspanボタンが選択されないですね。。。それを選択 / フォーカスを出来るようにするためには、「tabindex=番号」を付ける必要があります。(番号は、1以上です。)

その「番号」というのは、選択されていく順番を示すものです。デフォルトでは、HTMLのDOMを上から下に選択されていくのですが、それを微調整したくなったときに細かく番号を設定してみると便利です。

また、<a>を使っているが、それをフォーカスされると困ると言う場合もあるかもしれません。そのときは、tabindex=0(ゼロ)にすることによって、tabキーを押してもフォーカスが移らなくなります。

以上になります。ぜひ、次のプロジェクトに、このtabindexプロパティの実装を検討してはいかがでしょうか!

リキッドデザイン必須? Android7の解像度変更機能追加

フェノメナエンターテインメントの「おっちゃん」です。

Android7向けにアプリケーション画面を作成する場合、気をつけなければならない追加機能について書きたいと思います。

Android7では、表示解像度をユーザーが変更できる機能が追加され、これにより同じ画面サイズでも表示できる情報量が変化するようになりました。
さらに文字サイズの変更機能も残っているので、最小文字+最大解像度、最大文字+最小解像度では、表示量にかなりの違いがでてきます。

下図はNEXUS5Xでの具体的な例です。

文字サイズ_解像度

[続きを読む…]

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント