Skip to content

CSSの基礎

ma-san
ma-san(鈴木正行)

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、Webサイトの見た目(スタイル)を指定・調整するための言語です。

よくあるCSSの書き方#

CSSはHTMLでマークアップされた要素に対して装飾することができる言語です。HTMLの各種要素に対して色を付けたりサイズを調整したり、場合によってはアニメーションを付与することも可能です。

p {
  font-size: 16px;
  color: #ff0000;
  font-weight: bold;
}
                

フォントサイズ16px、赤色、太文字

CSSとは?#

CSSは「どこの」「なにを」「どうする」を指定します。

CSSはカスケーディングスタイルシートの略で、カスケードとは滝のように「上から下流れていく」、という意味となり具体的には「親から子へ継承していく」という意味にもなっています。

どこ {
  なに: どうする;
}
p {
  font-size: 16px;
}

「どこ」とはHTMLの要素/タグを示します。
「なに」は文字の大きさだったり、色だったりを示します。
そして文字の大きさを変えたいのであれば「16px」などの数値やどうするか、を具体的に書きます。

「どこ」がHTMLのpタグだった場合、「pタグ及びpタグ内の要素は文字のサイズが16pxになる」という見た目の指定になります。

pタグの中にaタグがある場合でもaタグでマークアップした要素は文字の大きさが16pxのままとなります。

CSSはこの指定の繰り返しになり、見た目の調整をしていくことで世の中のWebサイトのようにデザインの表現ができるようになります。

スタイルの種類は大量にあります。よく使うものだけでも大量なのでごく一部だけ紹介致します。

font-size
文字サイズ
font-weight
文字の太さ
color
文字色
background
背景の指定
background-color
背景色
display
表示方法の種類
text-align
文字の寄せ方
line-height
行間
width
横幅
height
高さ
padding
内側の余白
margin
外側の余白

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

るり
未来へ繋がるWebの可能性。
お客様のサービスを、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。