CODING

[超初心者] CSSとは

投稿日:2019年10月3日 更新日:




どうも、べ〜やんです。

HTMLに続き超初心者の方用に、マークアップ言語のCSSとはついて書きます。







CSSとは何か?

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略でwebページのスタイルを指定する言語です。

簡単にいうと、webページの背景や文字の色や大きさや画像の大きさを決めるものです。

CSSはマークアップ言語の一種で、厳密にいうとプログラミング言語とは区別されますが、プログラミングを学ぶうえでも必須の言語です。

CSSはHTMLで書かれたWEBページの骨組みに肉付けをしていくイメージです。なので、HTMLとセットで覚えていくといいでしょう。




なぜCSSが必要か




HTMLだけで書かれたWEBページは、画面の左側に文字や画像が一列に並んいて色も白黒だけで味気ないものです、そこにCSSで色や位置を指定していくのですが、単に色が鮮やかになるだけではありません。

普段私たちがWEBページを見ているときボタンがボタンとして認識できるのも、製作者がどこを見て欲しいかが直感的に理解できてWEBページをスムーズに見れるのもCSSを使ったデザインのおかげです。




CSSの流れ

HTMLとCSSはセットで使われますが、基本的には別々の場所にそれぞれの言語を書いていきその両方をコンピューターが合わせるとで綺麗で機能的なWEBページが表示されます。

HTMLの文章の指定の箇所に名前をつけておき、「この名前の箇所はこの色にしてこの大きさにしてこの形にします。」というようにスタイルシートに書いていくイメージです。




CSSを学ぶ方法

では、CSSを学ぶ方法は何があるでしょうか?


独学

CSSは基礎的な言語であるため、誰でも簡単に学べるサービスもあるので、ぜひ利用してみてください。オススメは、ドットインストールやProgateなどです。無料から始められますので少しでも興味があれば遊び感覚で触ってみるのもいいでしょう。

逆にオススメ出来ないのは、はじめから本をみて勉強することです。はじめから本をみて覚えようとしても、読むだけで疲れるしお金もかかります。

動画やスライドを見ながら自分の手を動かす方法がオススメです。




スクール

どうしてもプログラマーやWEBデザイナーになりたいという人や、短期間で技術を身につけたい、自分だけではどうしてもサボってしまう人などにオススメです。

私もプログラミングスクールで基礎から学びはじめ、三ヶ月でクラウドワークスで案件を受注することが出来ました。詳しくは他の機会に記事にしたいと思います。

ちなみに、私はプログラミングスクールTechAcademyのWebデザインコースとWordPressコースを受講しました。




おわりに

今回はCSSとは何かをテーマに記事を公開しましたが、今後は細かいCSSのルールや使い方なども記事にしていきたいと思います。




-CODING
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …