CSSで出来ることを基礎から解説【初心者向け】│晴耕雨読days

HTMLとCSSを学習してるけど、CSSはどんなことが出来るの？把握しきれないな。CSSで出来る表現の一覧とコードも一緒に教えてほしい。

そんなお悩みに答えます。

HTMLとCSSを学習を始めた人、始めてからしばらく経って忘れてきた人向けの記事です。

CSSの基礎だけで出来ることを紹介するので、備忘録的な感じで参考になれば幸いです。

ではさっそく見ていきましょう！

1 CSSってそもそもなに？って方はまずココ
2 文章のCSS
3 背景のCSS
4 「高さ」と「幅」のCSS
5 空白指定のCSS
6 線のCSS
7 リストのCSS
8 レイアウトのCSS
9 グリッドのCSS
10 最後に

CSSってそもそもなに？って方はまずココ

「CSS」は正式名称を「Cascading Style Sheets」と言い。

文字や画像、レイアウトなどを「装飾」することができる言語、仕組みです。

HTMLファイルだけだと、ただ文章が羅列されているだけ、画像がそのままの大きさで表示されるだけですよね。

CSSを読み込むことで、色やサイズ、レイアウトの変更が簡単にできます。

WEB系言語を覚えるなら、HTMLとCSSはセットで覚えることがほとんど。

HTMLファイルへそのまま書き込む方法と、stylesheetという別ファイルを読み込む方法がありますが、後者の別ファイルでの管理が一般的です。

文章のCSS

font-size（文字の大きさ）

文字の大きさを変更できる。

プロパティ：font-size

数値は「px」「rem」「%」の単位、キーワードは「xx-small」「x-small」「small」「medium」「large」「x-large」「xx-large」の７種類で指定可能

＜例文＞
font-size: 1px;
font-size: 10%;
font-size: medium;

font-family（文字のフォント）

文字のフォント(種類)を変更できる。

プロパティ：font-family

デフォルトのフォントの指定、外部のフォントの読み込みが可能。「sans-serif」「serif」「cursive」「fantasy」など

＜例文＞
font-family: sans-serif;
font-family: serif;
font-family: cursive;

font-weight（文字の太さ）

文字の太さを変更できる。

プロパティ：font-weight

数位は1～1000で指定、キーワードは「normal(標準)」「bold(太字)」「lighter(一段階補足)」「bolder(一段階太く)」

＜例文＞
font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;

line-height（行の高さ）

文章の高さを変更できる。

プロパティ：line-height

数値で単位なし：フォントサイズとの比率で指定、数値で単位あり：px em % の単位で指定

＜例文＞
line-height: 1;
line-height: 2px;
line-height: 5%;

text-align（文字の揃え）

文字の揃えの変更ができる。

プロパティ：text-align

「left(左揃え)」「right(右揃え)」「center(中央揃え)」「justify(両端揃え)」

＜例文＞
text-align: left;
text-align: center;
text-align: justify;

text-decoration（文字の装飾）

文字に下線や打消し線など装飾が可能。

プロパティ：text-decoration

「none(飾りなし)」「underline(下線)」「overline(上線)」「line-through(打消し線)」「blink(点滅)」

＜例文＞
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

letter-spacing（文字の間隔）

文字の間隔を変更できる。

プロパティ：letter-spacing

数値：px rem % の単位指定が可能

＜例文＞
letter-spacing: 1px;
letter-spacing: 1rem;
letter-spacing: 1%;

color（文字の色）

文字の色を変更できる。

プロパティ:color

カラーコード、色の名前、rgbaで色の指定が可能

＜例文＞
color: #fff;
color: red;
color: rgba(90, 100, 5, 0.5);

font（文字全体の指定）

文字に関するプロパティをまとめて変更可能

プロパティ：font

これまで紹介した「font-style」「font-variant」「font-size」「font-family」「font-weight」「line-height」をまとめて指定が可能

なお、記述にはルールがあります。

省略不可:「font-size」「font-family」
省略可:「font-style」「font-variant」「 font-weight」「line-height(値の前に【/】を書く)」

記述の順番
①「font-style」「font-variant」「font-weight」（順不同）
②「font-size」
③「line-height」
④「font-family」

＜例文＞
font: 2rem sans-serif;
font: 10px /1rem serif;
font: bold 2% /1rem serif;

背景のCSS

background-color（背景の色）

背景の色を変更できる。

プロパティ：background-color

カラーコード、色の名前、rgbaで色の指定が可能

＜例文＞
background-color: #fff;
background-color: red;
background-color: rgba(90, 100, 5, 0.5);

background-image（背景の画像）

背景に画像を表示できる。

プロパティ：background-image

画像の読み込みは「url(フォルダパス)」と記述、画像読み込みしない場合は「none」

＜例文＞
background-image: url(image/img.jpg);
background-image: none;

