LoginSignup
0
0

More than 5 years have passed since last update.

初学者によるCSSメモ #1

Posted at

Quite下書き

はじめに

ずっと気になっていたQiitaを始めてみました。
ってことで温かい目でご指導ご指摘頂けると大変ありがたいです。
なんか緊張する〜〜笑

最近自分のサイトを作ろうと思っておりまして
絶賛WEB系の勉強中です。
ということで今回はCSSについて調べていて知ったことについてメモしていこうかと思います。

CSSとは

webサイトを作る際にHTMLで一々フォント等のデザインを作り込むと大変なので
デザイン用途に特化させたものがCSSになります。
例えばページ内の見出しのサイズを一気に変更したい時、その他色々…
これを使うだけでページ全体のデザイン管理がすごい楽になるみたいです。

ちなみにCSSとはカスケーディング スタイル シートの略です。
カスケーディングは滝とかそういった意味で
滝が上流から下流に流れていく様に
先に設定したもの(=上流)はその後(=下流)にも適用されるということみたいです。

CSSの使い方

二種類あります。

1.外部ファイルを作成する方法
2.HTMLに直接書き込む方法

今回は後で理解しやすくするために
外部ファイルを作成する方法で進めていきます。

サイト管理しているフォルダに[任意の名前.css]というファイルを作成します。
(テキストエディタ等で可)

記述方法は

セレクタ{
属性:
値}

(分かりやすくするため わざと改行しています)

-セレクタ…指定する要素
-プロパティ…変更したい属性
-値…変更値

指定できるプロパティ

色指定パターン(全部同じ)

color:red
color:#FF0000
color:#F00
color:rgb(255,0,0)
color:rgb(100%,0%,0%)

文字サイズ(大きさ順)

1pt
1mm
1pc
1cm
1in
font-size : xx-small
font-size : x-small
font-size : smaller
font-size : small
font-size : medium
font-size : larger
font-size : large
font-size : x-large
font-size : xx-large

斜体

font-style : normal普通(斜体から元に戻す)
font-style : italic//斜体(若干、筆記体)
font-style : oblique斜体(カクカク)

文字装飾
text-decoration : none//普通(線なし)
text-decoration : underline//下に線
text-decoration : overline//上に線
text-decoration : line-through//取り消し線

文字太さ

font-weight : normal
font-weight : lighter
font-weight : 100(〜900)
font-weight : bold
font-weight : bolder

フォント指定

font-family : 'MS P明朝’//フォント名に空白部分を含む時’ ‘か” “で囲うこと

とりあえず文字関係はこんな感じらしい。
また引き続き投稿します。

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0