MENU
webサイト制作のロードマップ
  1. ホーム
  2. css武器庫
  3. cssの基礎

cssの基礎

2022-06-12

ここからはcssについて学んでいきます。

まずはcssの基礎についてです。

Progateや他の教材、もしくは独学ですでに学んでいる方もいるかもしれませんが、ここではcssの一番基礎的な事から説明します。

基礎だからと言って飛ばすような事はしないでください。

特に独学で勉強している場合、かなり多くの抜け漏れがあります。

この基礎を頭に入れないまま進んでしまうと、この教材で何を言っているのか言葉の意味が分からずに躓く原因になります。

例えば数学の基礎である分数どうしの割り算の方法がわからないのに大学の数式問題の講義を受けているようなものです。

基礎を知らなければ何を言っているのかすらわからなくなりますので、飛ばさずに学習しましょう。

目次

cssスタイルの構造

以下がcssの書き方の例になります。

これで1つの命令となり、htmlのテキストを装飾する事ができるようになります。

この命令の塊をルールと言います。

h1 {
  color: red;
}

cssをある程度経験した事がる方はこの意味が分かるかもしれませんが、この塊がルールという名前だという事をしっていましたでしょうか？

また、宣言はどこのことを指しているかわかりますでしょか？

基礎を勉強していないと細かい部分は忘れてしまいがちです。

実務では呼び名は使用する事が少ないので重きを置かれませんが、ドキュメントよを読む際、教材で勉強する際は必要になりますので学習していきましょう。

プロパティ

p {
  margin: 32px;
}

marginがプロパティです。

値

p {
  margin: 32px;
}

32pxが値です。

セレクター

.apple {
  background-color: red;
  border-radius: 50%;
}

.appleがセレクターです。

宣言

.code-snippet {
  padding: 32px;
  white-space: pre-wrap;
}

padding: 32px;やwhite-space: pre-wrap;が宣言です。

最後の宣言というと white-space: pre-wrap; となります。

ルール

p {
  color: red;
  font-family: sans-serif;
}

p { color: red; font-family: sans-serif;}がルールです。

ユニット

p {
  padding-top: 24px;
}

pxがユニットです。

セレクター

cssではセレクターを使用してどのDOM（html要素）にスタイルを適応するかを選択します。

セレクターは多くの指定方法があり複雑なhtml構造に対応する事が可能です。

タグ

htmlタグをセレクタ名にする事が可能です。

<style>
h1 {
  color: red;
}
</style>

<section class="section">
  <h1>見出し1</h1>
</section>

cssはグローバルですのでこれで全てのh1タグのテキストを赤にする事が可能です。

class

htmlタグに付けたclass名をセレクターにする事が可能です。

<style>
h1 {
  color: red;
}

.section {
  margin-top: 16px;
}
</style>
<section class="section">
  <h1>見出し1</h1>
</section>

これでsectionタグの上に余白をつける事ができました。

class名を指定する際は文字の前に「.」をつけて使用します。

id

htmlタグに付けたid名をセレクターにする事が可能です。

<style>
h1 {
  color: red;
}

.section {
  margin-top: 16px;
}

#heading-1 {
  color: black;
}
</style>
<section class="section">
  <h1 id="heading-1">見出し1</h1>
</section>

初めのルールでh1を赤にする設定にしていますがidセレクターの方が詳細度が高いのでこの場合、h1のテキストの色は黒になります。

id名を指定する際は文字の前に「#」をつけて使用します。

全称セレクター

すべてのhtml要素を対象にするセレクターです。

* {
  color: green;
}

ブラウザにはデフォルトでスタイルがついていますが、それはブラウザ毎に異なりますのでその差異を吸収するためにcssのリセットを行う事がよくあります。

その際に全称セレクターを使用して一律で当てたいスタイルを記載する事があります。

属性セレクター

指定した属性が存在する、またはその値に基づいた要素を選択します。

<style>
h1[class~="target"] {
  color: green;
}
</style>
<section class="section">
  <h1>見出し1-1</h1>
  <h1 class="target">見出し1-2</h1>
</section>

class名にtargetという文字が含まれているh1タグの文字色を緑にします。

初めのh1（見出し1-1）はtartgetというclassを持っていないので見出し1-2だけが緑となります。

コンビネーター

コンビネーターを使用する事で親の中にある子など、より詳細な条件でスタイルを定義する事が可能となります。

