見出し画像

誰でもわかる「2W1H」で理解するCSS #01

こんな方におすすめしたい内容です。
・CSS初心者(デザイナー・ディレクター)
・自らコーディングができるようになりたい方

最もイージーなプログラミング言語「CSS」

これは完全に私感ですが、これまで経験してきたプログラミング言語の中で、最も簡単で最も理解しやすいのがCSSでした。もう10年以上CSSに触れていますが、その私感は変わる事はありません。

CSSはおまじないだと思ってください

以前 Web制作会社に勤めていた頃、ディレクターやデザイナー(コーディング未経験)向けのCSS勉強会を開催した事があります。CSSをより簡単により理解しやすくする為にどうやればよいか考えました。

セレクタ・プロパティの概念を2w1hに置き換える

CSSの構文の基本は「セレクタプロパティ」で成り立っています。しかし、全くの素人にはすっと入ってきません。それよりも下記のように解説しました。

基本的に「どこの(where)」「なにを(what)」「どうすんねん(how)」でCSSのおまじないは成り立ちます。

例えば、

おまじない後のイメージはこちら。

「どこの何をどうすんねん?」これさえ覚えれば、あとはCSSの決められた構文に流し込めばOKです。

セレクタだのプロパティだのいちいち覚える必要はありません。基本的な型だけ覚えれば、今後CSSを書く事ができます。上記の基本構文に、先ほどのくちびるを赤くする例を型に流し込むと下記のようになります。

CSS 記述ルール

CSSの記述には、最低限のルールがあります。

半角英数で入力することは必須です。
{ } : ;
上の4つの記号を必ず使用します。この記号が抜けていると構文エラーが発生しうまくスタイルが反映されない事になりますのでご注意ください。

CSS記述例

「どこの何をどうすんねん?」といったおまじないでCSSは、簡単にスタイルの指示が書けます。現代のWebサイトやアプリでは、CSSが必要不可欠です。そんなCSSは、想像以上に理解しやすいプログラミング言語だと私は思います。是非、CSSに触れて試してください!

続編「CSSの読み込み方法」もご覧ください。今後とも応援宜しくお願いします。

#CSS #Webデザイン #Webデザイナー #Webディレクター #プログラミング

こちらも併せてご覧いただけると幸いです↓


よろしければサポートお願いします。励みになります!