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] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[HTML] ルビを振る方法

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