サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
Webで
遊ぼ!
OPEN

Blog List

これまでのブログ記事を新しい順にまとめています

画像を反転させる(CSS:rotateX・Y)

*rotateX・Yの紹介です*

同じ画像でも上下や左右に反転させることでイメージが変わり、違う画像を使っているように見せることができます。

画像編集ソフトで画像を反転→保存して画像を配置する方が楽ではありますが、手間をかけてCSSで反転させるメリットは大きいです。

今回は、画像(要素)を反転させることができる、rotateX( )・rotateY( )を紹介していきます。

rotatex-y-サムネイル

要素を傾ける・回転させる(CSS:rotate)

*rotate( )の紹介です*

HTMLで配置したテキストや画像などのあらゆる要素は、傾き0°(水平)に並べられます。要素を全て水平に並べても問題はないのですが、躍動感や遊び心を表現したい場合、要素のレイアウトを工夫する必要があります。

そこで今回は、要素を回転させることができるtransform: rotate( )を紹介していきます。

要素の位置移動(CSS:translate)

*translate( )の紹介です*

要素の位置移動はpositionプロパティでもできますが、ちょっとした移動であれば横・縦の両方向の移動を同時に指定できるtranslate( )が便利です。
今回は、要素の位置を移動させるtransform: translate( )を紹介していきます。

translate

スクロールバーの表示・非表示(CSS:overflow)

*overflowの紹介です*

要素が画面幅や親要素からはみ出てしまうと、スクロールバーが現れる場合があります。
しかし、意図しないスクロールバーは非表示にしたいということも多いです。

ということで今回は、スクロールバーの表示・非表示を設定できるoverflowプロパティを紹介していきます。

overflow記事のサムネイル

背景を線形グラデーションにする(CSS:linear-gradient)

*linear-gradientの紹介です*

背景をグラデーションにすることで、背景を単色で指定するよりもアクセントやインパクトを加えることができます。

今回は背景をグラデーションにするCSSの値である、linear-gradientを紹介していきます。

linear-gradient記事のサムネイル

要素の透明度を指定する(CSS:opacity)

*opacityの紹介です*

たとえばpositionプロパティなどを使って重なり合わせた要素を少し透明に設定すると、下の要素が透けて見えるようになり、スクリーンをかけたような表現をすることも可能となります。

今回は、要素に透明度を指定できるopacityプロパティを紹介していきます。

opacity記事のサムネイル

最大幅と最小幅を指定する(max-width・min-width)

*max-width・min-widthの紹介です*

Webサイトを作っていると、「この画像は画面サイズに合わせて拡大されるようにしたいけど、○○px以上には大きくなって欲しくない」…というケースがよくあります。逆に、「一定の大きさ以下に縮小されると困る」という場合も。

そこで今回は、要素の最大・最小幅を指定できるmax-widthプロパティ、min-widthプロパティを紹介していきます。

max-width/min-width記事のサムネイル

背景に画像を挿入する(background-image・size・position・repeat)

*background-image・size・position・repeatの紹介です*

普通に画像を貼り付けるだけであれば、HTMLのimgタグを使用すれば良いですが、画像の上に文字や表など別の要素を配置したい場合、imgタグによる画像の挿入では色々と不都合が出てきてしまいます。

そこで今回は、背景画像を指定するための、background-imageプロパティと、それに関連するCSSプロパティを紹介していきます。

background-imageの記事サムネイル

角を丸くする(border-radius)

*border-radiusの紹介です*

Webサイトを作り始めの頃は、正方形や長方形ばかりを並べてしまい、「見やすいんだけど会議の資料っぽい感じ」になってしまいがちです。ということで、今回は四角形を卒業するためのCSSプロパティである、border-radiusプロパティを紹介していきます。

border-radius記事のサムネイル

文字色や背景色を指定する(color・background-color)

*color・background-colorの紹介です*

文字色や背景色の調整は、Webサイト全体のイメージを左右する重要なCSS調整になります。CSSの調整自体はとても簡単なので、marginやwidthの設定と同時に、最初に覚えておきたいCSSプロパティです。

color記事のサムネイル