background-repeat（背景の繰り返し）

背景画像の繰り返し表示を指定できる。

プロパティ：background-repeat

「repeat」縦横ともに繰り返す「repeat-x」横に繰り返す「repeat-y」縦に繰り返す「no-repeat」繰り返さない

＜例文＞
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

background-size（背景のサイズ）

背景画像の大きさを変更できる。

プロパティ：background-size

数値は「px」「rem」「%」の単位、キーワードは「cover」「contain」

＜例文＞
background-size: 100%;
background-size: cover;
background-size: contain;

background-position（背景の位置）

背景の位置を変更できる。

プロパティ：background-position

数値は「px」「rem」「%」の単位、キーワードは「left」「center」「right」「top」「bottom」

＜例文＞
background-position: 50px 100px;
background-position: center;
background-position: center top;
background-position: left bottom;

background（背景全体の指定）

背景全体に関するプロパティをまとめて変更可能

プロパティ：background

「background-image」「background-color」「background-position」「(background-size」「background-repeat」をまとめて指定が可能。記述の順不同ですが、位置とサイズの間には【/】を書きます。

＜例文＞
background: url(/img1.jpg) center / 2rem;
background: center top / 10rem #fff ;
background: url(/img1.jpg) bottom / 80%;

「高さ」と「幅」のCSS

width（幅の指定）

幅の指定ができる。

プロパティ：width

数値は「px」「rem」「%」の単位、「auto」プロパティの値で自動設定

＜例文＞
width: 100px;
width: 100%;
width: 0 auto;

max-width（最大幅の指定）

最大の幅を指定できる。

プロパティ：max-width

数値は「px」「rem」「%」の単位、指定した数値以上の幅にならない指定

＜例文＞
max-width: 10rem;
max-width: 800px;

min-width（最小幅の指定）

最小の幅を指定できる。

プロパティ：min-width

数値は「px」「rem」「%」の単位、指定した数値以下の幅にならない指定

＜例文＞
min-width: 10rem;
min-width: 800px;

height（高さの指定）

高さの指定ができる。

プロパティ：height

数値は「px」「rem」「%」の単位、「auto」プロパティの値で自動設定

＜例文＞
height: 100px;
height: 100%;
height: 0 auto;

max-height（最大高さの指定）

最大の高さを指定できる。

プロパティ：max-height

数値は「px」「rem」「%」の単位

＜例文＞
max-height: 10rem;
max-height: 800px;

min-height（最小高さの指定）

最小の高さを指定できる。

プロパティ：min-height

数値は「px」「rem」「%」の単位、指定した数値以下の幅にならない指定

＜例文＞
min-height: 10rem;
min-height: 800px;

空白指定のCSS

margin（外枠の指定）

要素の外側の余白を変更できる。

プロパティ：margin

数値は「px」「rem」「%」の単位、「auto」プロパティの値で自動設定。半角スペースで区切り「上、右、下、左」の時計回りで指定が可能

＜例文＞
margin: 10px 25px; (上下と左右)
margin: 10px 25px 15 px ; (上、左右、下)
margin: 10px 25px 15 px 20px; (上、右、下、左)

また「margin-top」「margin-bottom」「margin-left」「margin-right」と個別で上下左右を指定することもできます。

padding（内枠の指定）

要素の内側の余白を変更できる。

プロパティ：padding

数値は「px」「rem」「%」の単位、「auto」プロパティの値で自動設定。半角スペースで区切り「上、右、下、左」の時計回りで指定が可能

＜例文＞
padding: 10px 25px; (上下と左右)
padding: 10px 25px 15 px ; (上、左右、下)
padding: 10px 25px 15 px 20px; (上、右、下、左)

margin同様に「padding-top」「padding-bottom」「padding-left」「padding-right」で上下左右を個別で指定することもできます。

線のCSS

border-width（線の太さ）

線の太さを変更できる。

プロパティ：border-width

数値は「px」「rem」「%」の単位、キーワードは「thin(細い)」「medium(普通)」「thick(太い)」で指定

＜例文＞
border-width: 1px;
border-width: thin;
border-width: thick;

border-style（線のスタイル）

線のスタイルを変更できる。

プロパティ：border-style

「none」線の非表示「solid」１本の線「double」2本の線「dashed」破線「dotted」点線「groove」立体的に窪んだ線
「ridge」立体的に山型の線「outset」立体的に見える線

＜例文＞
border-style: none;
border-style: solid;
border-style: double;

border-color（線の色）

線の色を変更できる。

プロパティ：border-color

カラーコード、色の名前で指定

＜例文＞
border-color: #fff;
border-color: red;
border-color: blue;

border-radius（線の丸み）

線の角を変更できる。

プロパティ：border-radius

数値は「px」「rem」「%」の単位、半角スペースで区切り「左上、右上、右下、左下」の時計回りで指定が可能

＜例文＞
border-radius 10％ 25％; (左上、右下と右上、左下)
border-radius: 10px 25rem 15 px ; (左上と右上、左下と右下)
border-radius: 10px 25px 15 px 20px; (左上、右上、右下、左下)

border（線の指定）

線の指定が可能

プロパティ：border

「border-width」「border-style」「border-color」をまとめて指定が可能。記述の順不同です。

＜例文＞
border: 1px solid red;
border: 1px outset black;
border: 1px double blue;

また「border-top」「border-bottom」「border-left」「border-right」と個別で上下左右を指定することもできます。

リストのCSS

list-style-type（リストマーカーの種類）

リストマーカーの種類を変更できる。

プロパティ：list-style-type

「none」非表示「disc」黒丸「circle」白丸「spuare」黒四角「decimal」数字「decimal-leading-zero」0を付けた数字「lower-roman」小文字のローマ字「upper-roman」大文字のローマ字「cjk-ideographic」漢数字「hiragana」ひらがな「katakana」カタカナ「hiragana-iroha」ひらがなのいろは「katakana-iroha」カタカナのいろは「lower-alpha/lower-latin」小文字のアルファベット「upper-alpha/upper-latin」大文字のアルファベット「lower-greek」小文字の古典的ギリシャ文字「hebrew」ヘブライ数字「armenian」アルメニア数字「georgian」グルジア数字

＜例文＞
list-style-type: none;
list-style-type: disc;
list-style-type: hiragana;

list-style-position（リストの位置）

リストの位置を変更できる。

プロパティ：list-style-position

「outside」ボックスの外側に表示、「inside」ボックスの内側に表示

＜例文＞
list-style-position: outside;
list-style-position: inside;

list-image（リストの画像）

リストに画像を指定ができる。

プロパティ：list-image

「url」画像ファイルの表示、「none」指定しない

＜例文＞
list-image: url(image/img.jpg);
list-image: none;

list-style（リスト全体の指定）

リストをまとめて変更ができる。

プロパティ：list-style

「list-style-type」「list-style-position」「list-image」を指定できる。

＜例文＞
list-style: url(image/img.jpg) outside none;
list-style: none inside disc;
list-style: url(image/img.jpg) outside hiragana;

レイアウトのCSS

display（レイアウト）

子要素を並べることができる。

プロパティ：display

「flex」を記述することで縦並びの子要素を横並びに変更できる。

＜例文＞
display: flex;

flex-direction（並ぶ向きの指定）

子要素の並ぶ向きを変更できる。

プロパティ：flex-direction

「row」左から右へ配置（初期値）「row-reverse」右から左へ配置「column」上から下に配置「column-revese」下から上に配置

＜例文＞
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-revese;

flax-wrap（折り返し指定）

子要素の折り返し指定ができる。

プロパティ：flax-wrap

「nowrap」折り返ししない、一行表示(初期値)「wrap」複数行へ折り返し、上から下へ並べる「wrap-revese」複数行へ折り返し、下から上に並べる

＜例文＞
flax-wrap: nowrap;
flax-wrap: wrap;
flax-wrap: wrap-revese;

flex-content（水平方向の指定）

横方向の揃えを指定できる。

プロパティ：flex-content

「flex-start」左揃え(初期値)「flex-end」右揃え「center」中央揃え「space-bitween」両端に配置しそれ以外は均等に揃え「space-around」両端含め均等に揃え

＜例文＞
flex-content: center;
flex-content: space-bitween;
flex-content: space-around;

align-items（垂直方向の指定）

縦方向の揃えを指定できる。

プロパティ：align-items

「stretch」親要素の高さ、またはコンテンツの高さに広げる(初期値)「flex-start」上揃え「flex-end」下揃え「center」中央揃え「baseline」ベースラインに揃える

＜例文＞
align-items: stretch;
align-items: center;
align-items: baseline;

align-content（複数行の揃え指定）

複数行にした時の揃え変更ができる。

プロパティ：align-content

「stretch」親要素の高さ、またはコンテンツの高さに広げる(初期値)「flex-start」左揃え(初期値)「flex-end」右揃え「center」中央揃え「space-bitween」両端に配置しそれ以外は均等に揃え「space-around」両端含め均等に揃え

＜例文＞
align-content: flex-start;
align-content: center;
align-content: space-bitween;

グリッドのCSS

display（グリッド）

グリッド表示に変更できる。

プロパティ：display

「grid」子要素を並べることができる。タイルレイアウトで利用

＜例文＞
display: grid;

grid-template-columns（子要素の幅）

子要素の幅を指定できる。

プロパティ：grid-template-columns

数値は「px」「rem」「%」「fr」の単位

＜例文＞
grid-template-columns: 100px;

grid-template-row（子要素の高さ）

子要素の高さを指定できる。

プロパティ：grid-template-row