プログラマーを目指しはじめて学習中です。

日本やってます。愛媛おすすめです。

CSS HTML & CSS Work & Working プログラミング

CSSのまとめ その1

投稿日:2019-06-04 更新日:

 

CSSの基本
基本的に半角英数字で記述する

h1 {
color: red;
}

改行しなくてもO.K.
h1 { color: red;}

複数選択する際は,(半角カンマ)で仕切る
h1, p { color: red;}

装飾たびに;(半角セミコロン)を入力する
h1{ color: red; font-size: 20px;}

・単位
ピクセル : px
パーセント : %
html要素に指定されたサイズの基準 : rem

記述が無ければ基本的にピクセルが絶対値となる

h1{ font-size: 20px;}

要素の中の要素を指定する際はスペースを用いる

div p { color: red;}

~~~~~~~~~~~~~~~~~~~~~~~~

font-sizeの幾つかの記述方法

パーセントで表示する方法

%を用いて相対的な大きさを決める

html { font-size: 100%; }

 

フォントの大きさに対して変更する方法

1remがページで用いられている標準のフォントサイズになり、そのサイズに対しての大きさになる。

2remであれば2倍、3remであれば3倍になる

h1 { font-size: 2rem; }

 

ピクセルで大きさを指定する方法

px(ピクセル)で決められる方法で絶対値なので分かりやすく決めることが出来る
h2 { font-size: 20px; }

 

font-sizeは文字入力で指定する方法も可能である。

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

で記述が可能であり標準はmediumになる。

font-size: medium;

・適度なfont-size
・本文のfont-sizeは14px~18px

font-size: 14px;
font-size: 18px;

一つのページで使う文字のサイズは2~5種類に留める
・見出しと本文のサイズの差
差が大きいほど楽しい感じになる
差が小さいほど落ち着いた感じになる

使用例

body { font-size: 100%; }

h1 { font-size: 2rem; }

h2 { font-size: 18px; }

h3 { font-size: medium; }

~~~~~~~~~~~~~~~~~~~~~~~~

font-familyの種類を変更する方法

san-serif(ゴシック体)
serif(明朝体)
cursive(筆記体)
fantasy(装飾系)
monospace(等幅)

複数指定する際は,(カンマ)で仕切る
{ font-family : sans-serif, serif, cursive, fantasy, monospace; }

日本語名、フォント名にスペースがある場合は「""」で囲む
{font-family: "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", san-serif; }

1ページのフォントはよく使っても3種類までにする
とくに本文はシンプルなフォントを選ぶ方が良い。
統一感を出すことで美しさを持たせることが出来る

使用例 :

body { font-family: "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", san-serif; }

h1 { font-family : sans-serif, serif, cursive, fantasy, monospace; }

~~~~~~~~~~~~~~~~~~~~~~~~

font-weightでfontの太さを変更する方法

font-weightは1~1000まで変えることが出来る
通常使用するのはnormalとbold

font-weight: 100; //1~1000
font-weight: normal; //標準
font-weight: bold; //太字
font-weight: lighter; //一段細く
font-weight: bolder; //一段太く
font-weight: ;

長文には読みづらいので太字は使わないようにする

使用例

body { font-weight: 100; }

h1 { font-weight: normal; }

~~~~~~~~~~~~~~~~~~~~~~~~

行の高さを変えるline-height(行間=一行の高さ)を使う方法
line-height: normal; //標準

綺麗に見える行間は1.5~1.9となっている。
line-height: 1.5;
line-height: 1.9;

行間はフォントとの兼ね合いで決められるため数値での指定を行う

使用例

body { line-height: normal; }

h1{ line-height: 1.9; }

~~~~~~~~~~~~~~~~~~~~~~~~

文章の位置を決めるtext-alignを使う方法

text-align: left; //左揃え
text-align: right; //右揃え
text-align: center; //中央揃え
text-align: justify; //両端揃え