子孫要素を指定する

親の中に含まれる子となる要素全てを対象にするセレクターです。

<style>
親要素 子要素 {
  // 宣言
}
.section h1 {
  color: green;
}
</style>
<section class="section">
  <h1>見出し1-1</h1>
</section>
<h1>見出し1-2</h1>

1つ目のclassセレクター（.section）と2つ目のタグセレクター（h1）の間に「　」空白を入れる事でsectionの中にあるh1要素のテキスト色を緑にしています。

ですので見出し1-2は緑になりません。

直属の子要素を指定する

子孫要素を指定する方法でセレクターを書いてしまうと、深い階層の要素でもスタイルが適応されてしまいます。

例えば以下です。

<style>
親要素 子要素 {
  // 宣言
}
.section h1 {
  color: green;
}
</style>
<section class="section">
  <div>
    <div>
      <h1>見出し1</h1>
    </div>
  </div>
</section>

divによりh1の階層が深くなっても.section h1のルールによりh1のテキストの色は赤色となります。

ただ、この場合にスタイルを適応したくない場合があります。

そんなときは直属の子要素のみを指定します。

<style>
親要素 > 子要素 {
  // 宣言
}
.section > h1 {
  color: green;
}
</style>
<section class="section">
  <div>
    <div>
      <h1>見出し1</h1>
    </div>
  </div>
  <h1>見出し2</h1>
</section>

1つ目のclassセレクター（.section）と2つ目のタグセレクター（h1）の間に「>」を入れる事でsectionの直下のh1要素のテキスト色を緑にしています。

section直下ですので見出し1にはスタイルは適応されません。

兄弟要素を指定する

同じ階層にある兄弟要素を指定する事ができます。

<style>
兄要素 ~ 弟要素 {
  // 宣言
}
h1 ~ p {
  color: green;
}
</style>
<section class="section">
  <h1>見出し1</h1>
  <div>テキスト-1</div>
  <p>テキスト-2</p>
  <p>テキスト-3</p>
</section>

h1の後に続くpタグ要素のテキストの色を緑にします。

ですのでテキスト-1は緑にはなりませんが、テキスト-2、テキスト-3は緑になります。

隣接した兄弟要素を指定する

ある要素にと隣り合う要素を指定する事ができます。

<style>
要素 + 要素 {
  // 宣言
}
h1 + p {
  color: green;
}
</style>
<section class="section">
  <h1>見出し1</h1>
  <p>テキスト-1</p>
  <p>テキスト-2</p>
</section>

h1にくっつくpタグ要素のテキストの色を緑にします。

ですのでテキスト-1は緑になりますがh1にくっついていないテキスト-2は緑にはなりません。

疑似クラス

疑似クラスとはセレクターに付与するワードつける事で、セレクターで示した要素が特定の状態になった時にスタイルを適応させる事ができるものです。

疑似クラスはいくつか存在しますが、全てを覚える必要はありません。

一般的に使用するものは一部に限られており、よく使用するものを紹介します。

:hover

ある要素にマウスカーソルを当てた時にスタイルを適応します。

<style>
h1:hover {
  color: green;
}
</style>
<section class="section">
  <h1>見出し1</h1>
</section>

見出し1にマウスカーソルが当たるとテキストの色が緑になります。

:focus

ある要素にフォーカスが当たるとスタイルを適応します。この実装は重要です。

<style>
  button:focus {
    color: green;
  }
  </style>
  <section class="section">
    <button>ボタン</button>
  </section>

ボタン要素にフォーカスが当たるとテキストの色が緑になります。

focusはアクセシビリティ目的で使用します。通常はこのようにフォーカスが当たった際にテキストを緑にする事はありません。通常はoutlineをつけ、選択中のアイテムをマークします。

なぜフォーカススタイルが重要か

なぜフォーカススタイルが必要なのか不思議に思うかもしれません。

どの要素が焦点を合わせているかを知ることがなぜ役立つのかを解説します。

フォーカススタイルは、主に「ポインタスタイル」の入力デバイス（マウス、トラックパッド、タッチスクリーン上の指など）を使用しない人に役立ちます。

例えばマウスを正確に動かす事ができない、もしくはノートパソコンなどでマウス操作しずらいなど、キーボード操作でページをコントロールしたい場面は多くあります。

