IT留学アクトハウスで学ぶ「CSS」とは。気になるワードを留学前にサキドリ

アクトハウスのプログラミング講座で勉強する「CSS」を、初心者向けにザックリ解説していきます。本記事は「海外へのIT留学を予定、または検討する方に、知らないワードの意味だけでもザックリと頭の中に入れておきたい」という方向けの記事です。

「CSS」について

「CSS」は、なんの略?

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

「CSS」ってなに?

Webサイトで、特定の箇所の文字の大きさや、などを変更するなど装飾部分を設定できるのが、「CSS」です。

「CSS」と合わせてよく使われる言語に「HTML」があります。「HTML」とは、Webサイトの文書構造を定義する「ハイパーテキスト」を記述していくための言語です。文書構造はHTMLで指定し、テキストの文字の装飾や見た目の配置などをCSSで指定します。

▶︎関連記事『IT留学アクトハウスで学ぶ「HTML」とは。気になるワードを留学前にサキドリ

「CSS」ってどう使う?

エディタ」と呼ばれるソフトウェアを使用して、そのエディタ内で「CSS」を記述していきます。エディタは、パソコンのメモ帳アプリのようなもので、自由に「CSS」や他の言語を書き込むことができます。

エディタの種類は?

高機能のものや無料のもの、有料のものまで、色々な種類があります。特にこちらの3つは有名です。

  1. 「Visual Studio Code(ビジュアルスタジオコード)」
  2. 「Sublime Text(サブライムテキスト)」
  3. 「Atom(アトム)」

システム開発の現場では、エンジニアは自分に合うテキストエディタを選んでいます。

「CSS」はどう書く?

「セレクタ」「プロパティ」「値」をそれぞれ指定して記述します。

セレクタ :見た目を整える箇所

プロパティ:変更する部分

値    :変更する値

具体的な書き方は?

例)
.box{
width:300px;        ←縦幅を指定
height:200px;       ←縦幅を指定
background-color:red;   ←背景色を指定
}

例えば、「box」というセレクタに対して「見た目」を整えたい場合には、上記の通り記述していきます。

それぞれの役割はこちら。

セレクタ  :box

プロパティ    :width、height、background-color

値     :300px、200px、red

「width」は横幅、「height」は縦幅、「background-color」は背景色をそれぞれ指定します。上記のように、見た目を整えたい要素に「横幅を300pxにする」「縦幅を200pxにする」「背景を赤にする」などの情報を付与することで、「見た目」を指定できます。

プロパティの種類は?

代表的なプロパティの一部がこちらです。

color 文字色を指定する
font-size フォントサイズを指定する
font-family Webページの文字書体となるフォントを指定する
padding 上下左右の余白を指定する
text-align 行揃えを設定する

まとめ

  • CSSとは「Webサイトの装飾部分(見た目)を設定するための言語
  • 「プロパティ」と呼ばれるスタイルを用いて記述
  • 記述には「エディタ」と呼ばれるソフトウェアを使う

留学前の事前知識として知っておくことで、現地で勉強を始めてからの理解度にも差が出ます。留学前にぜひ一度、目を通しておきましょう。

<著者:栗山>

 

IT留学のアクトハウス』ではプログラミング/英語/デザイン/ビジネスを全て学べます。
とくに「ビジネス」を日本人メンターからじっくり学べる数少ないIT留学学校となります。

将来後は、起業家や国内外フリーランス、IT企業へのキャリアチェンジやエンジニア、Webデザイナーとして活躍するなど卒業実績も豊富です。

気になった方はぜひチェックを。