CSSの機能を感覚的にマスターする方法 – W3Schools.com を使う-

CSSの機能を感覚的にマスターする方法についての覚書です。ここでは、「W3Schools」を使います。

まず、動作を確認したいCSSを検索欄に入力して、「Search」をクリック。

w3schools01

検索結果より、適当なリンクをクリック。

w3schools02

「Try it yourself」をクリック。なお、ここで各種ブラウザへの対応状況も確認できます。

w3schools03

以上の操作で、CSSの機能を確認できる画面になります。

w3schools04

例えば、一番左側のパラメータを「10px」から「100px」に変更してみます。

WS000725

「Edit and Click Me」をクリック。

w3schools05

すると、右側の図形は以下のように変化します。変化の仕方から、一番左側のパラメータは左側への移動長さであることが推測できます。

w3schools06

同様に左から2番目。

WS000726

影が下側に移動しました。

w3schools07

次に左から3番目のパラメータを変更。

WS000727

今度はぼやけました。

w3schools08

最後に一番右側。CSSで#+6桁の番号・アルファベットと言えば、色を示す番号であることはわかるのですが、一応、実験してみます。

WS000728

影が赤くなりました。

w3schools09

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。