そんな時、現在のキーボードの指す位置を知るすべがないとユーザーは操作をする事ができなくなってしまいます。

幸いこの実装を行わなくてもブラウザはデフォルト機能でフォーカススタイルを提供します。

ですが、ブラウザのフォーカススタイルはイベントが起こるタグ（a, buttonなど）にしかついていません。

独自でつけたい場合はこの:focusを使用して制御します。

ブラウザデフォルトのフォーカススタイルはoutline: none;を使用する事で消す事ができますが、このフォーカスのアウトラインを削除する事はやめてください（さらに目立つスタイルのセットに置き換える場合を除きます）。

フォーカスについての参考記事 フォーカスの可視化

アクセシビリティについての参考記事 a11y.coffee

さらに少し応用すると以下のようなことも可能になります。

See the Pen Untitled by tora (@-tora-) on CodePen.

タブキーを使用して、初めのメニュー1にフォーカスを当ててみてください。

子供のメニューが展開します。

:focus-within

子要素にフォーカスがあたった際にもスタイルを適応します。

<style>
  .target:focus-within {
    background-color: green;
  }
</style>
<section class="section">
  <div class="target">
    コンテンツ
    <a href="#">リンク</a>
  </div>
</section>

:focusでは自分自身にフォーカスが当たった際にスタイルが適応されました。

ですが:focus-withinはその子要素にフォーカスが当たっている際もスタイルを適応させる事が可能です。

こちらを応用する事で以下のような事が可能となります。

See the Pen Untitled by tora (@-tora-) on CodePen.

:focusの場合はメニュー1からフォーカスが外れると子供のメニューはとじてしまいました。

これはタブキーを使用しているユーザーが子メニューにアクセスする事を阻害しています。

これを解決するためには :focus-withinを使用し、子供のアイテムにフォーカスが当たっている時はメニューを展開するというスタイルを適応する事で解決できます。

:disabled

要素が無効の時にスタイルを適応します。

See the Pen Untitled by tora (@-tora-) on CodePen.

htmlタグにdisabledをつける事でユーザーからのイベントを無効にする事が可能です。

その際にスタイルを当てる事ができます。

参考MDN：HTML 属性: disabled

:checked

チェックボックス、ラジオボタンに checked をつける事でその要素が選択された状態となります。その際にスタイルを適応する事ができます。

See the Pen Untitled by tora (@-tora-) on CodePen. 

<style>
  input:checked + label {
    color: #ff0000;
  }
</style>
<section class="section">
  <input type="checkbox" id="box1" name="box1" checked>
  <label for="box1">チェックボックス<label>
</section>

チェックボックスにチェックが入る事で文字の色が赤色になります。

参考MDN：<input type=”checkbox”>

:nth-child

n番目の要素のみにスタイルを適応します。

使用方法は関数のように使用します。

:nth-child()と記載し、かっこの中に引数を渡します。

引数は数字もしくはnを渡す事が可能です。

まずは数字を渡した場合を見ます。

See the Pen Untitled by tora (@-tora-) on CodePen.

数字の場合は単純に渡した数字番目の要素にスタイルが適応されます。

次にnを組み合わせてみます。

nにはその要素の番号が入ってきます。

例えば、以下のように記載します。

See the Pen Untitled by tora (@-tora-) on CodePen.

このように記載すると2番目のメニュー2以降の要素のテキストの色が赤になります。

計算がこのような仕組みで動いているからです。

足し算だけでなく掛け算も可能です。

See the Pen Untitled by tora (@-tora-) on CodePen.

これで偶数の要素にスタイルを当てる事ができます。

掛け算と足し算を組み合わせる事で奇数の要素にスタイルを当てる事もできます。

See the Pen Untitled by tora (@-tora-) on CodePen.

:first-child, :last-child

一番最初、最後の要素にのみスタイルを適応します。

See the Pen Untitled by tora (@-tora-) on CodePen.

:not

指定した要素以外にスタイル適応します。

See the Pen Untitled by tora (@-tora-) on CodePen.

notの引数に:nth-child, :first-child, :last-childなどを入れる事もできますので、複雑な条件も可能です。

疑似要素

疑似要素とはセレクターに付与するワードつける事で、 選択された要素の特定の部分にスタイル付けできるようにするものです。

例えば::placeholder。

input要素のプレースホルダーに色をつける事が可能です。

See the Pen Untitled by tora (@-tora-) on CodePen.

