MENU
オンライン講座開催中
コーディング＆プログラミングにゃ(ΦωΦ)

【初めて学ぶCSS基礎】書き方、書く順番、よく出るCSS用語（プロパティ）

css
CSSの基本のき
目次

CSSとは

htmlで書いたテキストの見た目を整える。

にゃんこ1

動きのあるサイトとかも作れるにゃ。

HTMLのheadに記入する

※CSSの名前がstyle.cssの場合

<head>
<link rel="stylesheet" href="style.css">
</head>

上記の記入の場合htmlと同じ階層にCSSファイルを作る

書き方、書く順番

  1. htmlかクラス名かID名（セレクタ）
  2. 波カッコ始まり（{）
  3. プロパティと呼ぶあたい
  4. コロン(:)と
  5. 値と呼ぶあたい
  6. セミコロン(;)
  7. 波カッコ終わり(}）
にゃんこ2

簡単に言うと、
❶どの部分を❷{❸どうする:❹詳細;❺}

記入例

セレクタ{
   プロパティ: 値;
}

実際にはこう書く

p {
   color: blue;
}

htmlで指示ができない時

htmlで指示ができないときは、div、span、id、class、を使う。

にゃんこ1

divとspanの詳しい説明は、後日するにゃん。

classの説明

htmlの言葉の後<>の中に、class=”自分でつける好きな名前”を記入する。

記入例

にゃんこ2

今回は、class名を「neko」にしたにゃ。

<p class="neko">にゃんにゃん</p>

cssで、classは「.」にして記述

.neko {
   color:pink;
}

idの説明

<p id="neko">にゃんにゃん</p>

cssで、idは「#」にして記述

#neko {
   color:pink;
}
classとidの使い分け

classは、何回使ってもOKにゃ。IDは、１ページに1回しか使えないにゃ。

CSSのよく出る用語

幅

横幅

width

.container{
    width: 860px;
}
あわせて読みたい
ブロック、インライン、インラインブロックの違い、出来ることと出来ないこと。CSSでスタイルの変換方法 インラインでは、widthやheightの指定出来なかったり、margin、paddingの上下の指定ができないにゃ。

余白

内側余白

padding

外側余白

margin

にゃんこ1

※margin値が並ぶ時は、大きい方の値に相殺されるという罠があるにゃ。

paddingやmarginで値が並ぶ時

数値が横に並んでいる時は、下記の数値をあらわしている。

  • ４つの時（上｜右｜下｜左）
  • ３つの時（上｜左右｜下）
  • ２つの時（上下｜左右）
  • １つの時（上、右、下、左、全て同じ値）

記入例

padding: 10px 20px 30px 40px;
padding: 10px 20px 30px;
margin: 10px 20px;
margin: 10px;
にゃんこ2

⏰時計回りと覚えるにゃ。

いち方向だけ指示する時

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

記入例

padding-top: 10px;
margin-right: 20px;
padding-bottom: 30px;
margin-left: 40px;

中心配置

margin: 0 auto;
にゃんこ1

左右の指示にautoを付けることで中心配置となるにゃ。

あわせて読みたい
ブロック、インライン、インラインブロックの違い、出来ることと出来ないこと。CSSでスタイルの変換方法 インラインでは、widthやheightの指定出来なかったり、margin、paddingの上下の指定ができないにゃ。

色

背景色

background-color

記入例

background-color: #ffffff;

文字色

color

color: white;
color: #ffffff;

文字

文字サイズ

font-size

記入例

font-size: 16px;

行間

line-height

記入例

line-height: 1.8;

文字サイズや行間の単位に多いもの

  • px
  • rem
  • em
  • %
にゃんこ2

emやremのデフォルトは16pxのことが多いにゃ。

詳しくはこちらのページを確認してね

あわせて読みたい
CSS文字サイズ単位「rem、em、％、px、vw、vh」の特徴。レスポンシブサイトでおすすめのサイズ表記や混… CSSの文字サイズ指定で、よく使うものを紹介するにゃ。レスポンシブサイトでは「rem」指示が人気。混乱しやすいのは「％やem」にゃ。
MDN Web Docs
font-size – CSS: カスケーディングスタイルシート | MDN font-size は CSS のプロパティで、フォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な の単位例えば em, ex, なども更新…

配置

中央配置

text-align: center;
にゃんこ1

テキストだけでなく、画像もこちらの方法で中心配置できるにゃ。

横並び

横並びにするときは、「display: flex」を使う。①と②の２行を書くのが必要。

display: flex;　/*Flexbox①宣言 */
justify-content: center;　/* Flexbox② ※配置により色々ある*/
にゃんこ2

①は、毎回同じ文言②の文言を変えて色々なレイアウトができるにゃ。

詳しくはこちらのページで▼

あわせて読みたい
flexboxの説明とよく使うタグ一覧まとめ【サンプル有り】 横並びや配置や分割など、レイアウトが得意なflexbox。いっぱいのまとめたにゃ。忘れた時は見直してね。

横並びの記入例

にゃんこ1

実際にこのように書くにゃん。

.navi{
display: flex; /* Flexbox① 必須 */ 
justify-content: space-between; /* Flexbox② ※配置により色々ある*/ 
list-style-type: none; /* 中黒点消す */
}

※htmlで【ul、li】を使用して横並びにすることが多いです。その為、デフォルトでついた、中黒点を消す作業を足しています。

詳しくは講座に来てね

HTMLCSS講座

ストアカで開催中 ▶

css
CSSの基本のき

この記事が気に入ったら
フォローしてね！

Follow Me
  • URLをコピーしました！

関連記事

目次