真面目にWebプログラミングを教えることを考えてみた【CSS】

こんちゃっす。あいじっとです。
昨日はHTMLについて触れたので、本日はCSSのお話。

CSSってなんぞ？

カスケーディングスタイルシート（Cascading Style Sheets）です。
HTMLを装飾するために使用されます。

色をつけてみたり、形を変えてみたり、ブロック要素を横並びにしてみたり。

コンテンツを決まるのはHTMLですが、そのコンテンツの見せ方を決めるのがCSSですね。

どうやって書くのか

とても単純で「属性:値;」の形式で書いていきます。
この属性の組み合わせで様々な装飾をしていきます。
color:red;　と書けば文字色が赤になります。

cssファイルを別で作成してHTMLで読み込んだり、HTMLのstyleタグで書いたり、HTMLのタグのstyle属性に書いたりできます。
基本的には別ファイルに書いて読み込むことになると思います。
そうすることで、共通的なスタイルを様々なHTMLに反映させることができます。

文字を青にするというスタイルをHTML100枚に書いて、赤に変更したくなった時に100枚直すのは大変ですね。
CSSファイルとして別に用意して読み込ませておけば、CSSファイルを編集することで、全てのHTMLに反映させることができます。

どうやって勉強をすれば良いのか？

HTML以上に書いて慣れていくしかないと思います。
また、HTMLとの組み合わせで使うものなので、同じデザインであってもHTMLによってCSSが変わったりもします。

参考サイトを見つけて自分なりにそのサイトを複製してみるような勉強がお勧めです。

最低限知っておくと良いこと

優先順位

同じ要素に対して、同じ属性のスタイルを設定した場合、
例えばタイトルに「color:red;」「color:blue;」を設定した場合は後から書いた方が優先されます。

それだけでなく、より詳しく要素を指定した方が優先されるというルールもあります。
後勝ちになるのは、指定の詳しさが同じだった時です。

詳しく要素を指定するというのは、HTMLでタグを指定したり、クラスを指定したり、idを指定したりと行った感じです。
HTMLタグ < クラス < id　の順でより詳しく指定していることになります。

他にも様々な指定方法があり、組み合わせも可能なので、上手く指定の仕方を変えていく必要があります。
（そんなに同じ属性を設定するようなCSSが綺麗なのかと言われると、、、）

擬似要素

要素の指定の仕方の一つではありますが、使いこなせると応用的な指定ができます。
マウスカーソルが当たった時、偶数番目の要素のみといったものがあります。
他にもたくさんあります。

存在を知っておけば役に立つので、ちょっと応用的な指定ができるものといった感じで覚えておいて、一覧でまとめてくれているサイトなどをブックマークしておくと良いでしょう。

Bootstrap

とてもよく使われるCSSフレームワークです。
フレームワークとは枠組みのことで、決められたルールに則ってコーディングすると開発が楽になるよーって感じのものです。
フレームワークの説明は難しいので、調べてみて腑に落ちる説明を探してみてださい。

Bootstrapは非常によく使われます。
レスポンシブ対応と言って、PCとスマフォの両方に対応したレイアウトを作るのがとても簡単です。

私の100% 主観の考えですが、最初のHTMLの勉強の際にBootstrapに頼ったコーディングをして勉強するのも良いと思います。
Bootstrapで作りたいレイアウトに近いものを探して、そのコードを真似する感じですね。

フレームワークに則ったコーディングを強いられるので、なかなか綺麗なHTMLを書けるようになると思います。