要素を明示的に作成していませんが、inputタグに placeholder 属性を追加する事で疑似的によそが制作されます。

これが、疑似要素と呼ばれる理由です。これらのセレクターは、HTMLタグを使用して明示的に作成していないDOM内の要素にスタイルを当てる事ができます。

::before, ::after

::beforeは要素の前、::afterは要素の後ろに疑似的に要素を追加する事が可能です。

以下の例を見てください。

See the Pen Untitled by tora (@-tora-) on CodePen.

黒丸を表す要素はhtmlには存在しませんが、::before,::afterを使用してcssから疑似的に制作しています。

色

cssでの色の指定は複数の方法がありますが、よく使用されるものを紹介します。

キーワード

red, blue, greenなどキーワードを使用して色を指定します。

最終的に色を表す際は数値になります。沢山のキーワードが存在し、紐づけられた色の値の確認はMDNの<color>から確認する事が可能です。

構文

p {
  color: red; // テキストが赤色（#ff0000）になります。
}

RGB16進数

色を16進数を使用して指定します。

16進数と聞くととっつきづらいですが、この数字を覚える必要は全くなく、欲しい色の値を原色大辞典などで探して使用します。

構文

p {
 #ff0000; // 赤
}

この数字とアルファベットの組み合わせにはルールがあり、そのルールを理解すると色をイメージしやすくなります。

#から始まる数字とアルファベットの値はカラーコードと呼ばれます。

2桁づつの組み合わせとなっており、左からRed（赤）Green（緑）Blue（青）となっていて、その頭文字を取ってRGB（アールジービー）と呼ばれます。

それぞれの色は00からFFまでの値を利用して色の強さを指定します。

00からFFの部分が16進数となっております。

色のパターンとしては、RGBそれぞれ256通りあり、256通りの3乗で16,777,216通りの色を表す事が可能です。

RGB関数

RGB16進数では各色を16進数で表現していましたが、これは256通り存在すると記載しました。

この0～255の数字を引数とする事でRGB()関数を使用して色を指定する事ができます。

以下の例はテキストの色を緑色にする例です。

p {
  rgb(0, 255, 0);
}

256通りには0も含まれますのでmaxが255になる（0と1~255合わせて256）ことに注意してください。

RGBA関数

RGBA関数を使用すると色に透明度を加える事ができます。

item-2 {
  background-color: rgba(0,255,0, 0.5);
}

See the Pen Untitled by tora (@-tora-) on CodePen.

ユニット

ユニットとは値の単位の事です。

p {
  font-size: 16px;
}

上記の例ではpx部分がユニットです。

ユニットにはいくつかの単位があり、どのユニットが最適か議論されています。

ここで紹介する単位は一般的によく使用されるもので、他にも沢山の単位が存在します。

詳しく知りたい方はMDNのCSS の値と単位を参照ください。

px

もっとも一般的な単位です。

モニターの最小の単位となります。

p {
  font-size: 16px;
}

em

親要素のfont-sizeに対して相対的な値となります。

例えば親要素のfont-sieが16pxで、子要素のfont-sizeが1.5emですと、
子要素は16 × 1.5 = 24pxとなります。

See the Pen Untitled by tora (@-tora-) on CodePen.

上記のサンプルのようにitem2,item3はemでサイズ指定しているので、16の1.5倍、またその1.5倍となるので、どんどんサイズが大きくなります。

その一方でitem4のようにpxで絶対的にその値とセットする事でサイズを一定にする事が可能です。

emは少し計算がややこしくなるので多くの場合はpxを使用する事が一般的です。

rem

こちらもemと同じで相対的に値を決定します。emとの違いはどこの値を起点に値を計算するかにあります。

emでは親要素のfont-sizeでしたが、remはrootのfont-sizeを元に値を計算します。

rootとはhtmlタグです。

htmlタグのデフォルト値は16pxですので、1.5remと設定すると値は24px相当となります。

親要素を参照するわけではないので、階層構造となってもサイズは一定のままとなります。

See the Pen Untitled by tora (@-tora-) on CodePen.

font-size以外にも使用する事ができるので縦横比を変更したくない時など、remよりも使用するタイミングが多いです。

%

emやremのようにこちらも相対的に値を決定します。

違いは起点となるものが親の横幅という点です。

以下のようにコンテンツを横並びにしたい時によく使用されます。

