全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

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)

前の記事

次の記事

この記事を書いたコーチ

250名以上の生徒を指導!テキスト通りにいかないケースも論理的に説明

初心者歓迎ホームページ作成講座
石川健太 (ホームページ作成)

新宿・新大久保・高田馬場・目白・池袋・初台・幡ヶ谷・笹塚・明大前・下高井戸・桜上水・...

ブログ記事 ページ先頭へ