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でテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

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

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