%はとても便利ですが、少しややこしいのがhightに%を設定した時です。

hightに%を使用すると、親の高さに対しての割合ではなく、親の横幅起点となるで注意が必要です。

See the Pen Untitled by tora (@-tora-) on CodePen.

vw, vh

こちらも相対的に値を決定するユニットですが、起点にするものがブラウザ幅となります。

vwがブラウザの横幅でvhがブラウザの縦幅です。

画面いっぱいに要素を広げたいと時、たとえばモーダルウィンドウの背景などを表示する際に使用されます。

タイポグラフィー

タイポグラフィーとは文字のことを指します。

webサイトは閲覧者に何かを伝えるためのものです。その上で最も基礎的で最も大切な事は表示されているテキストになります。

どんなコンテンツ（文章）を表示するかも大切ですが、どんな見た目のテキストでそれを伝えるかも大切です。

cssにはテキストのスタイルを操作する方法が豊富にありますので、スタイリングの基本を解説します。

フォントファミリー

font-familプロパティーを使用する事でフォントの見た目をコントロールする事ができます。

font-family: 'Noto Sans JP';

このようにfont-famiry: フォント名;と記載する事で特定のフォントを使用する事ができます。

フォントの読み込み

じつはfont-family: ‘Noto Sans JP’;このように記載した場合、これだけではこちらのフォントを使用する事はできません。

理由はフォントにNoto Sans JPを指定しており、このフォントはデバイスにインストールしていない限り存在しないからです。

フォントというものは、表示する際にそのフォントのデータが必要にあります。

デバイスにデフォルトで入っているフォントデータは決まっており、Noto Sans JPはデフォルトでは入っていません。

人によってはフォントデータを持っている人もいますが、持っていないか、持っているかを各ユーザーにゆだねる事は適切ではありません。

ですのでフォントデータをこちらから用意し、そのデータを読み込む事で解決します。

フォントデータを用意する方法として、主に2つの方法があります。

  • webフォントを使用して読み込む
  • サーバー上にフォントデータを設置して読み込む

参考記事：今さら聞けないWebフォントの基礎知識

参考記事：Webフォントとは？メリット・デメリットなど　完全ガイド初級編【まとめ】> デバイスフォントとWebフォントとは

webフォントの読み込み

webフォントとはインターネット上に存在するフォントデータの事です。

このweb上に存在するフォントデータを読み込んで使用します。

よく使用されるものはGoogle web fontです。

Google web fontから使用したいフォントを選択しするとurlが発行されますのでそのurlをセットする事でフォントを読み込む事が可能です。

urlをセットする方法は以下の2つの方法があります。

  • cssに記載
  • htmlに記載

【htmlに記載する方法例】

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700" rel="stylesheet">

htmlのhead内にlinkタグを使用して記載する事でフォントを使用する事が可能になります。

参考になる記事：【簡単】Webフォントの使い方！Google web fontsを使ってみよう

【cssに記載する方法】

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700');

cssファイルの先頭に記載する事でフォントを読み込む事が可能です。

サーバー上にフォントを設置する

フォントデータをサーバーに設置し、そのデータを読み込んで表示する事も可能です。

例えば今回のようにNoto Sans JPを使用したいのであれば、Google web fontからフォントデータをダウンロードします。

そのデータをサーバーにアップロードし、@font-faceを使用して読み込みます。

@font-face {
  font-family: '任意のWEBフォント名';
  src: url('読み込むフォントファイルのパス') format('フォーマット名');
}

参考記事：CSSでWEBフォントを指定できる@font-face規則の書き方

webフォントを使用するデメリット

一見便利そうなwebフォントですが、デメリットが存在します。

  1. Googleがフォントの提供を終了したら表示されなくなる
  2. ページの読み込みが遅くなる
  3. 文字のちらつきが起こる

1つ目はイメージできるかと思います。データの提供は　Googleに依存していますので、Google障害が発生すればその影響を受けますが、可能性は低いですので大きな問題ではないでしょう。

2つ目。フォントデータ、特に日本語は数が多いですのでデータが思ったよも大きいです。

大きなデータを読み込みますので少しページの読み込みが遅くなってしまいます。

3つ目。データが大きい事に起因して、起こる問題です。

フォントデータの読み込みが完了するまではデバイスフォントが変わりに適応されます。

