＊CSSでストライプ柄を作る方法です＊

PhotoshopやIllustratorで画像を作成する時にもよく使われる「ストライプ」（しましま模様）ですが、CSSでもストライプ柄を作ることが可能です。

背景がベタ塗りばかりだと、色やデザインによっては重たいイメージや単調なイメージになりがちですが、ストライプを取り入れることでデザインにアクセントや変化を加えることができます。

＊outlineの紹介です＊

お問い合わせフォームをクリックすると、通常であれば枠線が表示されます。

これはborder（境界線）ではなく、outline（輪郭線）です。よく似ているCSSプロパティですが、全く異なるCSSプロパティなので、特にフォームの枠線をカスタマイズしたい場合には注意が必要です。

＊CSSでよく使われる単位についてです＊

CSSでは様々な単位が使用されます。

日常生活でもよく使用される馴染み深いものもあれば、ほとんどWebの世界でしか使われない単位もあり、様々です。

CSS調整の具体例も交えながら、イメージができやすいように解説しています。

＊rotateX・Yの紹介です＊

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

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

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

＊rotate( )の紹介です＊

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

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

＊translate( )の紹介です＊

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

＊overflowの紹介です＊

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

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

＊linear-gradientの紹介です＊

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

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

＊opacityの紹介です＊

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

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

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

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

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