サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
Webで
遊ぼ!
OPEN

Blog List

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

輪郭線をカスタマイズする(CSS:outline)

*outlineの紹介です*

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

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

outlineの記事のサムネイル

CSSでよく使われる単位(CSS-unit)

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

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

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

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

CSSの単位サムネイル

HTMLのタグとは?

*HTMLのタグの基本についてです

HTMLのタグの種類はたくさんありますが、タグの種類を覚える前に、まずは

「タグってどういうものなの?タグを書く際の基本的なルールは?」

という点をしっかり理解することが大切です。

今回はタグの基本的な概念や、タグを挿入する方法などを説明していきます。

HTMLのタグの記事サムネイル

HTMLって何なの?

*HTMLの概要についてです

「そもそもHTMLとは?」をテーマに、HTMLの役割や概念的な部分を解説しています。

プログラミングとの違いも簡単に解説しているので、はじめてHTMLに触れる方におすすめの記事です。

HTMLの基礎サムネイル

画像を反転させる(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記事のサムネイル