タグ別アーカイブ: CSS

CSS：CSS3の「transform:scale()」でhoverした時に画像を拡大する

Posted on by
5

CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。

画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、
サイトに動きを出すことができるのでいいと思います。

下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に
拡大させて表示した時の方法をメモします。

■ 「transform:scale()」の使用方法

ブロック要素を固定させて画像を拡大させた場合の方法です。
画像をマウスオーバーするとアニメーションで拡大します。

【CSS】

.scale {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
.scale img {
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
}
.scale img:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

※「transition: all 0.5s linear;」で指定してもOKです。
allの場合は全てのプロパティに適用されます。

【HTML】

<div class="scale">
    <img src="./css_scale.jpg">
</div>

【表示例】

サンプルページ：【CSS】画像の拡大・縮小表示

「scale()」は下記のようにX方向とY方向で指定することもできます。

transform: scale(1.2,1.2);

また、縮小させて表示させたい場合は(0.8)のように1よりも小さい値を指定します。

サイト内の画像をマウスオーバーした時に動きを出したい場合など色々と利用できそうです。

 

CSS：CSS3で画像や要素を角丸にして表示する「border-radius」

Posted on by
返信

CSS3の「border-radius」プロパティを使用すると画像や要素を角丸にして表示することができます。

今までは要素などを角丸にしたい場合、角丸の画像を作成して表示するなどしていました。
「border-radius」プロパティを使用すればCSSの記述だけでOKです。

また、指定した箇所のみに角丸を適用することも可能です。

下記にCSS3の「border-radius」プロパティを使用した時の方法をメモします。

■ 「border-radius」の使用方法

【CSS】

.border_radius {
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

【HTML】

要素に角丸を指定する場合

<div class="border_radius">
表示する内容
</div>

画像に角丸を指定する場合

<img src="./test.jpg" class="border_radius">

 

サンプルページ：【CSS】画像や要素を角丸

 

■ 指定した箇所のみに角丸を適用

下記のように細かく指定することも可能です。

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

※「/」を使用しない場合は水平方向と垂直方向が同じ値になります。

border-radius: 10px 10px 10px 10px;

また、それぞれの角ごとに指定することも可能です。

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

角丸を使用したデザインは色々な箇所で使用する時が多いと思うので、
border-radiusを使用するとコーディングが楽になるかもしれないです。

CSS：CSSで要素を回転させる方法「transform:rotate()」

Posted on by
2

CSSの「transform:rotate()」を使用するとテキストや画像、指定した要素を
回転させて表示することができます。

transform: rotate(10deg);

rotate()には回転する角度を指定します。

下記のように「-」マイナスで指定することも可能です。
その場合は逆方向に回転して表示されます。

transform: rotate(-10deg);

要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。

下記にCSSの「transform:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。

■ 「transform:rotate()」の使用方法

【CSS】

<style type="text/css">
div#rotate {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
</style>

【HTML】

<div id="rotate">
test
</div>

【表示例】

css_transform_rotate_1

「transition」プロパティを使用すれば、hoverした時にアニメーションで回転させることも可能です。

■ hover時にアニメーションで回転させる場合

【CSS】

<style type="text/css">
div#rotate {
    color:#FFF;
    background-color:#09F;
    width: 200px;
    padding:20px;
    -moz-transition: -moz-transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear;
    -o-transition: -o-transform 1s linear;
    -ms-transition: -ms-transform 1s linear; 
    transition: transform 1s linear; 
}
div#rotate:hover {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
</style>

【HTML】

<div id="rotate">
test
</div>

【表示例】

サンプルページ

他にも「rotateX()」「rotateY()」「rotateZ()」「rotate3d()」で
指定することもできます。

要素を傾けて表示させたり、hoverした時に要素を回転させたりなど、
サイトに動きが出せて面白いかもしれないです。

CSS：CSS3の「rgba()」で背景色を透過する方法

Posted on by
返信

CSS3のrgba()を使用して背景色を透過した時の方法をメモします。

CSSで画像等を透過させたい場合は「opacity」を使用すると思いますが、
デザインによっては背景に指定した色のみ透過させたい場合があります。

その場合、「rgba()」を使用すれば背景色のみを透過させることが可能です
また、テキストやボーダーを透過させることもできます。

■ rgba()

RGBA値で色の指定をします。
rgba()は色の透明度まで指定することが可能です。

rgba(「0～255」,「0～255」,「0～255」,「0～1」)

最後の「0～1」がalpha値になります。
「0」に設定した場合は完全に透明になります。
また、「1」にした場合は透過されません。

■ rgba()で背景色を透過する

background-colorにrgba()を指定します。

【CSS】

#rgba {
	background-color: rgba(0,0,0,0.5);
}

【HTML】

<div id="rgba">
test
</div>

上記は背景を黒で指定して透過させています。
下記のように表示されます。

css_rgba_1

ちょっとわかりずらいので、alpha値を0～1まで指定した場合は下記のようになります。

css_rgba_2

テキストにrgba()を指定した場合は下記のようになります。

css_rgba_3

colorにrgba()を指定します。

#rgba {
	background-color: rgb(106,192,255);
	color: rgba(0,0,0,0.5);
	padding:10px;
}

背景画像の上に重ねて表示する場合などに使えると思います。
ただし、ブラウザによっては正常に動作しないものがあるので要注意です。

CSS：スマホとPCサイトの文字サイズを固定する

Posted on by
返信

PCサイトを構築時にスマホでページを閲覧すると一部の文字サイズが
大きく拡大されて表示されることがありました。

iPhoneやAndroidなどでは文字が見やすいように文字サイズを自動調整して、
大きく表示してしまうようです。

しかし、文字が拡大してしまうとPCサイト用に構築したデザインが
崩れてしまったりすることがあります。

文字サイズを勝手に拡大されないようにするには
CSSの「-webkit-text-size-adjust」プロパティを指定すると回避できます。

下記にCSSの「-webkit-text-size-adjust」プロパティを使用して、
スマホ・PCサイトの文字サイズを自動調整して拡大表示させずに
固定して表示する方法をメモします。

■ 「-webkit-text-size-adjust」

テキストの文字サイズを調整するプロパティです。
デフォルトは「auto」なので文字サイズが自動調整されます。
下記で値で設定することができます。

auto　→　自動調整
none　→　自動調整しない
パーセント「%」：フォントサイズに対してパーセントで指定

■ 「-webkit-text-size-adjust」で文字サイズを固定

文字サイズを自動調整させずに固定させたい場合は下記のように記述します。
bodyタグに記述すればサイト全体に反映させることができます。

body {
    -webkit-text-size-adjust: 100%;
}

また、一部に要素にのみ反映させたい場合は、その要素に対して「-webkit-text-size-adjust: 100%;」を指定すればOKです。

div#textArea {
    -webkit-text-size-adjust: 100%;
}

自動調整させない時に「none」を使用しない理由は下記のページを参考にさせていただきました。

スマホサイト制作時の困った！iPhoneでフォントサイズが勝手に拡大されてしまうのを防ぐ方法。

自動調整されて文字が読みやすくなることもあるので、
その時の状況によって調整するのがいいと思います。