【プログラミング】CSSを覚えてWebページを綺麗にしよう【マークアップ言語】

css

学習中のカメ

HTMLだけだとWebサイトがなんか味気ない感じだね〜
CSSっていうWebページを綺麗にスタイリングすることのできるマークアップ言語を学んでいこう

学び続けるウサギ

学習中のカメ

かっこよくオシャレな感じになるなら頑張ってみる〜

CSSを覚えてWebページを綺麗にしよう

CSSとは?

CSS(シーエスエス)・・・Cascading Style Sheets

CSSは、Webページに色をつけたり、文字の大きさや配置を変えてページをデザインするマークアップ言語のことです。

おおまかなイメージとしては白黒のページがHTMLで、カラフルなページがCSSを使っている感じですね。

CSSを使用できるようになれば文字や背景などを好きな色で組み合わせることができるようになります。

CSSを覚えることで、Webサイトやブログなどを好きな色に変更したり、更新したりできるようになるので、覚えていきたいスキルの一つですね。

CSSは、基本的に半角英数字小文字で記述していきます。

要素のことをセレクタといい、変更する項目のことをプロパティといいます。CSSのプロパティの末尾には:(コロン)、行末には;(セミコロン)をつけて表示させます。

上記図は、h2(セレクタ)の色(プロパティ)を#333333(値)の色に変える意味です。

最初は「セレクタ?、プロパティ?、、要素?、、」どっちがどっちで何が何だかわからないかと思われますが、そのうち覚えていくと思いますので大丈夫です。

文字化けを防ぐためにCSSファイルに記述

CSSファイルの最初の1行目には

@charset "UTF-8";

を書くと日本語などの文字化けを防ぐことができます。

書いてないものも多いですが、書いておいた方が無難ですね。

ブラウザによって変わるCSSをリセットしたい

ブラウザ同士の誤差をなくすためにリセットCSSは自分で記述できますが、外部のCSSファイルを読み込ませると楽です。

ress.cssやNormalize.cssなどがあります。

<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

 

上記のress.cssをhead内に記述するだけでリセットCSSが効きます。

注意点として上書きされないように必ず自分で作ったCSSの上の行に記述します。

 

それぞれCSSをみていきましょう。

文字の表示を変えたい

 

文字の大きさを変える方法

CSS
font-size

読み:フォントサイズ

単位

 

px(ピクセル) 絶対値指定

 

(パーセント) 親要素の相対値

 

em(エム) 文字の高さが基準の単位、親要素のfont-sizeを基準に相対指定される

 

rem (レム、root em) ルート要素(html要素)のfont-sizeが基準になる

 

それぞれpx(ピクセル)などの単位を指定して大きさを変えていきます。

ピクセル(絶対値)以外は相対値なので基準値により変わります。

html のfont-sizeを100%にしておくと、通常16pxなどでブラウザで表示されます。

一般的に見やすい大きさが14~18pxの大きさとされています。

googleが現在推奨しているフォントサイズは16pxです。

100%=16px=12pt=1em=1remになります。

それぞれのユーザーが見やすいようにブラウザで設定した大きさで表示されるのでユーザーに優しい設定ですね。

文字サイズを変えてみよう

See the Pen
YzWzJXX
by moku11 (@moku11)
on CodePen.

文字の種類を変えたい

CSS
font-family

読み:フォントファミリー

大きくわけて、明朝体(serif)とゴシック体( sans-serif)があります。

明朝体

明朝体の特徴としては、文字の横線よりも縦線が太くて、ウロコと言われる三角形の形の山が文字の曲がり角についています。

長文を読む時に疲れにくく小説や教科書などで活躍しています。

ゴシック体

ゴシック体の特徴は、縦横ほとんど同じ太さの線で、ウロコがほぼないフォントになります。

視認性が高いので、プレゼン資料や看板などで活躍していますね。

遠くからフォントを見てもはっきり見えるのが特徴です。

 

それぞれフォントの種類をWebサイトなどの使い道によって使い分けていきます。

Google Fontsなどの無料で商用利用可能なWebフォントを使うとバリエーションが増えます。

