【WEBデザインの基本】これだけは抑えておくべきCSSコード20個

スポンサーリンク

こんにちは、WEBマーケッター山田祐輔@yusuke_6216です。

今回は、「これだけは抑えておくべきCSSコード20個」について解説していきます。

CSSとは?

そもそもCSSってなに?という方のために簡単にご説明いたします。

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。

出典元:HTMLクイックリファレンス

上記に書かれているように、CSSとはウェブページのスタイルを指定するための言語を指します。

簡単にいうと、HTMLに指示を出す司令塔の役割をCSSが担っているというイメージが近いでしょうか。(HTMLが選手でCSSは監督のイメージ?)

では、これから「これだけは抑えておくべきCSSコード20個」について解説していきます!

これだけは絶対に抑えておくべきCSS

文字を装飾するためのCSS

1、文字の色を変更したい

color #000000などの色コード文字の色を変更する。

font-colorじゃないので注意

2、文字の大きさを変更したい

font-size ◯px 文字の大きさを変更する

3、文字の太さを調整したい

font-weight

normal

文字の太さを標準に(数値で400)

bold

文字の太さを太く(数値で700)

100~900

100,200,300,400,500,600,700,800,900でフォントの太さを指定します。

太さが9種類に対応しているフォントのみ可能。

ちなみに対応していないものは、指定した太さに近い太さで表示されます!

4、文字の種類を設定したい

font-family

“Hiragino Kaku Gothic ProN”,”メイリオ”, sans-serif;

フォントの種類を指定する。

カンマで区切り、先に記述したものが優先的に適応されます。

Windowsはヒラギノが入っていないのでメイリオが選択され、Macではヒラギノが優先されます。

5、文字を揃えたい

text-align

left

文字を左詰めにする

right

文字を右詰めにする

center

文字をセンタリング(真ん中寄せ)にする。

6、文字に下線を引きたい

text-decoration

none

テキストに装飾をしない。装飾を消す。

underline

テキストに下線を引く。

overline

テキストに上線を付ける。

line-through

テキストに打ち消し線を引く。

7、行間を調整したい

line-height

◯px

文章の行間を設定する。

◯%

文字に対する%で指定。

例えば、10pxの文字に200%と指定すると、20pxの行間と同じになる。

また、数値のみで指定1.5と指定すると、150%と同じになる。

レイアウトのためのCSS

8、横幅を指定したい

width

◯px

◯%

横幅を設定する

9、縦幅を指定したい

height

◯px

◯%

縦幅を設定する

10、2カラム以上のレイアウトを組みたい

float

left

指定した要素を左に寄せます。後に続く要素はその右側に回り込みます

right

指定した要素を右に寄せます。後に続く要素はその左側に回り込みます

11、floatを解除したい

clear both

左寄せ、右寄せされた要素に対する回り込みを解除します。

12、外側の余白を調整したい

margin-top

◯px

◯%

要素の上側に余白をつける

margin-right

◯px

◯%

要素の右側に余白をつける

margin-bottom

◯px

◯%

要素の下側に余白をつける

margin-left

◯px

◯%

要素の左側に余白をつける

margin 上px 右px 下px 左px

一括で外側の余白を指定する。

時計回りで考えると覚えやすいです。

13、内側に余白をつけたい

padding-top

◯px

◯%

要素の内側(上)に余白をいれる

padding-right

◯px

◯%

要素の内側(右)に余白をいれる

padding-bottom

◯px

◯%

要素の内側(下)に余白をいれる

padding-left

◯px

◯%

要素の内側(左)に余白をいれる

padding 上px 右px 下px 左px

一括で内側の余白を指定する。

時計回りで考えると覚えやすい。

14、境界線をはりたい

border-top ◯px

種類 色要素に境界線(上)を貼る

border-right ◯px

種類 色要素に境界線(右)を貼る

border-bottom ◯px

種類 色要素に境界線(下)を貼る

border-left ◯px

種類 色要素に境界線(左)を貼る

border ◯px

種類 色要素に境界線を貼る。

この場合、上下左右に境界線がつきます。

borderの[種類] 一覧

solid

1本線で表示されます

double

2本線で表示されます

dashed

破線で表示されます

dotted

点線で表示されます

15、背景に色をつけたい

background-color #000000などの色コード背景に色を設定する

16、背景画像を設定したい

background-image url(“images/bg.jpg”)

背景画像を設定する。

images/bg.jpg部分に画像のパスを入れる。

18、背景画像のリピートの仕方を指定する

background-repeat

repeat

背景画像を縦横に繰り返して表示する

repeat-x

背景画像を横にのみ繰り返して表示する

repeat-y

背景画像を縦にのみ繰り返して表示する

no-repeat

背景画像を繰り返さず、1回だけ表示する

18、背景画像の位置を調整したい

background-position

横方向 縦方向

背景画像の表示開始位置を指定する。

left,center,rightや、top,center,bottomといった位置を表すキーワードで指定します。

19、background url(“#.jpg”) no-repeat left center

背景画像に関するCSSの一括指定方法

リストに関するCSS

20、リストのアイコンを変更したい

list-style-type

none

リストに付く箇条書きの点を消す

disc

黒丸のリストマーカー

circle

白丸のリストマーカー

square

黒四角のリストマーカー

hiragana

ひらがなのあいうえお順

まとめ

いかがでしたでしょうか?

今回は、「これだけは抑えておくべきCSSコード20個」について解説しました。

CSSはWEBサイトを構築していく上で非常に重要な役割を担うものなので、ぜひ今回の記事を参考にしてみてください!

ではでは!

スポンサーリンク

参考になりましたら、「ツイート」や「シェア」お願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

IT企業でメディア運営を行いながら個人でもWEBデザインやネットビジネス、映像など色んなことを勉強中!(特に海外のマーケティング情報が大好物)このブログでは主に学んだことを中心に、個人や小規模ビジネスを対象にしたコンテンツマーケティングに関する情報を中心に書いています!