サイタWeb・デザインスクールホームページ作成講座東京 初心者歓迎ホームページ作成講座 スクールブログ 3つに分解する...

3つに分解するのが習得へのコツ!CSSの記述方法について

今日は、CSSの文法に関してです。
ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう


■-□-■-□-■-□-■-□-■-□-■
「何に」、「何を」、「どうするか」
■-□-■-□-■-□-■-□-■-□-■
CSSは、無理矢理日本語に翻訳するなら、
「何に、何を、どうするか」
という事を、ひたすら書いて行きます。

専門的に言うと、
「何に」をセレクタ、
「何を」をプロパティ、
「どうするか」を値と呼びます。

この、セレクタ、プロパティ、値を繰り返し書いて行く事で、
ホームページのデザインを作っていきます。


■-□-■-□-■-□-■-□-■-□-■
セレクタについて
■-□-■-□-■-□-■-□-■-□-■
「何に」にあたる部分です。

デザインを指定したい場所を指定します。
例えば、「画面全体の背景色を青にしたい」と思ったとして、
「画面全体」の部分がセレクタにあたります。

このセレクタの書き方は、CSS3で一気に増えたのですが、
まずは、基本的な物から覚えて行きましょう。
基本的な物だけでも、十分ホームページは作れます。
このセレクタに関しては、別の記事で紹介します。


■-□-■-□-■-□-■-□-■-□-■
プロパティについて
■-□-■-□-■-□-■-□-■-□-■
「何を」にあたる部分です。

どんなデザインを変えたいのかを表します。
例えば、「画面全体の背景色を青にしたい」と思ったとして、
「背景色」の部分がプロパティにあたります。

プロパティは、非常に多くの種類があり、全てを覚えるのは困難ですが、
実は良く使う物は結構限られています。
又、何をセレクタにしているかによって、
使える物が異なります。
例えば、画像をセレクタにしている時に、文字の大きさを変えようとしても変わりません。


■-□-■-□-■-□-■-□-■-□-■
値について
■-□-■-□-■-□-■-□-■-□-■
「どうするか」にあたる部分です。

デザインの内容を指定します。
例えば、「画面全体の背景色を青にしたい」と思ったとして、
「青」の部分が値にあたります。

値は、プロパティに何を指定しているかによって、
使える物が異なります。
例えば、プロパティで「横幅」を指定している場合、
「青色」という値は使えません。


■-□-■-□-■-□-■-□-■-□-■
文法について
■-□-■-□-■-□-■-□-■-□-■
CSSの文法は、「セレクタ」、「プロパティ」、「値」を組み合わせる形になります。

セレクタ{
プロパティ:値;
}

となります。
プロパティと値の組み合わせは、複数同時に指定する事が出来ます。

セレクタ{
プロパティ1:値1;
プロパティ2:値2;
}
上記の様な形です。

例えば、「画面全体の背景色を青にしたい」と思った場合、

body{
background-color:#0000FF;
}
となります。


■-□-■-□-■-□-■-□-■-□-■
まとめ
■-□-■-□-■-□-■-□-■-□-■
CSSは、「セレクタ」、「プロパティ」、「値」の三つの組み合わせで出来ています。
この1つ1つを調べたり、覚えていったりすれば、少しずつ上達していきます。


■-□-■-□-■-□-■-□-■-□-■
今日の出来事
■-□-■-□-■-□-■-□-■-□-■
予約していたiPhone6 Plusが来ました☆
画面がでかいです(笑)
色々機能があって、まったく使いこなせていないので、
ちょっとずつ調べてみようと思います。

とりあえず、まだケースを買っていないので、仕事の合間にケース買いに行こうと思います。

それではまた。


■-□-■-□-■-□-■-□-■-□-■
石川健太(イシカワケンタ)
無料体験はこちら

記事の一覧ページはこちら

こちらでも、webサイト制作に関しての情報を書いています。
webサイト作成方法の紹介ページ
■-□-■-□-■-□-■-□-■-□-■

 

(2014年10月1日(水) 14:05)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

今日はCMSに関して書いていきます。 一般的に、ブログの更新の様に、HTMLタグを知らなくても、 ホームページを更新していく事が出来る仕組みを、CMS(コンテンツマネジメントシステム)と呼びます。 企業が独自で開発したもの、有料の物、無料の物、色々あります。 現状一番人気で、世界的...

今日は、CSSの子孫セレクタと複数セレクタに関してです。 特に子孫セレクタは、HTMLのツリー構造をしっかり理解していないと、 使いこなす事が出来ないので、しっかり練習しましょう。 ■-□-■-□-■-□-■-□-■-□-■ HTMLのツリー構造とは? ■-□-■-□-■-□...

今日は、よく使うCSSのセレクタに関してです。 CSS3の登場で、非常に多くの、有用なセレクタが出てきて、とっても便利になりました。 とはいえ、一気に覚えるのは大変なので、まずは基本的な物を覚えていきましょう。 基本的なセレクト方法だけでも、工夫する事で大体のホームページは作れます。 ...

今日は、CSSの文法に関してです。 ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう ■-□-■-□-■-□-■-□-■-□-■ 「何に」、「何を」、「どうするか」 ■-□-■-□-■-□-■-□-■-□-■ CSSは、無理矢理日本語に翻訳するなら、 ...

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。 HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。 この「パス」の考え方は、HTM...

レッスン無料相談窓口のご案内

サイタでは、ホームページ作成レッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