ですので初めに表示されているフォントをフォントデータが適応された後のフォントでフォントのデザインが異なれば異なるほど、切り替わりの際に文字がちらつきます。

デメリットはありますが、それを理解しつつ、デザインや全体のイメージを守るメリットの方が大きければwebフォントを使用するという選択は沢山ありますし、間違ってはいません。

デバイスフォントについて

パソコンやスマホにデフォルトで入っているフォントの事をデバイスフォントを呼びます。

デバイスフォントはWindows,Mac,iphone,など各デバイス毎に異なります。

【Windows】
メイリオ, Meiryo UI, 游ゴシック, 游明朝体, Yu Gothic UI, ＭＳ ゴシック, ＭＳ Ｐゴシックなど

【Mac】
ヒラギノ角ゴ, ヒラギノ角ゴ ProN, ヒラギノ角ゴ StdN, ヒラギノ明朝 ProN, ヒラギノ丸ゴ ProNなど

【iphone】
ヒラギノ角ゴ ProN, ヒラギノ明朝 ProN, ヒラギノ角ゴ, AcademyEngravedLetPlain, American Typewriterなど

このように入っているフォントが異なる一方で、そのwebページがどのデバイスで表示されるかわわかりません。

もし設定設定したフォントが「ヒラギノ角ゴ」なのにWindowsでそのページを見てしまうとヒラギノ角ゴは入っていないので表示されず、Windowsのデバイスフォントが使用されますが、その際に使用するバックアップ用のフォント情報も記載しておく必要があります。

方法はfont-familyを複数記載します。

font-familyは「,」カンマ区切りで複数のフォントをセットする事が可能です。

font-family: 'Noto Sans JP', sans-serif, 'メイリオ', 'Meiryo', 'ヒラギノ角ゴProN','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', '游ゴシック Medium', 'Yu Gothic Medium',  'Yu Gothic';

左から順に優先度が高くなります。

この場合、まずは一番左のNoto Sans JPを見ます。そのフォントが存在しなければ次にsans-serifを見ます。

このように左から順にフォントを見ていき、データが存在するフォントを出力します。

参考記事：font-familyの書き方まとめ：CSSでフォント種類を指定しよう

テキストフォーマット：太字

フォントの文字の太さをスタイリングします。

font-weight: 700;
or
font-weight: bold;

font-weightプロパティの値は数字もしくはキーワードを使用する事ができます。

フォントにもよりますが、フォントの太さは100~900まで100刻みで存在し、特定の数字にキーワードが割り当てられており、そのキーワードを使用する事で紐づいている数字が適応され、font-weightが決定します。

説明
normal400と同じです。font-weightのデフォルト値は400となります。
bold700と同じです。
lighterフォントの太さが親要素よりも相対的に 1 つ細くなります。
bolderフォントの太さが親要素よりも相対的に1つ太くなります。

See the Pen Untitled by tora (@-tora-) on CodePen.

参考記事：font-weight[MDN]

テキストフォーマット：下線

text-decorationプロパティを使用してテキストコンテンツの下に線を引く事ができます。

p {
  // 線を引く
  text-decoration: underline;
  // 線を消す
  text-decoration: none;
}

See the Pen Untitled by tora (@-tora-) on CodePen.

テキストフォーマット：アラインメント

text-alignプロパティを使用してテキストの位置を調整する事が可能です。

p {
  // テキストの位置、左（デフォルト）
  text-align: left;
  // テキストの位置、中央
  text-align: center;
  // テキストの位置、右
  text-align: right;
}

See the Pen Untitled by tora (@-tora-) on CodePen.

インライン要素のテキスト位置を調整する場合

インライン要素の場合はその要素にではなく、親要素に対してtext-alignプロパティを設定する必要があります。

これはコンテンツに十分な余白が無いためです。

インライン要素の横幅はコンテンツの中身に対してひったりくっつきます。

ですので、中のテキストを中央や、右側に配置できるスペースが無く、左配置にしかなりません。

インライン要素を中央、右位置にするにはブロック要素の親を作り、その親にtext-alignプロパティを適応させます。

<style>
.parent {
  text-align: center;
}
</style>

<p class="parent"><a href="#">テキスト要素</a></p>

ブロック要素、インライン要素についてはボックスモデルの章で詳しく解説します。

テキストフォーマット：テキスト変換

text-transformプロパティを使用して、テキストのフォーマットを微調整できます。

