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] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[HTML] ルビを振る方法

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

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …