UIとは「いかにユーザがストレスなく使えるか」を考えることが根本となる考え方ですが、それはとても難しいことです。
本来UIは、UX（モノから得た体験）とセットで考えるものなので、今回扱うUIは狭いものになります。
しかし、具体的にUIを高める機能について学ぶことで、UIとUXについて知る第一歩になると思います。
こんな人におすすめ
見栄えのいい画像の貼り方を知りたい画像のUIを高める要素は何か知りたいCSSの「box-shadow」は何を指定できるの？画像の角を丸くする
border-radius
border-radiusができること
・四つ角の丸みをそれぞれ自由につけることができる
・左右の辺が丸みを帯びている形にすることができる
border-radiusができること
・四つ角の丸みをそれぞれ自由につけることができる
・左右の辺が丸みを帯びている形にすることができる
アイコンを作るときに一番使えるのがこのCSSプロパティ。
また、サイトで高いUIを意識した画像にしたいときなどに画像の角を丸くすることで、「やわらかい」「スマート」というような印象を与えることができます。
Before
After
参考コード
①HTMLファイルにstyle属性を加える方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="sample.jpg" width="228" height="152" style="border-radius: 10%;">
</body>
</html>②CSSファイルで記述し、HTMLに読み込む方法
img {
border-radius: 10%;
}アイコンは？
border-radiusは最大を100%として表すことができるので、それを設定することで円ができます。
また、アイコンにする最大のポイントは正円であるということです。
つまり、画像の横と縦の比を1:1にする必要があります。
下の参考コードはwidthとheightが1:1になるように設定したものですが、「aspect-ratio:」プロパティを使う方法や「padding-bottom: 100%;」を指定する方法などがあります。
Before
After
参考コード
①HTMLファイルにstyle属性を加える方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="sample.jpg" width="228" height="152" style="border-radius: 100%; background-size: cover;">
</body>
</html>②CSSファイルで記述し、HTMLに読み込む方法
img {
border-radius: 10%;
}画像に影をつける
box-shadow
box-shadowができること
・影の位置を決める
・影の色
・影の大きさ
・影のぼかし
要素に影をつけるということは、Googleが提唱しているマテリアルデザイン「現実世界の物理的法則を取り入れる」の一つです。
ぼかしが大きければ大きいほど、浮いているように見えます。
Before
After
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//style="box-shadow: （x軸方向にずれた位置）（x軸方向にずれた位置）（ぼかし）（影の大きさ）（影の色）"
<img src="sample.jpg" width="300px" height="auto" style="box-shadow:10px 5px 5px 1px rgba(0,0,0,0.3);">
</body>
</html>CSSはこちら
img {
box-shadow:10px 5px 5px 1px rgba(0,0,0,0.3);
}まとめ
画像の角を丸くする
・プロパティ「border-radius」・アイコンはborder-radius:100%と縦横比1:1でできる！
画像に影をつける
・プロパティ「 box-shadow」・影の位置だけでなく、影の大きさ・ぼかし・色も指定できる！