フォント名にスペースがある場合は、ダブルクォーテーションで囲みます。
例)”Arial Black”

一般的にはカンマ記号(,)で区切りフォントを複数記述して先に書いたものから優先に適用されます。

文字の太さを指定する方法

CSS
font-weight

読み:フォントウェイト

normal・・・標準のサイズ

 

bold・・・太字

 

italic・・・斜体

文字の間隔を空けたい

CSS
letter-spacing

読み:レタースペーシング

テキストの水平方向の間隔を指定することができます。

初期値はnormalで間隔は0になっています。

行間を指定する方法

CSS
line-height

読み:ラインハイト

行間(行の高さ)を指定することができます。

背景色を変えたい

CSS
background

読み:バックグラウンド

CSSで背景画像を指定する方法

CSS
background-image: url();

読み:バックグラウンドイメージ

大きさによって背景を埋め尽くすまで画像が埋め尽くされてしまう時は、

background-size: cover;を使うと表示する領域を埋め尽くしてに拡大縮小します。

containを使うと縦横比を保持したまま全部画像が表示されます。

background-repeat:〜;で繰り返し表示を指定できます。

repeat

縦と横に繰り返す

no-repeat

繰り返さない

background-repeat-x

横方向

background-repeat-y

縦方向

 

横幅・高さを変えたい

CSS
width

読み:ウィドゥス、ウィズ

横幅を指定します。

CSS
height

読み:ハイト

高さを指定します。

auto(初期値)

 

px

 

%

 

em

 

rem

 

vw(viewport width)

 

vh(viewport height)

vw、vhのビューポートはwebブラウザの表示されている領域のことです。

単位がいっぱいあってややこしいですね笑

リストを横並びにする方法

CSS
float

読み:フロート

float:left;  要素が左から横並びになります。

float:right;  要素が右から横並びになります。

CSSでみんなが最初につまずきやすいポイントのfloatです笑

フロートは浮くという意味なので、floatを使うことで浮いている状態になっていると考えると少し理解できます。

最近はflexboxが出てきたので助かりますよね。

簡単にWebページのレイアウトを組みたい

CSS
display: flex;

floatよりも分かりやすい、Flexbox(フレックスボックス)を使います。

display: flex; を親要素に指定すると、子要素の配置が横並びに変わります。

flexboxの並び順を変えたい

初期値の横並び以外に子要素の並び方を変えたい場合は、

flex-directionのプロパティを一緒に使います。

flex-directionで子要素の並ぶ方向
子要素の並び順
row(初期値) 左→右
row-reverse 右→左
column 上→下
column-reverse 下→上

flexboxを複数行にしたい

子要素が親要素の幅からはみ出た時に複数行にしたい場合は、flex-wrapを使います。

flex-wrapで子要素の折り返し指定
子要素の並び順
nowrap(初期値) 1行で表示
wrap 上→下へ折り返す
wrap-reverse 下→上へ折り返す

flexboxの水平方向と垂直方向の位置を指定したい

子要素の水平方向(横)の位置を指定したい時は、justify-contentのプロパティで指定します。

justify-contentで子要素の水平方向の配置指定
子要素の並び
flex-start(初期値) 左揃え
flex-end 右揃え
space-between 両端揃えで均等間隔
space-around 均等間隔
center 中央揃え

子要素の垂直方向(縦)の位置を指定したい時は、align-itemsのプロパティで指定します。

align-itemsで子要素の垂直方向の配置指定
子要素の並び
stretch(初期値) 親要素・一番大きい子要素の高さ
flex-start 上揃え・親要素の開始から
flex-end 下揃え・親要素の終点から
baseline ベースライン揃え
center 中央揃え

子要素が複数行になるときの垂直方向(縦)の位置を指定したい時は、align-contentのプロパティで指定します。

align-contentで子要素の複数行の垂直方向の配置指定
子要素の並び
stretch(初期値) 親要素の高さ
flex-start 上揃え・親要素の開始から
flex-end 下揃え・親要素の終点から
space-between 上下揃えで均等間隔
space-around 均等間隔
center 中央揃え

