学ぶ 稼ぐ 楽しむ 「豊な人生を考える」ブログ

CSSで出来ることを基礎から解説【初心者向け】

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

 

 

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

 

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

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

 

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

 

目次
スポンサーリンク

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」の7種類で指定可能
<例文>
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」1本の線「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

 

数値は「px」「rem」「%」「fr」の単位
<例文>
grid-template-row: 100px;

 

grid-gap(子要素の余白)

子要素同士の空白を指定できる。

プロパティ:grid-template-row

 

数値は「px」「rem」「%」の単位
<例文>
grid-template-row: 2px;

 

最後に

 

以上、基礎的なCSSのコードを紹介しました。

 

各コードの詳しい解説は別記事にて解説していきます。また利用していただけたら幸いです。

最後までお読みいただきありがとうございました。たろーでした。

スポンサーリンク
サボり気味です、でもたまにつぶやきます。
NO IMAGE

晴耕雨読な生き方

『晴れた日には畑を耕し雨の日には本を読む』株式投資、FX、仮想通貨、ネットビジネスで晴耕雨読な生活を目指すブログです。