CSSのコード一覧【Progate初級～上級 +α】

この記事では、Progateの初級、中級、上級までのCSS学習レッスンの内容を簡潔にまとめる。プラスアルファで、ここまでは知っておくべきという必要最低限の知識までまとめている。

プログラミング初学者に活用していただきたい。

本記事を書く目的はプログラミングをそれほど使わない私が、コードを書く時の参考に見たり、一度覚えた内容を忘れないよう留めておく程度である。

＞＞HTMLのコード一覧はこちら

CSSのコード一覧
追記
まとめ

CSSのコード一覧

以下にCSSのコード一覧を羅列する。説明不足な部分もあるがご了承いただきたい。

CSSの読み込み

HTMLからCSSを読み込むために<link rel=”stylesheet”>を使う。

色を変える

colorプロパティ。１６進数のカラーコードで色を指定する

h1{

color: ff0000;

}

※主要な色であればredのように指定することができる

※#333, #111が薄い黒で目に優しいといわれている

※行頭はインデント、プロパティの末尾にはコロン、行末にはセミコロンをつける

/* */

文字の大きさ

font-sizeプロパティを使う。単位はpx（ピクセル）

文字の種類

font-familyプロパティを使う。

h1{

font-family: serif;

}

※フォント名にスペースがあるときはダブルクォーテーションで囲む

※明朝体：serif, YuMincho… ゴシック体：sans-serif, Lucida Grande….

背景色を変える

background-colorプロパティを使う

h1{

background-color: #ffd800;

}

要素の横幅、高さを変更する

それぞれ、widthプロパティ、heightプロパティを使う。ともにpx指定

%で指定すると、親要素に対する割合になる。

h1{

width: 50px;

height: 40px

}

クラスを指定