CSSを何も指定しないと縦にコンテンツが並んでいくだけなので、Flexboxを覚えればレイアウトを自由自在に扱えそうな気持ちになりますね。

floatやflexboxもですが、横にコンテンツが並ぶだけでちょっと嬉しいです笑

Flexboxをわかりやすく理解するにはゲーム感覚でできるカエルが可愛いFlexbox Froggyが楽しくてオススメです。

文中の一部にCSSを適用したい

CSS
<span></span>

<span>タグを使います。

<span class=”〜”>こんにちは</span>   例)class属性をつけて色を変えます。

こんにちは

上記のような感じで一部色を変えたい時に使います。

要素の空白を変えたい

HTMLの全ての要素にはborderがあります。

謎の余白に1日以上悩まされていた時に思い出しました。

上下左右どこにpaddingやmarginがあるのかわからない時は、Google chrome検証ツールを使用して見てみると直感的で分かりやすいです。

CSS
padding

読み:パディング

borderの内側を指定します。

上下左右に指定できます。

CSS
margin

読み:マージン

borderの外側を指定します。

それぞれ top(上)bottom(下)left(左)right(右)で余白を設定することができます。

要素に枠線をつけたい

CSS
border

枠線の太さ、種類、色を指定することができます。

まとめて指定することもできます。

 

例)border: 1px solid blue;

 

要素を中央に寄せたい

CSS
margin:0 auto;

要素を透過させたい

CSS
opacity

0.0(透明)〜1.0(不透明)の間で指定します。

要素の中身全てを透過させることができます。

背景色のみを透過させたい

CSS
rgba(〜,〜,〜,〜);

最後のの0.1〜1.0を調整すると透過することができます。

複数のセレクタに同じCSSを指定する方法

CSS
,

,(コンマ)記号でセレクタを区切るとそれぞれに指定することができます。

例)h2, p {〜: 〜;}

h2もpも同じCSSが指定されます。

CSS
>

直下の階層のみに適用されます。

半角空白

>記号の代わりに、半角空白を入れると下の階層全てに適用されます。

CSS
+

例)p + p

同じ階層にある一つ目のpの直後のpに反映されます。

+ を使ったCSSの復習

See the Pen
セレクタの組み合わせ
by moku11 (@moku11)
on CodePen.

ブロック要素とインライン要素

ブロック要素(ブロックレベル要素)とは

親要素の幅いっぱいに広がるひとつのかたまりの要素のことです。
前後に改行されます。

インライン要素とは

前後に改行されない文章の一部としての要素のことです。

横の幅・高さを指定することができません。

要素同士を重ねる方法

CSS
position:absolute;

サイトの左上が基準になりposition:relative; を使うとその部分の左上が基準になります。

画面上に要素を固定したい

CSS
position:fixed;

位置を固定する

CSS
z-index:〜;

数字が大きいほど上に重なります。

例)(上に表示 100 〜 −1 下に表示)

マイナスも使えます。

z-indexはpositionプロパティと併用して使います。

アニメーションをつけたい

CSS
transition

変化の対象、かかる時間を指定することができます。

例)transition:  all 1s;

hoverとよく組み合わせて使われます。

擬似要素

CSS

::before

::after

擬似要素を使うと要素の特定の部分をカスタマイズすることができます。

contentプロパティは必ずつけます。

HTMLはdata-で始まっていれば自分で要素を追加(カスタムデータ属性)しても表示されるので、アトリビュートの命令( attr() )を使って表示させます。

擬似要素の復習

See the Pen
擬似要素
by moku11 (@moku11)
on CodePen.

まとめ

csss

今回はCSSの復習をしてきました。

最初は覚えるのがめちゃくちゃ辛いかと思われますが、慣れていくまでは1日1行でもエディタにコードを打ち込みつつ頑張りましょう。

 

何回も手を動かしていけば自然と頭に入っていくと思います。

 

HTMLを復習したい方は、こちらのHTMLタグの意味を理解して覚えようを参考にしてみてください。

 

\1週間無料体験/

コメントを残す

メールアドレスが公開されることはありません。