中央揃え(center)は短文長文は両端揃え(justify)を使うと見やすくなる

h1 { text-align: center; }

h2 { text-align: justify; }

~~~~~~~~~~~~~~~~~~~~~~~~

Webフォントを使う方法

Google Fontsにいきフォントのリンクを取得する
https://fonts.google.com

選択画面の+で選択していき、選択肢終わったなら下部のバーをクリックする。

<link...で始まるリンク部分をコピーしhead内にペースト、もしくは、適応したい部分だけに適応させる

Webフォント使用例

HTML

<head>

<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p|M+PLUS+Rounded+1c|Noto+Sans+JP|Noto+Serif+JP|Sawarabi+Gothic&display=swap" rel="stylesheet">

<head>

CSS

全体に適応させる場合
body{font-family: 'Roboto', 'M PLUS Rounded 1c', 'Sawarabi Gothic', 'Noto Serif JP', 'M PLUS 1p', 'Noto Sans JP', sans-serif;}

フォント適応の優先順は最初の方ほど高い

適応させたい部分だけ
h1{ font-family: 'Roboto', sans-serif; }

h2{ font-family: 'Noto Sans JP', sans-serif; }

注意: 基本的に最低限表示されるフォントsans-serif, serifを必ず最後に入力しておく必要がある。

また、フォントたびにスペースを空けておくと見やすい。

~~~~~~~~~~~~~~~~~~~~~~~~

文字や背景の色を変更する
色指定には幾つかの方法がある
カラーコードは「ウェブカラー」で検索
https://www.peko-step.com/tool/colorchart.html
https://www.colordic.org
https://ja.wikipedia.org/wiki/ウェブカラー