行頭に.(ドット）を付ける。.class名 {…

※class名の後にスペースを開けて1つ上の要素を指定することも可能

.class名 li {…

リストのマーク（行頭の点や数字）をなくす

li{

list-style: none;

}

指定した要素を横並びにする

floatプロパティを用いる

float: left; 左から順に横並び

float: right; 右から順に横並び

要素に余白を入れる

paddingを用いる

.logo{

padding: 20px;

} →上下左右に２０pxの余白

.logo{

padding: 20px 30px

} →上下２０px、左右３０pxの余白

※同様に4つ指定→上右下左の順に指定。3つ指定→上下（左右）の順に指定。

要素に枠線を付ける

borderプロパティを用いる

枠線の太さ、種類、色を指定する

特定の方向につけたい場合は「border-方向」とする

.logo{

border-bottom: 3px solid #ff0000;

}

要素の外側に余白を付ける

marginプロパティを使う。

.logo{

margin: 20px 10px;

}

背景画像を指定する

background-imageプロパティを使う

background-image: url(画像url);

background-size: cover;を指定すると1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する

要素を中央に寄せる

marginの左右にautoを指定する

.box{

margin: 0 auto;

}

要素を透明にする（中身すべてを透明にする）

opacityプロパティを使う

透明度は0.0（完全に透明）から1.0（完全に不透明）の数値で指定

背景色のみを透明にする

rgbaプロパティを用いる

3つの値の組み合わせで表示する色を決めるrgbにプラスして、4つ目の値に透明度を指定する

.sample{

background-color: rgba(74, 190, 238, 0.5);

}

文字の間隔を指定する

letter-spacingプロパティを使う

letter-spacing: 2px

インライン要素、ブロック要素、インラインブロック要素への変更

displayプロパティを使う

display: inline;

dislplay: inline-block;

display: block;

カーソルが乗った時のCSSを指定

セレクタ : hoverを使う

div:hover{

・・・・・

}

要素の角を丸める

border-radiusプロパティを使う。pxの数字が大きいほど角が丸くなる

画像の角を丸める場合にはborder-radiusに続けて、overflow: hidden;を足す。

border-radius: 5px;

overflow: hidden;

※画像を丸にする場合、border-radius: 50%にする

テキスト、ボタンのレイアウトを整える

text-alignプロパティで指定

left, center, rightに指定

text-align: center;

アニメーションを付ける

transitionプロパティを使う

transition: 指定プロパティ時間; で指定

allを指定するとすべてをプロパティに適用

変化の対象、変化の時間を指定

div{

transition: all .25s ;

}

行間の指定

line-heightプロパティで行の高さを指定する。

div{

line-hight: 10px;

}

aタグのクリックできる範囲の変更

aタグはインライン要素なので、テキストの部分のみしかクリックできない

ブロック要素に変更することでボタン全体がクリックできるようになる

文字の太さの指定

font-weightプロパティを用いる。normalもしくはboldを指定

<h1>~<h6>まではデフォルトでboldになっている

font-weight: normal;

要素の重ね合わせ

position: absolute;を使うと、要素同士を重ねて表示できる

サイト全体の左上部分を基準都市、底からの位置をtopとleftを用いて指定する。

.box1{

position: absolute;

top: 50px;

left: 70px;

}

※親要素の左上を基準に位置を変更する場合はposition: relative;を指定する

ボックスに影を付ける

box-shadowプロパティを使う

水平方向px, 垂直方向px, 影の色の順番で指定する。3つ目のpx値は影のぼかしの程度

box{

box-shadow: 10px 10px 5px #000000;

}

box-shadow: noneとすることで影を消すことができる。

要素がクリックされている間のCSSの指定

セレクタにactiveを用いることで、要素がクリックされている間だけCSSを指定できる

div:active{

・・・・

}

画面上に要素を固定する

position: fixed;を使うと、常に要素を画面上の指定した位置に固定できる

位置はtop, left, right, bottomで指定

.img{

position:fixed;

top: 10px;

left: 40px;

}

要素の重なりの順序を指定する

z-indexプロパティで要素の重なりの順序を指定する

整数値で指定し、数字が大きいほど上に表示される

※positionと併用する必要がある

z-index: 10;

メディアクエリの書き方

＠media(条件){…}というように書くと、条件が当てはまるときのみ｛｝内のCSSが適用される。条件にはmax-width(最大値), min-width(最小値)を指定

例）(max-width: 500px )

※ブレイクポイントの目安

スマホ画面～670px

タブレット画面671px～1000px

パソコン画面1001px～

レイアウト崩れを直す

widthが100％で要素を配置している場合、左右のpadding、borderの追加でレイアウトが崩れる。このレイアウト崩れはbox-sizing: border-box;　で防ぐことができる。border-boxを指定することでpadding, borderの値も含まれる

※box-sizing: border-boxを指定するときは*（全要素）に対して指定することが推奨される

親要素の高さを維持する

子要素がすべてfloatで設定されているとき、親要素の高さは0になってしまう。

その場合でも親要素が高さを持つようにするためにはclearクラスを持つdivを追加して「.clear{clear: left;}」とすることでfloatを解除できる。

要素を非表示にする

display: noneを用いる。非表示にした要素を表示させるときはdisplay: blockを用いる。

追記

これまで、HTMLコードでウェブサイトを作成する中で、追加でコードを覚える必要性が出てきたため、追記する。

calc()関数

パーセントとピクセルのように違う値同士で演算ができる

例）

width: calc(100% – 50px);

要素の位置を変化させるプロパティ

transform: translate()

transform: translate( -100px, 50px);

※右に100px、下に50px動かす

backgroundプロパティを1個にまとめる

background: url(“・・・”) blue no-repeat

子セレクタと子孫セレクタ

<p></p>

<div>

<p></p>

</div>

直下のpタグが子セレクタ、2つ下の階層のpタグが子孫セレクタ。これに対してCSSを指定する場合、

.parent > p {・・・}は子セレクタのみが対象

.parent p {・・・}は子セレクタも子孫セレクタも対象

2つのセレクタに対して１つのCSSで共通変化を与える

.セレクタ1, .セレクタ2　間をコンマで区切り、二つのクラスを通常通り並べる

※コンマを入れない場合は2つのクラスがそろった要素にのみ適用

h1.headline ｛○○}

※.セレクタ1 + .セレクタ2でセレクタ1の直下のセレクタ2を持つ要素にのみ適用

バッティングしたとき(同一の要素が2つ以上のCSSで記述されているとき)

より詳細なCSS,　後に書かれたCSSが優先される

!importantを追記することで、そのCSSが最優先される

例）p { color: red !important; }

※詳細でないpタグだが、他のpタグがあっても赤色指定が最優先になる

@規則

@charset “utf-8”; →文字の指定

@import “URL”;

他のCSSを読み込んで合体できる。ただし、読み込み速度が遅くなるので非推奨

@media もその一つ

HTMLコードをコピーしてCSSコードに、クラスを一括で用意する方法（VSコード使用時）

①HTMLコードをCSSファイルにそのまま貼り付ける

②classを選択し、Control+Dで同じテキストを同時選択できる

③Control+Shiftで矢印キーを押すと選択範囲を指定して不要な部分を消す

④文頭にドット、文末にかっこを付ける。Altを押しながら矢印で移動

※Shift₊タブキーでインデントをそろえられる

子要素に対して横並びに指定する

desplay: flex;

加えて、横幅に対して中央寄せ→align-items: center;{}

縦の幅に対して中央寄せ→justify-content: center;{}

縦の幅に対して左右にできるだけ配置→justify-content: space-between;{}

リンクタグの下線部を消す

aタグでリンクを作ると、テキスト部分に自動で下線が入る。

text-decoration: noneで消せる。text-decoration: underlineで下線が入る。

まとめ

以上でCSSの基本文法についての記事を終える。

プログラミングを扱う上で、HTMLやCSSは必ず必要となる。

本記事で取り上げた内容は最低限ではあるが、個人開発程度の目的であればこれくらいで十分である。

必要とあればググればいいので。

＞＞HTMLのコード一覧はこちら