アクトハウスのプログラミング講座で勉強する「CSS」を、初心者向けにザックリ解説していきます。本記事は「海外へのIT留学を予定、または検討する方に、知らないワードの意味だけでもザックリと頭の中に入れておきたい」という方向けの記事です。
「CSS」について
「CSS」は、なんの略？
CSSは、「Cascading Style Sheets/カスケーディング・スタイル・シート）」の略です。
「CSS」ってなに？
Webサイトで、特定の箇所の文字の大きさや、色などを変更するなど装飾部分を設定できるのが、「CSS」です。
「CSS」と合わせてよく使われる言語に「HTML」があります。「HTML」とは、Webサイトの文書構造を定義する「ハイパーテキスト」を記述していくための言語です。文書構造はHTMLで指定し、テキストの文字の装飾や見た目の配置などをCSSで指定します。
▶︎関連記事『IT留学アクトハウスで学ぶ「HTML」とは。気になるワードを留学前にサキドリ』
「CSS」はどう使うの？
「CSS」ってどう使う？
「エディタ」と呼ばれるソフトウェアを使用して、そのエディタ内で「CSS」を記述していきます。エディタは、パソコンのメモ帳アプリのようなもので、自由に「CSS」や他の言語を書き込むことができます。
エディタの種類は？
高機能のものや無料のもの、有料のものまで、色々な種類があります。特にこちらの3つは有名です。
- 「Visual Studio Code（ビジュアルスタジオコード）」
- 「Sublime Text（サブライムテキスト）」
- 「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」は、サイト構造を作るHTMLと合わせて、プログラミングの大事な基礎スキル。
アクトハウス以外に、このプログラミングの軸となる「基礎知識」を勉強できるオンライン学習「キソプロ」もご用意しています。
現役プログラマーやデザイナーによる個別指導。初心者向けの基礎に特化したオンライン学習サービスとなります。
オンラインのため日本国内で受講可能、留学に行けないコロナ禍でも安心して学習できます。
「キソプロ」について詳しくはこちらから⬇
基礎プログラミング専門のオンライン学習「キソプロ」のサイトへ
まとめ
- CSSとは「Webサイトの装飾部分（見た目）を設定するための言語」
- 「プロパティ」と呼ばれるスタイルを用いて記述
- 記述には「エディタ」と呼ばれるソフトウェアを使う
留学前の事前知識として知っておくことで、現地で勉強を始めてからの理解度にも差が出ます。留学前にぜひ一度、目を通しておきましょう。
『IT留学のアクトハウス』ではプログラミング／英語／デザイン／ビジネスを全て学べます。
とくに「ビジネス」を日本人メンターからじっくり学べる数少ないIT留学学校となります。
将来後は、起業家や国内外フリーランス、IT企業へのキャリアチェンジやエンジニア、Webデザイナーとして活躍するなど卒業実績も豊富です。
気になった方はぜひチェックを。