日本語には関係ありませんが、英語の大文字、小文字変換を調整できるものです。

/*すべて大文字*/
text-transform: uppercase;
/*すべての単語の最初の文字を大文字にします*/
text-transform: capitalize;

テキストフォーマット：スペーシング

1文字1文字のテキストどうしの余白を調整します。

縦方向の調整

縦方向の余白の調整はline-heightで行います。

p {
  line-height: 1.5;
}

上記の例のようにユニットを設定しない場合、emと同じ動きをします。

この要素のフォントサイズに対して1.5倍の高さを保持します。ですので、例えばフォントサイズが16pxであれば24pxの高さを保持します。

フォント自体は16pxですが、フォントサイズ16 × line-hight1.5 = 1行の高さ24pxとなり、24px – 16px = 8pxが余白部分です。

余白は上下に均等につきますので2で割って、上の余白4px、下の余白4pxになります。

この余白が存在するおかげで1行目と2行目が積みあがっても間隔が8px空き、読みやすさを作っています。

今回はユニットを指定しませんでしたが、他にもpx値で直接していする事も可能です。

横方向の調整

横方向の余白の調整はletter-spacingプロパティで行います。

こちらもline-hightプロパティと同じくem、pxで値を指定できますが今回は単位は必項です。

動きは同じでemを使用するとこの要素のフォントサイズに対して割合で値が決まります。

p{
  letter-spacing: 0.5em;
}

この要素のフォントサイズが16pxの場合、0.5倍の幅を保持します。ですので、2.4pxの余白ができるわけです。

メディアクエリ

@mediaを使用する事で画面サイズに応じてcssを切り替える事が可能です。

まず、メディアクエリを有効にするにはhtmlに以下の記述を追加しなければいけません。

<meta name="viewport" content="width=device-width, viewport-fit=cover">

その後、cssにメディアクエリを記載しますが、メディアクエリの構文は以下になります。

@media メディアタイプ and (ブレークポイントのルール) {
  /* 宣言をここに記載 */
}

メディアタイプ

このコードがどのようなメディア（例えば、印刷、画面）のためのものであるかをブラウザーに伝えます。

ここに記載するメディアタイプには以下がります。

  • all（すべて）
  • print（印刷）
  • screen（画面）
  • speech（音声合成）

一般的には画面サイズによってcssを変化させたいのでscreenを使用します。

@media screen and (ブレークポイントのルール) {
  /* 宣言をここに記載 */
}

ブレークポイントのルール

どの画面幅でcssを適応させたいかのルールをブラウザに伝えます。

ブレークポイントの書き方は以下です。

@media screen and (max-width: 1023px) {
  /* 1023px以下の時の宣言をここに記載 */
}
@media screen and (min-width: 1024px) {
  /* 1024px以上の時の宣言をここに記載 */
}

max-width, min-widthを使用して記載します。

max-width: 1023pxとはマックス（最大）の幅が1023pxなので、

今の幅 <= 1023px この式が成り立つ時、すなわち1023以下の時となります。

min-width: 1024pxとはミニマム（最小）の幅が1024pxなので、

今の幅 >= 1024px この式が成り立つ時、すなわち1024px以上の時となります。

複数のメディアクエリ

メディアクエリは論理値を使用して複数の値を組わせて使用する事が可能です。

論理値とはorやandの事で、orは「もしくは」と表し、andは「かつ」を表します。

例えば786px～1023pxの間でのみcssを適応したい場合は以下のようにブレークポイントのルールを組わせて使用します。

@media screen and (min-width: 786px) and (max-width: 1023px) {
  /* 786px以上1023px以下の時の宣言をここに記載 */
}

コメント

htmlと同様にcssにもコメントを残す事が可能です。

ハック的なスタイリングや、ブラウザ依存のスタイルを実装したと時などは、他のエンジニアがそのコードを見て一目でわかるようにコメントを残しておきます。

cssでのコメントの方法は「//」スラッシュ2つで一行をコメントにする事が可能です。

「/**/」で囲う事で複数行をコメントとして扱う事もできます。

// 一行コメント
/*
複数行コメント
複数行コメント
*/
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

SushiRice管理人のトラのアバター SushiRice管理人のトラ エンジニア

プログラムちょと書ける。
いまはバリ島でスクール作っている。
プログラムちょっとできる。

関連記事

目次