はじめに

HTMLの学習を始めてみたが、サイトが思うようなデザインにならないということはありませんか？
色の調整や構成要素のサイズ調整、余白の追加などがHTMLのみで行うのは難しいですよね。

HTMLをマスターしたら次はCSSでサイトのデザインのクオリティを上げてみましょう。

CSSとは

CSSはCascading Style Sheetsの略でcascadeは直訳すると「連なる、次へとつながる」などの意味があります。CSSを利用することでPaddingやMarginをHTMLの構成要素に追加したりすることが可能です。

CSSの基本構成

CSSは基本的にはブラケット（braket）と呼ばれる記号を利用して構成されます。横から見ると髭のように見えることからmastashと呼ばれることもあります。

a {
   font-size: 24px;
}

CSSではブラケットの手前でスタイルを加えたい要素を指定します。
上記の記述は「『a』というHTMLタグ要素のテキストを24pxに指定する」という意味を持ちます。
font-sizeの部分はプロパティ（直訳：特性）と呼ばれ24pxの部分はバリュー（値）という意味を持ちます。プロパティはコロン「:」、バリューはセミコロン「;」の記号で区切られます。

主要なCSS要素

プロパティには様々な種類があり、主要なものではpadding（要素の周りに余白を加える）やbackground-color（背景色）などがあります。
バリュー内にはプロパティに応じて様々な値が入ることがあります。
例えばpaddingなら4pxと余白を加えたい単位を入力し、background-colorではblueのように色を指定する値が入力されます。

a {
   font-size: 24px;
　　　　　　background-color: blue;
   padding: 4px;
}

まとめ

CSSでは、HTMLエレメントの外観を変えるほかにアニメーションなどを追加したりすることが可能です。
発展型になるとほかに様々な要素をサイトに取り入れることができるので、勉強しがいがある分野ですね。

最後に

我々Flutterラボは、大阪の梅田にあるコワーキングスペース『ONthe UMEDA』の料金プランとしてモバイルアプリ開発が学べるプログラミングスクールを運営しております。

オンラインではなく対面で学びたい方におすすめです。
※オンラインをご希望の方はFlutterラボのオンラインスクールをおすすめします。

以下のような方に適したプログラミングスクールです。

• 大阪でFlutterを学びたい方

• オフラインで現役エンジニアに教わりたい方

• プログラミングの基礎から学びたい方

• アプリを開発してみたい方

• 初心者からスマホアプリをリリースしたい方

スタンダードコース

Flutter学習用のカリキュラムに合わせて、プログラミングの基礎からアプリ開発の応用まで学べるコースです。

プロコース

ご自身で開発したいアプリを、設計からリリースまですべてサポートするコースです。

無料体験をご用意しておりますので、ぜひ気軽にTwitterのDMか、特設WEBサイトからお問い合わせください。