CSSを学ぼう!実践編

副業

【在宅ワーク・副業したい初心者向け】CSSを学ぼう!実践編

2019年2月9日

前回CSSの基礎ということで、セレクタ、プロパティ、値の基本を学びました。

CSSの基本文法

今回は、指定可能なセレクタの紹介や様々なプロパティの指定を見ていきながらどのような表示になるかを確認し学習していきたいと思います。

指定可能なセレクタ

タグで指定する方法

タグでの指定方法はHTMLタグ名を書く方法です。

そうすることで該当タグの箇所全てに対して有効となります。

タグで指定する方法

ブラウザでの表示

タグで指定ブラウザでの表示

idで指定する方法

idでの指定方法は先頭に#(シャープ)を付加します。

このidで指定された箇所に装飾(デザイン)が適用されます。

idで指定する方法

ブラウザ表示

idで指定ブラウザ表示

classで指定する方法

classでの指定方法は先頭に.(ドット)を付加します。

このclassで指定された箇所に装飾(デザイン)が適用されます。

classで指定する方法

ブラウザ表示

classで指定ブラウザ

色々なプロパティの書き方

プロパティは、例えば、文字色、背景、文字の大きさなど、「何を変えるのか」でしたね。

では実際にCSSの記述とブラウザの表示で確認していきましょう。

文字色の変更

これは先ほどもあったようにcolorというプロパティを使います。

値は#000000などの記述やカラーネームで色指定をします。

文字色の変更

ブラウザ表示

文字色の変更ブラウザ

背景の変更

background-colorというプロパティを使います。

値は#000000などの記述やカラーネームで色指定をします。

ページ全体の背景色を変える場合はbodyタグをセレクタに指定します。

背景の変更

ブラウザ表示

背景の変更ブラウザ

文字の大きさ

font-sizeプロパティを使用します。

値は以下の方法があります。

・数値にpxやemやexなどの単位をつけて指定:18pxなど

・%値で指定:10%など

・キーワードで指定:xx-small、x-small、small、medium、large、x-large、xx-large

文字の大きさ

ブラウザ表示

文字の大きさ

その他膨大なプロパティがありますが、色々なデザインを作りながら、また他のサイトなども参考にしながら知識を増やしていってください。

-副業

© 2020 楽するわーく