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

関連記事

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …