【第15回】プログラミング初心者向けCSS3講座【ユーザインターフェース】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第14回】プログラミング初心者向けCSS3講座【ルールについて】

  

【次回記事】

次回記事を更新し次第リンクを貼っておきます。

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・ユーザインターフェースについてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

ユーザインターフェイスについて

 

ユーザインターフェース(user interface)は「UI」と略されたりもしますが、そもそもユーザインターフェースとはなんなのでしょうか。まずはそれについて説明します。

 

「ユーザー」とは、サイトを閲覧している「人」のことを指します。そして、「インターフェース」とは、何かしらの「接点」や「接触する部分」という意味になります。従ってユーザインターフェースは、「人とコンピュータが触れ合う部分」を指します。

 

そのため「画面」であったり「見た目」や「使い勝手」のような意味を持つことになります。

 

 

cursor

これを指定した要素にマウスを重ねたときに表示される、マウスのカーソルの形状を指定することができるプロパティとなります。カーソルの形状には種類がたくさんあります。指定方法について以下の通りです。

 

cursor: カーソルの形状名;

auto; 自動的に指定されます。

default; デフォルトのカーソルが指定されます。

none; カーソルを非表示にします。

context-menu; コンテキストメニュー

help; 「?」を表示します。

pointer; クリックできるような表示にします。

progress; ローディング中のような表示をします。

wait; 大きくローディング中のような表示をします。

cell; +表示をします。

crosshair; 大きく+表示をします。

text; 「I」のような表示になります。

vertical-text; 「I」のような表示を横に表示します。

alias; エリアを表示します。

copy; クリックでコピーできるような見た目の表示をします。

move; 移動できそうな表示をします。

no-drop; 移動できないような見た目の表示をします。

not-allowed; 何もいじれなそうな表示をします。

e-resize; サイズを変更します。「○-resize」で方向を指定します。

n-resize;

ne-resize;

nw-resize;

s-resize;

se-resize;

sw-resize;

w-resize;

ew-resize;

ns-resize;

nesw-resize;

nwse-resize;

col-resize;

row-resize;

all-scroll; スクロールができるようになります。

zoom-in; 拡大することができるようになります。

zoom-out; 縮小することができるようになります。

 

 

ime-mode

inputタグで日本語変換機能「IME(Input Method Editor)」を使用するかどうかを選択します。使用方法は以下の通りです。

 

ime-mode:

auto; 自動で使用するかどうかを指定します。

active; IMEをオンにします。

inactive; IMEをオフにします。

disabled; IMEを使用することを禁止にします。

 

 

 

behavior: url()

こちらは「ビヘイビア」と呼ばれる機能になります。動作を一括で指定するためのプロパティとなります。

 

 

 

scrollbar-base-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

scrollbar-track-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

scrollbar-face-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

scrollbar-shadow-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

scrollbar-darkshadow-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

scrollbar-highlight-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

scrollbar-3dlight-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

scrollbar-arrow-color

スクロールバーの色を指定します。スクロールバーのすべての要素の色をまとめて指定することができるプロパティとなります。

 

 

 

 

 

ということで第15回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です