MENU
オンライン講座開催中
html&css講座開催中

CSSの基本のき

CSSの基本のき
目次

CSSとは

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

にゃんこ1

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

書く順番

  1. htmlかクラス名かID名
  2. 波カッコ始まり({)
  3. コロン(:)と
  4. セミコロン(;)
  5. 波カッコ終わり(})
にゃんこ2

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

記入例

p {
   color: blue;
}

htmlで指示ができない時

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

にゃんこ1

divとidとclassの詳しい説明は、後日するにゃん。今日は、一番使われる、classの説明だけ。

classの説明

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

記入例

にゃんこ2

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

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

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

.neko {
   color:pink;
}

CSSのよく出る用語

横幅

width

.container{
    width: 860px;
}

余白

内側余白

padding

外側余白

margin

にゃんこ1

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

paddingやmarginで値が並ぶ時

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

  • 4つの時(上|右|下|左)
  • 3つの時(上|左右|下)
  • 2つの時(上下|左右)
  • 1つの時(上、右、下、左、全て同じ値)

記入例

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を付けることで中心配置となるにゃ。

背景色

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のことが多いにゃ。

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

配置

中央配置

text-align: center;
にゃんこ1

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

横並び

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

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

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

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

横並びの記入例

にゃんこ1

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

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

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

詳しくは講座に来てね

CSSの基本のき

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

  • URLをコピーしました!
目次
閉じる