カラーコード : #ffffff, #000000
と記述する
使用例
h1 { color: #fff;}
h2 { color: #000;}

・RGBで指定する
RGBは「ウェブカラー」で検索
https://www.peko-step.com/tool/colorchart.html
https://www.colordic.org
https://ja.wikipedia.org/wiki/ウェブカラー

RGB : rgb(255, 255, 255),
RGB : rgb(0, 0, 0)
使用例
h1{ color: rgb(255, 255, 255);}
h2{ color: rgb(0, 0, 0);}
・RGBは3桁で表示されるが、4桁にすると透明度の指定も可能になる。
RGB : rgb(255, 255, 255, 0.5)
もしくは
RGB : rgb(255, 255, 255, .5)
透明度は0~1の間で記述する
使用例
h1{ color: rgb(255, 255, 255, 0.5);}
h2{ color: rgb(255, 255, 255, .5);}

カラーコード、RGBはカラービッカーで色を無段階で選択することが可能になるので自由度が高い。

・色の名前で指定する
ウェブで使用できる決まった配色がある。
https://www.peko-step.com/tool/colorchart.html
https://www.colordic.org
https://ja.wikipedia.org/wiki/ウェブカラー

使用例
h1{ color: red;}
h2{ color: blue;}

カラー適応には配色の知識が不可欠になる。
配色パターンを調べてバランスの良い配色をできるように調べる。

https://www.colordic.org
https://ironodata.info/
https://coolors.co
https://color.adobe.com/ja/create/color-wheel/
http://hue360.herokuapp.com
https://www.materialpalette.com
http://colorhunt.co
https://www.colorhexa.com/663399
http://colorchart.jp
http://webcolourdata.com
http://jxnblk.com/shade/
https://flatuicolors.com
http://nipponcolors.com
https://designshack.net/gallery/
https://www.colourlovers.com

配色に関しては使いたい色を選んだなら、「類似色」、「補色」の関係性を理解し使いこなせるとバランスが考えられるようになっていく。

類似色と補色の関係は「色相環」によって理解できる。

選んだ色に近しいところにある色が「類似色」、真反対にある色が「補色(反対色)」となる。

補色はコントラストが違うゆえに使いたい色を引き立てる効果が高い。

更に「明度」(明るさ、暗さ)と「彩度」(鮮やかさ~くすんだ色)の段階がある。

加えて「色温度」も考える必要がある。

色には人が温度を感じる色がある。

「暖色」、「寒色」、「中性色」、「無彩色」といった色調も加味しなければならない。

自分が作るサイトの「イメージカラー」は作る際に必ず考えねばならないものであり、人が留まるかどうかに大きな影響があることは吟味しなければならない。

よって配色には深い知識が必要になり学習することは有益である。

配色を学習する
https://www.slideshare.net/saucerjp/ss-14902681?from_action=save
https://handywebdesign.net/2012/07/12colors-give-you-the-impression/

https://www.webcolordesign.net/

色を組み合わせるにあたっての基本的なバランスは

ベースカラー : 70%

メインカラー : 25%

アクセントカラー : 5%

となっている。

~~~~~~~~~~~~~~~~~~~~~~~~

配色ツール

ウェブ配色ツール「フォルトゥナ」

https://www.color-fortuna.com/color_scheme_genelator3/

Adobe Color CC

https://color.adobe.com/ja/create/color-wheel/

Paletton

https://paletton.com/

~~~~~~~~~~~~~~~~~~~~~~~~

背景に画像を使用する
「background-image」プロパティを使って背景画像を指定する
background-image: url (フォルダ名/ファイル名);
background-imageのファイル名は「bg」を用いられることが多い。
読み込まない際のことも考えて似た色合いのbackground-colorも記述しておく
background-color: 背景画像に良く似た色;

使用例:
body { background-color: #fff;
background-image: url(img/bg.jpg);}

「background-repeat」で背景画像を繰り返すことが出来る
「background-image」とともに用いる

background-repeat: repeat; //縦横共に繰り返す
background-repeat: repeat-x; //横方向のみ
background-repeat: repeat-y; //縦方向のみ
background-repeat: no-repeat; //繰り返さない

使用例
body { background-image: url(img/bg.jpg);
background-repeat: repeat; }

header { background-image: url(img/header.jpg);
background-repeat: repeat-x; }

背景画像の大きさを指定出来る「background-size」
「background-image」とともに用いる
「background-repeat」と連携させることもできる
使用単位は「px,rem,%」

background-size: 400px; //400pxのサイズ
background-size: 1em; //標準のサイズ
background-size: 100%; //画像のそのままのサイズ
background-size: cover; //要素のサイズいっぱいに表示
background-size: contain; //縦横比を保持し画像全てを表示

使用例
body { background-image: url(img/bg.jpg);
background-size: 400px; }

header { background-image: url(img/header.jpg);
background-size: cover; }

repeatとも連携させる
body { background-image: url(img/bg.jpg);
background-repeat: repeat-x;
background-size:200px;}

背景画像を表示する位置を指定する「background-position」
背景画像の表示開始位置を決めるためのプロパティ
background-position: left top; //標準位置(左上から)
background-position: center; //ページの中央
background-position: right; //ページ中央右
background-position: top center; //上中央から
background-position: 500px 500px; // 左上から下500pxの位置で右に500pxの位置
background-position: ; //

使用例
body { background-image: url(img/bg.jpg);
background-position: left top; //標準なので記述の必要が無い
background-repeat: repeat-x;}

backgroundで一括指定できるプロパティ
記述方法が違うため一括で指定が可能になる
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
background-attachment

 

まとめてコーディングする際は「background-size」に関して「/」で区切る必要がある。

 

~~~~~~~~~~~~~~~~~~~~~~~~

途中までしか出来ずに残念でならないのですが、調子が悪いので今日はここまでにします。

わたしは一生懸命に生きていますよ~。

-CSS, HTML & CSS, Work & Working, プログラミング

Copyright© 日本やってます。愛媛おすすめです。 , 2019 All Rights Reserved.