【エンジニア初級】CSS入門で覚えるポイント3つ

今回は、エンジニア初級でCSSを使った事がないという人向けに、CSSについて解説します。

これからCSSを勉強したい方はこの記事を見て勉強してみてください。

今回は入門編なので、以下の3つだけ覚えてください

CSS入門のポイント3つ

  1. CSSって何?
  2. 前提となる知識は?
  3. 実際に動かしてみよう!

1.CSSって何?

まずは、CSSとはなんぞや?という概要から学びましょう。

CSSは、Cascading Style Sheets (カスケーディング・スタイルシート)の略です。

Cascading(カスケーディング)は、「同じものがいくつも数珠つなぎに連結された」と言うことを表現してます。初めて聞いた方にとっては意味不明だと思いますが、実際に使ってみるとその意味が分かると思います。

Style Sheets(スタイルシート)は、HTMLのデザイン的な見え方(スタイル)を設定するシートです。

入門者の方は、「WEB画面を綺麗にデザインする時に使う設定ファイル」とだけ覚えておけばOKです。

CSSを作る時には、1つルールがあります。

それは拡張子を「.css」というファイルで保存することです。

2.前提となる知識は?

今回は、入門編なので、何も前提がなくても動かすことができますが、実際に画面をデザインするには以下を覚えておく必要があります。

LPコーダーや、Web画面を自分でつくるデザイナー、エンジニアの場合は、CSSを覚える前にHTMLの知識が必要です。

もし、あなたがCSS画面デザインをする際に、デザイナーからPhotoshopや、XDの形式でデザイン案をもらって仕事をする場合は、それらの使い方を覚える必要があります。

また、Webブラウザによって同じCSSの設定でも画面の映り方が変わる場合があります、その違いを理解するためにもどのようなWebブラウザがあるのかは知っておきましょう。

CSSをこれから作ってみるという方は、HTMLについての知識の3つを勉強してもらい、本記事を見てからCSSに挑戦するとスムーズに覚えられるかと思います。

3.実際に動かしてみよう!

お待たせしました。

概念や前提知識ばかりで、退屈に感じたかもしれませんが、これから一緒に動かして、今回はCSSの感覚だけでも味わってみてください。

今回、実際に動かす方法は、私の運営している「hiroエンジニアのNote」のデザインを一緒に変えてみるというテーマでやってみたいと思います。

早速やっていきたいところですが、動かす前に、皆さんに質問です。

皆さんは、何のWebブラウザを使ってますか?

これから試すのはGoogleChromeを前提としてます、もしGoogleChromeがインストールされていればそちらでお試しください。

もしGoogleChrome以外の方でも、ほとんど同じ手順になると思うので、各ブラウザのやり方は適宜調べながら試してみてください。

1.まずは、このページのどこでも良いので右クリックを押してください。

メニューが出てくると思いますが、その中で↑の画像のように「検証」を教えてください。

そうすると、右側にHTMLが書いてある検証画面が出てくると思います。

検証画面を一番上までスクロールしましょう。そうすれば<div id=”page” class=”site”>というタグが出てくると思いますのでそこをクリックしましょう。

すると、少し下の方に、以下のような設定があると思います。

#page {
    width: 100%;
    background-color: #fff;
}

この「background-color: #fff;」の部分を「background-color: red;」に書き換えてみましょう。

#page {
    width: 100%;
    background-color: red;
}

すると、画面が赤色になったと思います。

このように、ブラウザの検証機能を使えば、自分でHTMLやCSSを作らなくても、色や文字の大きさなどのデザインを変えて遊ぶことができます。

CSS入門者の方は、自分のお気に入りのサイトで同じように、CSSをいじって遊ぶことでCSSの設定を楽しく覚えていくことができると思います。

===============

以上、CSS入門で覚えるポイント3つについて紹介してみました。

この情報が皆さんの人生のお役に立てれば幸いです。

エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。

記事を最後まで見ていただきありがとうございました。

執筆者: hiroエンジニア

コメントを残す

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